@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/forms/date-time-picker/DateTimePicker.sty.js

@@ -1,13 +1,14 @@
+import "../../core/components/app-root/AppRoot.css";
 import "../../styles/textStyle.css";
 import "../spin-buttons/SpinButton.css";
 import "./DateTimePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearIconButton = "_1i883gjh-3-4-0";
-var dateSelector = "_1i883gjg-3-4-0";
-var dateTimePicker = _7a468({ defaultClassName: "_1i883gj7-3-4-0", variantClassNames: { readOnly: { true: "_1i883gj8-3-4-0" }, showError: { true: "_1i883gj9-3-4-0" }, disabled: { true: "_1i883gja-3-4-0" }, type: { date: "_1i883gjb-3-4-0", time: "_1i883gjc-3-4-0", datetime: "_1i883gjd-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, showError: true }, "_1i883gje-3-4-0"]] });
-var spinButtonGroup = "_1i883gjf-3-4-0 _da9a8v0-3-4-0 _da9a8v2-3-4-0 _da9a8v3-3-4-0 _da9a8vb-3-4-0";
-var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj6-3-4-0)";
-var spinButtonSelectionColorVar = "var(--_1i883gj5-3-4-0)";
+var clearIconButton = "_1i883gjh-3-5-0";
+var dateSelector = "_1i883gjg-3-5-0";
+var dateTimePicker = _7a468({ defaultClassName: "_1i883gj7-3-5-0", variantClassNames: { readOnly: { true: "_1i883gj8-3-5-0" }, showError: { true: "_1i883gj9-3-5-0" }, disabled: { true: "_1i883gja-3-5-0" }, type: { date: "_1i883gjb-3-5-0", time: "_1i883gjc-3-5-0", datetime: "_1i883gjd-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, showError: true }, "_1i883gje-3-5-0"]] });
+var spinButtonGroup = "_1i883gjf-3-5-0 _da9a8v0-3-5-0 _da9a8v2-3-5-0 _da9a8v3-3-5-0 _da9a8vb-3-5-0";
+var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj6-3-5-0)";
+var spinButtonSelectionColorVar = "var(--_1i883gj5-3-5-0)";
 export {
   clearIconButton,
   dateSelector,

package/esm/forms/date-time-picker/DateTimePicker.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePicker.css.ts"],
-  "sourcesContent": ["import '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearIconButton = '_1i883gjh-3-4-0';\nexport var dateSelector = '_1i883gjg-3-4-0';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj7-3-4-0',variantClassNames:{readOnly:{true:'_1i883gj8-3-4-0'},showError:{true:'_1i883gj9-3-4-0'},disabled:{true:'_1i883gja-3-4-0'},type:{date:'_1i883gjb-3-4-0',time:'_1i883gjc-3-4-0',datetime:'_1i883gjd-3-4-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,showError:true},'_1i883gje-3-4-0']]});\nexport var spinButtonGroup = '_1i883gjf-3-4-0 _da9a8v0-3-4-0 _da9a8v2-3-4-0 _da9a8v3-3-4-0 _da9a8vb-3-4-0';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj6-3-4-0)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj5-3-4-0)';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB;AACtB,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,MAAK,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,WAAU,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACpW,IAAI,kBAAkB;AACtB,IAAI,wCAAwC;AAC5C,IAAI,8BAA8B;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearIconButton = '_1i883gjh-3-5-0';\nexport var dateSelector = '_1i883gjg-3-5-0';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj7-3-5-0',variantClassNames:{readOnly:{true:'_1i883gj8-3-5-0'},showError:{true:'_1i883gj9-3-5-0'},disabled:{true:'_1i883gja-3-5-0'},type:{date:'_1i883gjb-3-5-0',time:'_1i883gjc-3-5-0',datetime:'_1i883gjd-3-5-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,showError:true},'_1i883gje-3-5-0']]});\nexport var spinButtonGroup = '_1i883gjf-3-5-0 _da9a8v0-3-5-0 _da9a8v2-3-5-0 _da9a8v3-3-5-0 _da9a8vb-3-5-0';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj6-3-5-0)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj5-3-5-0)';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB;AACtB,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,MAAK,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,WAAU,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACpW,IAAI,kBAAkB;AACtB,IAAI,wCAAwC;AAC5C,IAAI,8BAA8B;",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateRangeSelector.css

@@ -1,9 +1,4 @@
-._1uftu980-3-4-0 {
-  cursor: not-allowed;
-  color: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  background: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-}
-._1uftu981-3-4-0 {
+._1uftu980-3-5-0 {
   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);
   transition-property: color, background-color, transform;

package/esm/forms/date-time-range-picker/DateRangeSelector.js

@@ -9,6 +9,7 @@ import { Button } from "../../buttons/button/Button.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { useDateTimeRangePickerStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
+import { isVisualRefreshEnabled } from "../../core/utils/is-visual-refresh-enabled.js";
 import { useOverlayWithTrigger } from "../../overlays/hooks/useOverlayWithTrigger.js";
 import { Overlay } from "../../overlays/overlay/Overlay.js";
 import { globalSprinkles } from "../../styles/safe-sprinkles.js";
@@ -88,22 +89,21 @@ const DateRangeSelector = forwardRef((props, forwardedRef) => {
     }),
     [error, disabled]
   );
+  const isCritical = isVisualRefreshEnabled() ? error && !disabled && !readOnly : error;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         ref: rootRef,
         "data-testid": dataTestId,
-        className: clsx(styles.selector, focusClassName, consumerClassName, {
-          [styles.readOnly]: readOnly
-        }),
+        className: clsx(styles.selector, focusClassName, consumerClassName),
         style: consumerStyle,
         "aria-label": calendarTriggerLabel,
         ...remainingProps,
         ...overlayTriggerProps,
         size: "condensed",
-        color: error ? "critical" : "neutral",
-        disabled,
+        color: isCritical ? "critical" : "neutral",
+        disabled: disabled || readOnly,
         "aria-disabled": ariaDisabledProp,
         variant: "emphasized",
         "data-dt-name": "ShowCalendar",

package/esm/forms/date-time-range-picker/DateRangeSelector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateRangeSelector.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useImperativeHandle, useState, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './DateRangeSelector.sty.js';\nimport type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateRangeSelector = forwardRef<\n  DateRangeSelectorRef,\n  DateRangeSelectorProps\n>((props, forwardedRef) => {\n  const {\n    disabled,\n    readOnly,\n    error,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  } = props;\n  const [open, setOpen] = useState(false);\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'DateRangePicker calendar trigger',\n    id: 'K2M82PM/gcTo3fjq',\n    description: 'Text shown for the datetimerangepicker calendar trigger.',\n  });\n\n  const clearCalendarValue = useDateTimeRangePickerStore(\n    (state) => state.clearCalendarValue,\n  );\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-end',\n    offset: 8,\n    shouldCloseOnBlur: false,\n    open,\n    onOpenChange: (isOpen) => {\n      if (!isOpen) {\n        clearCalendarValue?.();\n      }\n      setOpen(isOpen);\n    },\n    // the overlay should not open when disabled or readOnly\n    disabled: disabled || readOnly,\n  });\n\n  const rootRef = useMergeRefs<HTMLButtonElement | null>([\n    triggerRef,\n    targetRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DateRangeSelectorRef => ({\n      open: () => setOpen(true),\n      close: () => setOpen(false),\n    }),\n    [],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: false,\n    isMinimal: false,\n    disabled: disabled,\n    color: error ? 'critical' : 'neutral',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      dispatch: noop,\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        isDisabled: disabled,\n        showError: error,\n      },\n    }),\n    [error, disabled],\n  );\n\n  return (\n    <>\n      <Button\n        ref={rootRef}\n        data-testid={dataTestId}\n        className={clsx(styles.selector, focusClassName, consumerClassName, {\n          [styles.readOnly]: readOnly,\n        })}\n        style={consumerStyle}\n        aria-label={calendarTriggerLabel}\n        {...remainingProps}\n        {...overlayTriggerProps}\n        size=\"condensed\"\n        color={error ? 'critical' : 'neutral'}\n        disabled={disabled}\n        aria-disabled={ariaDisabledProp}\n        variant=\"emphasized\"\n        data-dt-name=\"ShowCalendar\"\n      >\n        <Button.Prefix>\n          <CalendarIcon />\n        </Button.Prefix>\n      </Button>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={globalSprinkles({\n          paddingLeft: 16,\n          paddingTop: 16,\n          paddingRight: 16,\n          paddingBottom: 16,\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n          <CalendarRoot type=\"range\" aria-disabled={ariaDisabledProp} />\n        </FormFieldMessageContext.Provider>\n      </Overlay>\n    </>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useImperativeHandle, useState, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './DateRangeSelector.sty.js';\nimport type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { isVisualRefreshEnabled } from '../../core/utils/is-visual-refresh-enabled.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateRangeSelector = forwardRef<\n  DateRangeSelectorRef,\n  DateRangeSelectorProps\n>((props, forwardedRef) => {\n  const {\n    disabled,\n    readOnly,\n    error,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  } = props;\n  const [open, setOpen] = useState(false);\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'DateRangePicker calendar trigger',\n    id: 'K2M82PM/gcTo3fjq',\n    description: 'Text shown for the datetimerangepicker calendar trigger.',\n  });\n\n  const clearCalendarValue = useDateTimeRangePickerStore(\n    (state) => state.clearCalendarValue,\n  );\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-end',\n    offset: 8,\n    shouldCloseOnBlur: false,\n    open,\n    onOpenChange: (isOpen) => {\n      if (!isOpen) {\n        clearCalendarValue?.();\n      }\n      setOpen(isOpen);\n    },\n    // the overlay should not open when disabled or readOnly\n    disabled: disabled || readOnly,\n  });\n\n  const rootRef = useMergeRefs<HTMLButtonElement | null>([\n    triggerRef,\n    targetRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DateRangeSelectorRef => ({\n      open: () => setOpen(true),\n      close: () => setOpen(false),\n    }),\n    [],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: false,\n    isMinimal: false,\n    disabled: disabled,\n    color: error ? 'critical' : 'neutral',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      dispatch: noop,\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        isDisabled: disabled,\n        showError: error,\n      },\n    }),\n    [error, disabled],\n  );\n\n  // with the visual refresh enabled, only pure error state should receive critical coloring\n  const isCritical = isVisualRefreshEnabled()\n    ? error && !disabled && !readOnly\n    : error;\n\n  return (\n    <>\n      <Button\n        ref={rootRef}\n        data-testid={dataTestId}\n        className={clsx(styles.selector, focusClassName, consumerClassName)}\n        style={consumerStyle}\n        aria-label={calendarTriggerLabel}\n        {...remainingProps}\n        {...overlayTriggerProps}\n        size=\"condensed\"\n        color={isCritical ? 'critical' : 'neutral'}\n        disabled={disabled || readOnly}\n        aria-disabled={ariaDisabledProp}\n        variant=\"emphasized\"\n        data-dt-name=\"ShowCalendar\"\n      >\n        <Button.Prefix>\n          <CalendarIcon />\n        </Button.Prefix>\n      </Button>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={globalSprinkles({\n          paddingLeft: 16,\n          paddingTop: 16,\n          paddingRight: 16,\n          paddingBottom: 16,\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n          <CalendarRoot type=\"range\" aria-disabled={ariaDisabledProp} />\n        </FormFieldMessageContext.Provider>\n      </Overlay>\n    </>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateRangeSelector.sty.js

@@ -1,8 +1,6 @@
 import "./DateRangeSelector.css";
-var readOnly = "_1uftu980-3-4-0";
-var selector = "_1uftu981-3-4-0";
+var selector = "_1uftu980-3-5-0";
 export {
-  readOnly,
   selector
 };
 //# sourceMappingURL=DateRangeSelector.sty.js.map

package/esm/forms/date-time-range-picker/DateRangeSelector.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateRangeSelector.css.ts"],
-  "sourcesContent": ["import './DateRangeSelector.css';\nexport var readOnly = '_1uftu980-3-4-0';\nexport var selector = '_1uftu981-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,WAAW;",
+  "sourcesContent": ["import './DateRangeSelector.css';\nexport var selector = '_1uftu980-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeInput.css

@@ -1,33 +1,33 @@
-._5u9o250-3-4-0 {
+._5u9o250-3-5-0 {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
-._5u9o250-3-4-0::-webkit-scrollbar {
+._5u9o250-3-5-0::-webkit-scrollbar {
   display: none;
 }
-._5u9o252-3-4-0 {
+._5u9o252-3-5-0 {
   outline: none;
 }
-._5u9o252-3-4-0:not(:focus-visible) {
+._5u9o252-3-5-0:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o252-3-4-0:empty::before {
+._5u9o252-3-5-0:empty::before {
   content: var(--data-placeholder);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1vlwkc21-3-4-0 ._5u9o252-3-4-0:empty::before {
+._1vlwkc21-3-5-0 ._5u9o252-3-5-0:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-4-0 ._5u9o252-3-4-0:empty::before {
+._1vlwkc22-3-5-0 ._5u9o252-3-5-0:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-4-0._1vlwkc21-3-4-0 ._5u9o252-3-4-0:empty::before {
+._1vlwkc22-3-5-0._1vlwkc21-3-5-0 ._5u9o252-3-5-0:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._5u9o252-3-4-0::selection {
-  color: var(--_1i883gj5-3-4-0);
-  background-color: var(--_1i883gj6-3-4-0);
+._5u9o252-3-5-0::selection {
+  color: var(--_1i883gj5-3-5-0);
+  background-color: var(--_1i883gj6-3-5-0);
 }

package/esm/forms/date-time-range-picker/DateTimeInput.sty.js

@@ -5,9 +5,9 @@ import "../spin-buttons/SpinButton.css";
 import "../date-time-picker/DateTimePicker.css";
 import "./DateTimeRangePicker.css";
 import "./DateTimeInput.css";
-var dateTimeInput = "_5u9o251-3-4-0";
-var dateTimeInputRoot = "_5u9o250-3-4-0";
-var expression = "_5u9o252-3-4-0";
+var dateTimeInput = "_5u9o251-3-5-0";
+var dateTimeInputRoot = "_5u9o250-3-5-0";
+var expression = "_5u9o252-3-5-0";
 export {
   dateTimeInput,
   dateTimeInputRoot,

package/esm/forms/date-time-range-picker/DateTimeInput.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeInput.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var dateTimeInput = '_5u9o251-3-4-0';\nexport var dateTimeInputRoot = '_5u9o250-3-4-0';\nexport var expression = '_5u9o252-3-4-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var dateTimeInput = '_5u9o251-3-5-0';\nexport var dateTimeInputRoot = '_5u9o250-3-5-0';\nexport var expression = '_5u9o252-3-5-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,oBAAoB;AACxB,IAAI,aAAa;",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeRangePicker.css

@@ -1,39 +1,49 @@
-._1vlwkc20-3-4-0 {
+._1vlwkc20-3-5-0 {
   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);
   transition-property: color, background-color, transform;
   padding-inline: var(--dt-spacings-size-12, 12px);
   padding-block: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
+  box-shadow: var(--_bx32h4-3-5-0);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-4-0);
-  background: var(--_bx32h3-3-4-0);
+  color: var(--_bx32h0-3-5-0);
+  background: var(--_bx32h3-3-5-0);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-4-0._1vlwkc20-3-4-0 {
+._1vlwkc20-3-5-0._1vlwkc20-3-5-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-4-0:has(._1i883gjh-3-4-0) {
+._1vlwkc20-3-5-0:has(._1i883gjh-3-5-0) {
   padding-inline-end: var(--dt-spacings-size-32, 32px);
 }
-._1vlwkc20-3-4-0:has(._1i883gjh-3-4-0:hover) {
-  --_bx32h3-3-4-0: var(--_bx32h2-3-4-0);
+._1vlwkc20-3-5-0:has(._1i883gjh-3-5-0:hover) {
+  --_bx32h3-3-5-0: var(--_bx32h2-3-5-0);
 }
-._1vlwkc20-3-4-0:has(._1i883gjh-3-4-0:focus-visible) {
-  box-shadow: none;
+._1vlwkc20-3-5-0:has(._1i883gjh-3-5-0:focus-visible) {
+  box-shadow: var(--_bx32h4-3-5-0, none);
 }
-._1vlwkc22-3-4-0 {
+._1jgl8s50-3-5-0 ._1vlwkc20-3-5-0, ._1jgl8s50-3-5-0 ._1vlwkc20-3-5-0:hover, ._1jgl8s50-3-5-0 ._1vlwkc20-3-5-0:active {
+  --_bx32h3-3-5-0: var(--dt-colors-background-surface-default, #fff);
+}
+._1vlwkc22-3-5-0 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-4-0 {
-  background: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-5-0 {
+  --_bx32h3-3-5-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+}
+._1jgl8s50-3-5-0 ._1vlwkc23-3-5-0, ._1jgl8s50-3-5-0 ._1vlwkc23-3-5-0:hover, ._1jgl8s50-3-5-0 ._1vlwkc23-3-5-0:active {
+  --_bx32h4-3-5-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+}
+._1vlwkc24-3-5-0 {
+  --_bx32h3-3-5-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1vlwkc24-3-4-0 {
-  background: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._1jgl8s50-3-5-0 ._1vlwkc24-3-5-0, ._1jgl8s50-3-5-0 ._1vlwkc24-3-5-0:hover, ._1jgl8s50-3-5-0 ._1vlwkc24-3-5-0:active {
+  --_bx32h4-3-5-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc25-3-4-0 {
+._1vlwkc25-3-5-0 {
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
@@ -41,19 +51,19 @@
   overflow-y: hidden;
   scrollbar-width: none;
 }
-._1vlwkc25-3-4-0._1vlwkc25-3-4-0 {
+._1vlwkc25-3-5-0._1vlwkc25-3-5-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-4-0::-webkit-scrollbar {
+._1vlwkc25-3-5-0::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-4-0._1vlwkc26-3-4-0 {
+._1vlwkc26-3-5-0._1vlwkc26-3-5-0 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-4-0 {
+._1vlwkc27-3-5-0 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-4-0::selection {
+._1vlwkc27-3-5-0::selection {
   background: transparent;
 }

package/esm/forms/date-time-range-picker/DateTimeRangePicker.js

@@ -20,6 +20,9 @@ import { validate } from "../../core/time/validation.js";
 import { getTimeOffsetFromInitialValue } from "../calendar/utils/helpers.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
+import {
+  FormFieldMessagesAction
+} from "../forms-core/state/formfield-messages-state-reducer.js";
 import {
   GRAIL_MAX_DATE,
   GRAIL_MIN_DATE
@@ -102,6 +105,7 @@ const DateTimeRangePicker = forwardRef(
     readOnly: propReadOnly,
     id: propId,
     "aria-disabled": propAriaDisabled,
+    onBlur,
     ...remainingProps
   }, forwardedRef) => {
     const [isControlled] = useState(propValue !== void 0);
@@ -216,7 +220,16 @@ const DateTimeRangePicker = forwardRef(
         "aria-disabled": ariaDisabled,
         disabled,
         required,
-        readOnly
+        readOnly,
+        onBlur: (event) => {
+          onBlur?.(event);
+          if (!event.target.contains(document.activeElement)) {
+            formFieldMessagesDispatch?.({
+              type: FormFieldMessagesAction.SETISTOUCHED,
+              payload: { isTouched: true }
+            });
+          }
+        }
       }
     ) });
   }

package/esm/forms/date-time-range-picker/DateTimeRangePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.tsx"],
-  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimeRangePickerRoot } from './DateTimeRangePickerRoot.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isFullTimeframe } from '../../core/time/helpers.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimeRangePickerActions } from '../../core/time/timeframeStore/actions/dateTimeRangePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../../core/time/timeframeStore/dateTimeRangePicker.types.js';\nimport { DateTimeRangePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type TimeValue } from '../../core/types/time.js';\nimport { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport type { FormFieldMessagesReducerAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../forms-core/time/timeParser.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\n\ntype DateTimeRangePickerStore = StoreApi<\n  DateTimeRangePickerTimeframeStates & DateTimeRangePickerTimeframeStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: DateTimeRangePickerStore,\n  memoedValue: {\n    from: TimeValue | null;\n    to: TimeValue | null;\n  } | null,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimeRangePickerRef: RefObject<DateTimeRangePickerRef>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          formerError: state.calendarError,\n          ref: dateTimeRangePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'dateTimePicker',\n          required: state.required,\n        });\n\n        const valueWithPrecision = removePrecisionFromTimeFrame(\n          memoedValue,\n          state.precision,\n        );\n        const value = isFullTimeframe(valueWithPrecision)\n          ? valueWithPrecision\n          : null;\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'range',\n          state.min,\n          state.max,\n          precision,\n        );\n\n        return {\n          ...state,\n          dateTimeRangePickerTimeframe: value,\n          calendarValue: value,\n          calendarError: error,\n          dateTimeRangePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    precision,\n    dateTimeRangePickerRef,\n  ]);\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const valueWithPrecision = removePrecisionFromTimeFrame(\n        state.dateTimeRangePickerTimeframe,\n        precision,\n      );\n      const value = isFullTimeframe(valueWithPrecision)\n        ? valueWithPrecision\n        : null;\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        dateTimeRangePickerTimeframe: value,\n        calendarValue: value,\n        required,\n      };\n    });\n  }, [precision, formatString, store, required]);\n}\n\n/**\n * Component to comfortably enter a timeframe in localized format for expressions.\n * @internal\n */\nexport const DateTimeRangePicker = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n\n    const { dispatch: formFieldMessagesDispatch } =\n      useFormFieldMessagesContext();\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const { disabled, required, id, ariaDisabled, readOnly } =\n      useSyncedFormControlProps({\n        propDisabled,\n        propRequired,\n        propId,\n        propAriaDisabled,\n        propReadOnly,\n      });\n\n    const [initialState] = useState<DateTimeRangePickerTimeframeStates>(() => {\n      const _value = isControlled ? memoedValue : memoedDefaultValue;\n      const value = isFullTimeframe(_value) ? _value : null;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimeRangePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'dateTimePicker',\n        required,\n      });\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        min,\n        max,\n        precision,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        timeOffset,\n        formatString,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimeRangePickerTimeframeStates,\n        DateTimeRangePickerTimeframeStoreActions\n      >(\n        initialState,\n        getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimeRangePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimeRangePickerTimeframeStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimeRangePickerTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimeRangePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'dateTimePicker',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimeRangePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<DateTimeRangePickerRef>([\n      dateTimeRangePickerRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <DateTimeRangePickerStoreProvider store={store}>\n        <DateTimeRangePickerRoot\n          {...remainingProps}\n          id={id}\n          ref={mergedRef}\n          aria-disabled={ariaDisabled}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n        />\n      </DateTimeRangePickerStoreProvider>\n    );\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimeRangePickerRoot } from './DateTimeRangePickerRoot.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isFullTimeframe } from '../../core/time/helpers.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimeRangePickerActions } from '../../core/time/timeframeStore/actions/dateTimeRangePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../../core/time/timeframeStore/dateTimeRangePicker.types.js';\nimport { DateTimeRangePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type TimeValue } from '../../core/types/time.js';\nimport { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../forms-core/time/timeParser.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\n\ntype DateTimeRangePickerStore = StoreApi<\n  DateTimeRangePickerTimeframeStates & DateTimeRangePickerTimeframeStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: DateTimeRangePickerStore,\n  memoedValue: {\n    from: TimeValue | null;\n    to: TimeValue | null;\n  } | null,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimeRangePickerRef: RefObject<DateTimeRangePickerRef>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          formerError: state.calendarError,\n          ref: dateTimeRangePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'dateTimePicker',\n          required: state.required,\n        });\n\n        const valueWithPrecision = removePrecisionFromTimeFrame(\n          memoedValue,\n          state.precision,\n        );\n        const value = isFullTimeframe(valueWithPrecision)\n          ? valueWithPrecision\n          : null;\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'range',\n          state.min,\n          state.max,\n          precision,\n        );\n\n        return {\n          ...state,\n          dateTimeRangePickerTimeframe: value,\n          calendarValue: value,\n          calendarError: error,\n          dateTimeRangePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    precision,\n    dateTimeRangePickerRef,\n  ]);\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const valueWithPrecision = removePrecisionFromTimeFrame(\n        state.dateTimeRangePickerTimeframe,\n        precision,\n      );\n      const value = isFullTimeframe(valueWithPrecision)\n        ? valueWithPrecision\n        : null;\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        dateTimeRangePickerTimeframe: value,\n        calendarValue: value,\n        required,\n      };\n    });\n  }, [precision, formatString, store, required]);\n}\n\n/**\n * Component to comfortably enter a timeframe in localized format for expressions.\n * @internal\n */\nexport const DateTimeRangePicker = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      onBlur,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n\n    const { dispatch: formFieldMessagesDispatch } =\n      useFormFieldMessagesContext();\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const { disabled, required, id, ariaDisabled, readOnly } =\n      useSyncedFormControlProps({\n        propDisabled,\n        propRequired,\n        propId,\n        propAriaDisabled,\n        propReadOnly,\n      });\n\n    const [initialState] = useState<DateTimeRangePickerTimeframeStates>(() => {\n      const _value = isControlled ? memoedValue : memoedDefaultValue;\n      const value = isFullTimeframe(_value) ? _value : null;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimeRangePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'dateTimePicker',\n        required,\n      });\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        min,\n        max,\n        precision,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        timeOffset,\n        formatString,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimeRangePickerTimeframeStates,\n        DateTimeRangePickerTimeframeStoreActions\n      >(\n        initialState,\n        getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimeRangePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimeRangePickerTimeframeStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimeRangePickerTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimeRangePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'dateTimePicker',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimeRangePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<DateTimeRangePickerRef>([\n      dateTimeRangePickerRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <DateTimeRangePickerStoreProvider store={store}>\n        <DateTimeRangePickerRoot\n          {...remainingProps}\n          id={id}\n          ref={mergedRef}\n          aria-disabled={ariaDisabled}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          onBlur={(event) => {\n            onBlur?.(event);\n\n            if (!event.target.contains(document.activeElement)) {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n            }\n          }}\n        />\n      </DateTimeRangePickerStoreProvider>\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": ["min", "max"]
 }

package/esm/forms/date-time-range-picker/DateTimeRangePicker.sty.js

@@ -5,10 +5,10 @@ import "../spin-buttons/SpinButton.css";
 import "../date-time-picker/DateTimePicker.css";
 import "./DateTimeRangePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dateTimeInput = "_1vlwkc26-3-4-0";
-var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-4-0", variantClassNames: { showError: { true: "_1vlwkc21-3-4-0" }, disabled: { true: "_1vlwkc22-3-4-0" }, readOnly: { true: "_1vlwkc23-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-4-0"]] });
-var scrollContainer = "_1vlwkc25-3-4-0";
-var timeframeSeparator = "_1vlwkc27-3-4-0";
+var dateTimeInput = "_1vlwkc26-3-5-0";
+var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-5-0", variantClassNames: { showError: { true: "_1vlwkc21-3-5-0" }, disabled: { true: "_1vlwkc22-3-5-0" }, readOnly: { true: "_1vlwkc23-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-5-0"]] });
+var scrollContainer = "_1vlwkc25-3-5-0";
+var timeframeSeparator = "_1vlwkc27-3-5-0";
 export {
   dateTimeInput,
   dateTimeRange,

package/esm/forms/date-time-range-picker/DateTimeRangePicker.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeInput = '_1vlwkc26-3-4-0';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-4-0',variantClassNames:{showError:{true:'_1vlwkc21-3-4-0'},disabled:{true:'_1vlwkc22-3-4-0'},readOnly:{true:'_1vlwkc23-3-4-0'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-4-0']]});\nexport var scrollContainer = '_1vlwkc25-3-4-0';\nexport var timeframeSeparator = '_1vlwkc27-3-4-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeInput = '_1vlwkc26-3-5-0';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-5-0',variantClassNames:{showError:{true:'_1vlwkc21-3-5-0'},disabled:{true:'_1vlwkc22-3-5-0'},readOnly:{true:'_1vlwkc23-3-5-0'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-5-0']]});\nexport var scrollContainer = '_1vlwkc25-3-5-0';\nexport var timeframeSeparator = '_1vlwkc27-3-5-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB;AACpB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACnR,IAAI,kBAAkB;AACtB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeRangePickerRoot.js

@@ -88,6 +88,7 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
     "data-dtrum-allow": dataDtrumAllow,
     "aria-disabled": ariaDisabledProp,
     placeholder: placeholderProp,
+    onBlur,
     ...remainingProps
   } = props;
   const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
@@ -366,14 +367,9 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
             ),
             onCopyCapture: onTimeframeCopyCapture,
             onPasteCapture,
-            onBlur: () => {
+            onBlur: (event) => {
               requestAnimationFrame(() => {
-                if (!touchedContainerRef.current?.contains(document.activeElement)) {
-                  formMessageDispatch?.({
-                    type: FormFieldMessagesAction.SETISTOUCHED,
-                    payload: { isTouched: true }
-                  });
-                }
+                onBlur?.(event);
               });
             },
             onInput: () => {