@pega/cosmos-react-core 10.0.0-build.9.3 → 10.0.0-build.9.5

package/lib/components/AppShell/TouchAppShell.styles.js

@@ -43,8 +43,9 @@ export const StyledSplitViewPanel = styled.div(({ active, theme }) => {
   `;
 });
 StyledSplitViewPanel.defaultProps = defaultThemeProp;
-export const StyledPortalTouchDialog = styled(TouchDialog)(() => css `
+export const StyledPortalTouchDialog = styled(TouchDialog)(({ theme }) => css `
     && {
+      background: ${theme.components.agent.background};
       pointer-events: auto;
       inset-inline: 0;
       inset-block-end: var(--appshell-hard-bottom-offset, 0);

package/lib/components/AppShell/TouchAppShell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TouchAppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/TouchAppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { createGlobalStyle, css, type DefaultTheme } from 'styled-components';\nimport { rem, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport { StyledAlert } from '../Badges/Alert';\nimport { StyledLink } from '../Link/Link';\nimport { StyledBareButton } from '../Button/BareButton';\nimport Button from '../Button';\nimport { StyledDrawer } from '../Drawer';\nimport { TouchDialog } from '../Dialog';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { useDirection } from '../../hooks';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  menuButtonWidth,\n  mobileHeaderHeight,\n  StyledCountIcon,\n  StyledNavItemIconBox,\n  StyledNavList,\n  StyledNavListItem,\n  StyledNavListItemVisualContainer,\n  StyledAppNav\n} from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const TouchAppShellGlobalStyle = createGlobalStyle<{\n  hasBottomTouchPanel?: boolean;\n  isMobileNav?: boolean;\n  theme?: DefaultTheme;\n}>`\n  :root,\n  :host {\n    --appshell-bottom-panel-offset: ${({ hasBottomTouchPanel }) =>\n      hasBottomTouchPanel ? '4rem' : '0rem'};\n    --appshell-bottom-panel-gap: ${({ hasBottomTouchPanel, theme }) =>\n      hasBottomTouchPanel ? `calc(2 * ${theme?.base.spacing})` : '0rem'};\n    --appshell-bottom-offset: ${({ hasBottomTouchPanel, isMobileNav }) =>\n      `calc(var(--appshell-hard-bottom-offset) + ${isMobileNav ? mobileHeaderHeight : '0rem'}${\n        hasBottomTouchPanel ? ' + var(--appshell-bottom-panel-offset)' : ''\n      })`};\n  }\n`;\n\nexport const StyledMainTouchAppShell = styled.div<{ active?: boolean }>(\n  ({ active, theme }) => css`\n    ${active &&\n    css`\n      background: ${theme.base.colors.black};\n    `}\n  `\n);\n\nStyledMainTouchAppShell.defaultProps = defaultThemeProp;\n\nexport const StyledSplitViewPanel = styled.div<{ active?: boolean }>(({ active, theme }) => {\n  const splitViewHeight = active\n    ? 'calc(var(--appshell-bottom-panel-offset, 0rem) + var(--appshell-bottom-panel-gap, 0rem))'\n    : '0rem';\n\n  return css`\n    position: fixed;\n    inset-block-end: var(--appshell-hard-bottom-offset, 0);\n    inset-inline: 0;\n    height: ${splitViewHeight};\n    background: ${theme.base.colors.black};\n  `;\n});\n\nStyledSplitViewPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPortalTouchDialog = styled(TouchDialog)(\n  () => css`\n    && {\n      pointer-events: auto;\n      inset-inline: 0;\n      inset-block-end: var(--appshell-hard-bottom-offset, 0);\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  `\n);\n\nStyledPortalTouchDialog.defaultProps = defaultThemeProp;\n\nexport const StyledMobileMoreMenu = styled(StyledAppNav)`\n  width: 100%;\n  height: 100%;\n\n  /* Reserve top space for the app header + top nav, but NOT the document\n     tabs strip - the mobile menu drawer covers content above the tab strip\n     too. */\n  padding-block-start: calc(var(--appshell-top-offset, 0rem) - var(--document-tabs-height, 0rem));\n  padding-block-end: var(--appshell-bottom-offset, ${mobileHeaderHeight});\n`;\n\nStyledMobileMoreMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled(Flex)<{ hasBottomTouchPanel?: boolean }>(({\n  theme,\n  hasBottomTouchPanel\n}) => {\n  const { rtl } = useDirection();\n  const {\n    base: {\n      'hit-area': { 'finger-min': hitAreaFinger },\n      'border-radius': borderRadius,\n      'font-size': fontSize,\n      'font-scale': fontScale\n    },\n    components: {\n      button: { 'focus-shadow': focusShadow, 'border-width': borderWidth },\n      text\n    }\n  } = theme;\n  const mobileNavColor = theme.components['app-shell'].nav.background;\n  const { foreground } = navContrastColors(theme);\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    z-index: calc(${theme.base['z-index'].drawer} + 1);\n    background: ${mobileNavColor};\n    border-radius: calc(2 * ${borderRadius});\n    color: ${foreground};\n    padding: 0.5rem;\n    position: fixed;\n    --mobile-nav-offset: ${hasBottomTouchPanel ? '0rem' : '0.75rem'};\n    inset-block-start: calc(\n      100dvh - var(--appshell-bottom-offset, ${mobileHeaderHeight}) + var(--mobile-nav-offset)\n    );\n    inset-inline-start: 50%;\n    transform: translateX(${rtl ? '50%' : '-50%'});\n    box-shadow: ${theme.base.shadow.low};\n\n    & + ${StyledDrawer} ${StyledDrawer} {\n      width: 100%;\n    }\n\n    > div:has(> ${StyledNavList}),\n    > div:has(> ${StyledNavList}) > ${StyledNavList}, > ${StyledNavList} {\n      display: contents;\n\n      ${StyledNavListItem} {\n        padding: 0;\n        margin: 0;\n        font-size: ${fontSizes[text.secondary['font-size'] as FontSize]};\n\n        ${StyledBareButton}, ${StyledLink} {\n          flex-direction: column;\n          justify-content: center;\n          width: ${rem(menuButtonWidth(theme))};\n          height: calc(0.25rem + ${hitAreaFinger});\n          border-radius: calc(2 * ${borderRadius});\n          border: ${borderWidth} solid transparent;\n          padding-block: calc(0.5 * ${theme.base.spacing});\n\n          &::before {\n            width: 0;\n          }\n\n          span:not(${StyledCountIcon}) {\n            width: inherit;\n            text-align: center;\n            padding-inline: calc(0.5 * ${theme.base.spacing});\n          }\n\n          &:enabled:focus-visible,\n          &:not([disabled]):focus-visible {\n            box-shadow: ${focusShadow};\n          }\n\n          ${StyledNavListItemVisualContainer} {\n            padding: 0;\n            margin: 0;\n\n            ${StyledNavItemIconBox} {\n              display: flex;\n            }\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileMoreMenuButton = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      'hit-area': { 'finger-min': hitAreaFinger },\n      'border-radius': borderRadius,\n      'font-size': fontSize,\n      'font-scale': fontScale\n    },\n    components: {\n      button: { 'border-width': borderWidth },\n      text\n    }\n  } = theme;\n  const { navOpen } = useContext(AppShellContext);\n  const { foreground } = navContrastColors(theme);\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    flex-direction: column;\n    width: ${rem(menuButtonWidth(theme))};\n    height: calc(0.25rem + ${hitAreaFinger});\n    border-radius: calc(2 * ${borderRadius});\n    font-size: ${fontSizes[text.secondary['font-size'] as FontSize]};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n\n    span {\n      width: inherit;\n      padding-inline: calc(0.5 * ${theme.base.spacing});\n      ${ellipsisOverflow}\n    }\n\n    ${navOpen &&\n    css`\n      &::before {\n        content: '';\n        position: absolute;\n        inset: calc(${borderWidth} * -1);\n        border-radius: inherit;\n        background: ${transparentize(0.85, foreground)};\n      }\n    `}\n\n    ${StyledAlert} {\n      position: absolute;\n      inset-block-start: calc(0.625rem / 2);\n      inset-inline-start: calc(50% + (0.625rem / 2));\n    }\n  `;\n});\n\nStyledMobileMoreMenuButton.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"TouchAppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/TouchAppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { createGlobalStyle, css, type DefaultTheme } from 'styled-components';\nimport { rem, transparentize } from 'polished';\nimport { useContext } from 'react';\n\nimport { StyledAlert } from '../Badges/Alert';\nimport { StyledLink } from '../Link/Link';\nimport { StyledBareButton } from '../Button/BareButton';\nimport Button from '../Button';\nimport { StyledDrawer } from '../Drawer';\nimport { TouchDialog } from '../Dialog';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { useDirection } from '../../hooks';\n\nimport AppShellContext from './AppShellContext';\nimport {\n  menuButtonWidth,\n  mobileHeaderHeight,\n  StyledCountIcon,\n  StyledNavItemIconBox,\n  StyledNavList,\n  StyledNavListItem,\n  StyledNavListItemVisualContainer,\n  StyledAppNav\n} from './AppShell.styles';\nimport { navContrastColors } from './style-utils';\n\nexport const TouchAppShellGlobalStyle = createGlobalStyle<{\n  hasBottomTouchPanel?: boolean;\n  isMobileNav?: boolean;\n  theme?: DefaultTheme;\n}>`\n  :root,\n  :host {\n    --appshell-bottom-panel-offset: ${({ hasBottomTouchPanel }) =>\n      hasBottomTouchPanel ? '4rem' : '0rem'};\n    --appshell-bottom-panel-gap: ${({ hasBottomTouchPanel, theme }) =>\n      hasBottomTouchPanel ? `calc(2 * ${theme?.base.spacing})` : '0rem'};\n    --appshell-bottom-offset: ${({ hasBottomTouchPanel, isMobileNav }) =>\n      `calc(var(--appshell-hard-bottom-offset) + ${isMobileNav ? mobileHeaderHeight : '0rem'}${\n        hasBottomTouchPanel ? ' + var(--appshell-bottom-panel-offset)' : ''\n      })`};\n  }\n`;\n\nexport const StyledMainTouchAppShell = styled.div<{ active?: boolean }>(\n  ({ active, theme }) => css`\n    ${active &&\n    css`\n      background: ${theme.base.colors.black};\n    `}\n  `\n);\n\nStyledMainTouchAppShell.defaultProps = defaultThemeProp;\n\nexport const StyledSplitViewPanel = styled.div<{ active?: boolean }>(({ active, theme }) => {\n  const splitViewHeight = active\n    ? 'calc(var(--appshell-bottom-panel-offset, 0rem) + var(--appshell-bottom-panel-gap, 0rem))'\n    : '0rem';\n\n  return css`\n    position: fixed;\n    inset-block-end: var(--appshell-hard-bottom-offset, 0);\n    inset-inline: 0;\n    height: ${splitViewHeight};\n    background: ${theme.base.colors.black};\n  `;\n});\n\nStyledSplitViewPanel.defaultProps = defaultThemeProp;\n\nexport const StyledPortalTouchDialog = styled(TouchDialog)(\n  ({ theme }) => css`\n    && {\n      background: ${theme.components.agent.background};\n      pointer-events: auto;\n      inset-inline: 0;\n      inset-block-end: var(--appshell-hard-bottom-offset, 0);\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  `\n);\n\nStyledPortalTouchDialog.defaultProps = defaultThemeProp;\n\nexport const StyledMobileMoreMenu = styled(StyledAppNav)`\n  width: 100%;\n  height: 100%;\n\n  /* Reserve top space for the app header + top nav, but NOT the document\n     tabs strip - the mobile menu drawer covers content above the tab strip\n     too. */\n  padding-block-start: calc(var(--appshell-top-offset, 0rem) - var(--document-tabs-height, 0rem));\n  padding-block-end: var(--appshell-bottom-offset, ${mobileHeaderHeight});\n`;\n\nStyledMobileMoreMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMobileNav = styled(Flex)<{ hasBottomTouchPanel?: boolean }>(({\n  theme,\n  hasBottomTouchPanel\n}) => {\n  const { rtl } = useDirection();\n  const {\n    base: {\n      'hit-area': { 'finger-min': hitAreaFinger },\n      'border-radius': borderRadius,\n      'font-size': fontSize,\n      'font-scale': fontScale\n    },\n    components: {\n      button: { 'focus-shadow': focusShadow, 'border-width': borderWidth },\n      text\n    }\n  } = theme;\n  const mobileNavColor = theme.components['app-shell'].nav.background;\n  const { foreground } = navContrastColors(theme);\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    z-index: calc(${theme.base['z-index'].drawer} + 1);\n    background: ${mobileNavColor};\n    border-radius: calc(2 * ${borderRadius});\n    color: ${foreground};\n    padding: 0.5rem;\n    position: fixed;\n    --mobile-nav-offset: ${hasBottomTouchPanel ? '0rem' : '0.75rem'};\n    inset-block-start: calc(\n      100dvh - var(--appshell-bottom-offset, ${mobileHeaderHeight}) + var(--mobile-nav-offset)\n    );\n    inset-inline-start: 50%;\n    transform: translateX(${rtl ? '50%' : '-50%'});\n    box-shadow: ${theme.base.shadow.low};\n\n    & + ${StyledDrawer} ${StyledDrawer} {\n      width: 100%;\n    }\n\n    > div:has(> ${StyledNavList}),\n    > div:has(> ${StyledNavList}) > ${StyledNavList}, > ${StyledNavList} {\n      display: contents;\n\n      ${StyledNavListItem} {\n        padding: 0;\n        margin: 0;\n        font-size: ${fontSizes[text.secondary['font-size'] as FontSize]};\n\n        ${StyledBareButton}, ${StyledLink} {\n          flex-direction: column;\n          justify-content: center;\n          width: ${rem(menuButtonWidth(theme))};\n          height: calc(0.25rem + ${hitAreaFinger});\n          border-radius: calc(2 * ${borderRadius});\n          border: ${borderWidth} solid transparent;\n          padding-block: calc(0.5 * ${theme.base.spacing});\n\n          &::before {\n            width: 0;\n          }\n\n          span:not(${StyledCountIcon}) {\n            width: inherit;\n            text-align: center;\n            padding-inline: calc(0.5 * ${theme.base.spacing});\n          }\n\n          &:enabled:focus-visible,\n          &:not([disabled]):focus-visible {\n            box-shadow: ${focusShadow};\n          }\n\n          ${StyledNavListItemVisualContainer} {\n            padding: 0;\n            margin: 0;\n\n            ${StyledNavItemIconBox} {\n              display: flex;\n            }\n          }\n        }\n      }\n    }\n  `;\n});\n\nStyledMobileNav.defaultProps = defaultThemeProp;\n\nexport const StyledMobileMoreMenuButton = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      'hit-area': { 'finger-min': hitAreaFinger },\n      'border-radius': borderRadius,\n      'font-size': fontSize,\n      'font-scale': fontScale\n    },\n    components: {\n      button: { 'border-width': borderWidth },\n      text\n    }\n  } = theme;\n  const { navOpen } = useContext(AppShellContext);\n  const { foreground } = navContrastColors(theme);\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    flex-direction: column;\n    width: ${rem(menuButtonWidth(theme))};\n    height: calc(0.25rem + ${hitAreaFinger});\n    border-radius: calc(2 * ${borderRadius});\n    font-size: ${fontSizes[text.secondary['font-size'] as FontSize]};\n    padding-block: calc(0.5 * ${theme.base.spacing});\n\n    span {\n      width: inherit;\n      padding-inline: calc(0.5 * ${theme.base.spacing});\n      ${ellipsisOverflow}\n    }\n\n    ${navOpen &&\n    css`\n      &::before {\n        content: '';\n        position: absolute;\n        inset: calc(${borderWidth} * -1);\n        border-radius: inherit;\n        background: ${transparentize(0.85, foreground)};\n      }\n    `}\n\n    ${StyledAlert} {\n      position: absolute;\n      inset-block-start: calc(0.625rem / 2);\n      inset-inline-start: calc(50% + (0.625rem / 2));\n    }\n  `;\n});\n\nStyledMobileMoreMenuButton.defaultProps = defaultThemeProp;\n"]}

package/lib/components/DateTime/DateTime.types.d.ts

@@ -29,7 +29,7 @@ export interface DateTimeProperties extends TestIdProp, BaseProps {
     /** Automatically focuses the input on render. */
     autoFocus?: boolean;
     /**
-     * IANA time zone string (e.g. "America/New_York").
+     * IANA time zone identifier (e.g. "America/New_York", "Europe/Paris").
      * When provided, today-highlight and the "Set today" / "Set now" button use
      * the provided time zone instead of the browser's local time zone.
      */

package/lib/components/DateTime/DateTime.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.types.js","sourceRoot":"","sources":["../../../src/components/DateTime/DateTime.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BaseProps, NoChildrenProp, TestIdProp } from '../../types';\nimport type { FormControlProps } from '../FormControl';\n\nexport interface DateTimeProperties extends TestIdProp, BaseProps {\n  /** Date as ISO8601 string, timestamp or native Date object. Defines minimum available value that can be set by the user. */\n  min?: string | number | Date;\n  /** Date as ISO8601 string, timestamp or native Date object. Defines maximum available value that can be set by the user. */\n  max?: string | number | Date;\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n  /**\n   * IANA time zone string (e.g. \"America/New_York\").\n   * When provided, today-highlight and the \"Set today\" / \"Set now\" button use\n   * the provided time zone instead of the browser's local time zone.\n   */\n  timeZone?: string;\n}\n\nexport type DateTimeValueErrorState = 'incomplete' | 'invalid';\n\nexport type DateTimeCallbackParameter = {\n  valueAsISOString: string | undefined;\n  valueAsTimestamp: number | undefined;\n  state?: DateTimeValueErrorState;\n};\n\nexport interface DateTimeCallbacks extends Pick<FormControlProps, 'suggestion'> {\n  /** Callback fired when input value changes. */\n  onChange?: (value: DateTimeCallbackParameter) => void;\n  /** Callback fired when the component gets focused. */\n  onFocus?: (value: DateTimeCallbackParameter) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: DateTimeCallbackParameter) => void;\n}\n\nexport default interface DateTimeProps\n  extends DateTimeProperties,\n    DateTimeCallbacks,\n    NoChildrenProp {\n  /**\n   * Date as ISO8601 string, timestamp or native Date object.\n   * Requires onChange prop to update value for controlled inputs.\n   */\n  value?: string | number | Date;\n}\n\nexport type DateRangeCallbackParameter = {\n  start: DateTimeCallbackParameter;\n  end: DateTimeCallbackParameter;\n};\n\nexport type AbsoluteVariant =\n  | 'date'\n  | 'datetime'\n  | 'time'\n  | 'week'\n  | 'month'\n  | 'year'\n  | 'monthyear'\n  | 'quarteryear';\nexport type DateTimeVariant = AbsoluteVariant | 'relative';\nexport type DateTimeFormat = 'short' | 'medium' | 'long' | 'numeric' | 'long-numeric';\n"]}
+{"version":3,"file":"DateTime.types.js","sourceRoot":"","sources":["../../../src/components/DateTime/DateTime.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BaseProps, NoChildrenProp, TestIdProp } from '../../types';\nimport type { FormControlProps } from '../FormControl';\n\nexport interface DateTimeProperties extends TestIdProp, BaseProps {\n  /** Date as ISO8601 string, timestamp or native Date object. Defines minimum available value that can be set by the user. */\n  min?: string | number | Date;\n  /** Date as ISO8601 string, timestamp or native Date object. Defines maximum available value that can be set by the user. */\n  max?: string | number | Date;\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n  /**\n   * IANA time zone identifier (e.g. \"America/New_York\", \"Europe/Paris\").\n   * When provided, today-highlight and the \"Set today\" / \"Set now\" button use\n   * the provided time zone instead of the browser's local time zone.\n   */\n  timeZone?: string;\n}\n\nexport type DateTimeValueErrorState = 'incomplete' | 'invalid';\n\nexport type DateTimeCallbackParameter = {\n  valueAsISOString: string | undefined;\n  valueAsTimestamp: number | undefined;\n  state?: DateTimeValueErrorState;\n};\n\nexport interface DateTimeCallbacks extends Pick<FormControlProps, 'suggestion'> {\n  /** Callback fired when input value changes. */\n  onChange?: (value: DateTimeCallbackParameter) => void;\n  /** Callback fired when the component gets focused. */\n  onFocus?: (value: DateTimeCallbackParameter) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: DateTimeCallbackParameter) => void;\n}\n\nexport default interface DateTimeProps\n  extends DateTimeProperties,\n    DateTimeCallbacks,\n    NoChildrenProp {\n  /**\n   * Date as ISO8601 string, timestamp or native Date object.\n   * Requires onChange prop to update value for controlled inputs.\n   */\n  value?: string | number | Date;\n}\n\nexport type DateRangeCallbackParameter = {\n  start: DateTimeCallbackParameter;\n  end: DateTimeCallbackParameter;\n};\n\nexport type AbsoluteVariant =\n  | 'date'\n  | 'datetime'\n  | 'time'\n  | 'week'\n  | 'month'\n  | 'year'\n  | 'monthyear'\n  | 'quarteryear';\nexport type DateTimeVariant = AbsoluteVariant | 'relative';\nexport type DateTimeFormat = 'short' | 'medium' | 'long' | 'numeric' | 'long-numeric';\n"]}

package/lib/components/DateTime/DateTimeDisplay.d.ts

@@ -14,6 +14,13 @@ export interface DateTimeDisplayProps extends BaseProps {
     format?: DateTimeFormat;
     /** Defines clock format that overrides locale based format */
     clockFormat?: ClockFormat;
+    /**
+     * IANA timezone identifier (e.g. 'America/New_York', 'Europe/Paris').
+     * When provided all screens will render the value in this timezone regardless
+     * of the browser locale. When omitted the component defaults to UTC to
+     * preserve backwards compatibility with callers that pass pre-converted values.
+     */
+    timeZone?: string;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLTimeElement>;
 }

package/lib/components/DateTime/DateTimeDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimeDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAK9E,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAIjD,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,+DAA+D;IAC/D,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/B,kCAAkC;IAClC,OAAO,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,qBAAqB,mOAAgB,CAAC;AAEnD,QAAA,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CAqE1E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DateTimeDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimeDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAK9E,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAIjD,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,+DAA+D;IAC/D,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/B,kCAAkC;IAClC,OAAO,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,qBAAqB,mOAAgB,CAAC;AAEnD,QAAA,MAAM,eAAe,EAAE,+BAA+B,CAAC,oBAAoB,CAwE1E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DateTime/DateTimeDisplay.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { useConfiguration, useI18n } from '../../hooks';
 import NoValue from '../NoValue/NoValue';
 import cap from '../../utils/cap';
-import { parseToDate } from './Input/utils';
+import { getValidTimeZone, parseToDate } from './Input/utils';
 import { isValidDate } from './Picker/utils';
 import { formatDateTime } from './utils';
 export const StyledDateTimeDisplay = styled.time ``;
-const DateTimeDisplay = forwardRef(function DateTimeDisplay({ value, variant, format = 'medium', clockFormat, ...restProps }, ref) {
+const DateTimeDisplay = forwardRef(function DateTimeDisplay({ value, variant, format = 'medium', clockFormat, timeZone, ...restProps }, ref) {
     const { locale } = useConfiguration();
     const t = useI18n();
     const parsedDate = value || value === 0 ? parseToDate(value) : undefined;
     const hasValue = !!parsedDate && isValidDate(parsedDate);
+    const resolvedTimeZone = useMemo(() => getValidTimeZone(timeZone) ?? 'UTC', [timeZone]);
     const displayText = hasValue
         ? cap(formatDateTime(parsedDate, {
             t,
@@ -20,7 +21,7 @@ const DateTimeDisplay = forwardRef(function DateTimeDisplay({ value, variant, fo
             format,
             variant,
             clockFormat,
-            timeZone: 'UTC'
+            timeZone: resolvedTimeZone
         }))
         : undefined;
     // Abbreviated month names (e.g. "Oct") read phonetically to screen readers, so an
@@ -34,7 +35,7 @@ const DateTimeDisplay = forwardRef(function DateTimeDisplay({ value, variant, fo
             format,
             variant,
             clockFormat,
-            timeZone: 'UTC',
+            timeZone: resolvedTimeZone,
             abbreviated: false
         }))
         : displayText;

package/lib/components/DateTime/DateTimeDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeDisplay.js","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimeDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,GAAG,MAAM,iBAAiB,CAAC;AAGlC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAkBzC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAEnD,MAAM,eAAe,GAA0D,UAAU,CACvF,SAAS,eAAe,CACtB,EACE,KAAK,EACL,OAAO,EACP,MAAM,GAAG,QAAQ,EACjB,WAAW,EACX,GAAG,SAAS,EAC0B,EACxC,GAAgC;IAEhC,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,UAAU,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACzE,MAAM,QAAQ,GAAG,CAAC,CAAC,UAAU,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC;IAEzD,MAAM,WAAW,GAAG,QAAQ;QAC1B,CAAC,CAAC,GAAG,CACD,cAAc,CAAC,UAAU,EAAE;YACzB,CAAC;YACD,MAAM;YACN,MAAM;YACN,OAAO;YACP,WAAW;YACX,QAAQ,EAAE,KAAK;SAChB,CAAC,CACH;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,kFAAkF;IAClF,oFAAoF;IACpF,sFAAsF;IACtF,0EAA0E;IAC1E,MAAM,cAAc,GAClB,QAAQ,IAAI,MAAM,KAAK,QAAQ;QAC7B,CAAC,CAAC,GAAG,CACD,cAAc,CAAC,UAAU,EAAE;YACzB,CAAC;YACD,MAAM;YACN,MAAM;YACN,OAAO;YACP,WAAW;YACX,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;SACnB,CAAC,CACH;QACH,CAAC,CAAC,WAAW,CAAC;IAElB,IAAI,OAAO,GAAG,KAAC,OAAO,KAAG,CAAC;IAC1B,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO;YACL,WAAW,KAAK,cAAc,CAAC,CAAC,CAAC,CAC/B,6BAAkB,cAAc,YAAG,WAAW,GAAQ,CACvD,CAAC,CAAC,CAAC,CACF,4BAAG,WAAW,GAAI,CACnB,CAAC;IACN,CAAC;IAED,OAAO,CACL,KAAC,qBAAqB,IACpB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,KACrD,SAAS,YAEZ,OAAO,GACc,CACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '../../types';\nimport { useConfiguration, useI18n } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\nimport cap from '../../utils/cap';\n\nimport type { DateTimeFormat, DateTimeVariant } from './DateTime.types';\nimport { parseToDate } from './Input/utils';\nimport type { ClockFormat } from './Input/utils';\nimport { isValidDate } from './Picker/utils';\nimport { formatDateTime } from './utils';\n\nexport interface DateTimeDisplayProps extends BaseProps {\n  /** Date as ISO8601 string, timestamp or native Date object. */\n  value?: Date | string | number;\n  /** Controls date time variant. */\n  variant: DateTimeVariant;\n  /**\n   * Controls display format.\n   * @default 'medium'\n   */\n  format?: DateTimeFormat;\n  /** Defines clock format that overrides locale based format */\n  clockFormat?: ClockFormat;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTimeElement>;\n}\n\nexport const StyledDateTimeDisplay = styled.time``;\n\nconst DateTimeDisplay: ForwardRefForwardPropsComponent<DateTimeDisplayProps> = forwardRef(\n  function DateTimeDisplay(\n    {\n      value,\n      variant,\n      format = 'medium',\n      clockFormat,\n      ...restProps\n    }: PropsWithoutRef<DateTimeDisplayProps>,\n    ref: DateTimeDisplayProps['ref']\n  ) {\n    const { locale } = useConfiguration();\n    const t = useI18n();\n\n    const parsedDate = value || value === 0 ? parseToDate(value) : undefined;\n    const hasValue = !!parsedDate && isValidDate(parsedDate);\n\n    const displayText = hasValue\n      ? cap(\n          formatDateTime(parsedDate, {\n            t,\n            locale,\n            format,\n            variant,\n            clockFormat,\n            timeZone: 'UTC'\n          })\n        )\n      : undefined;\n\n    // Abbreviated month names (e.g. \"Oct\") read phonetically to screen readers, so an\n    // accessible, fully expanded label (e.g. \"October\") is exposed via aria-label while\n    // the visible, abbreviated text stays unchanged. Only 'medium' format ever renders an\n    // abbreviated month name, so other formats simply reuse the display text.\n    const accessibleText =\n      hasValue && format === 'medium'\n        ? cap(\n            formatDateTime(parsedDate, {\n              t,\n              locale,\n              format,\n              variant,\n              clockFormat,\n              timeZone: 'UTC',\n              abbreviated: false\n            })\n          )\n        : displayText;\n\n    let content = <NoValue />;\n    if (hasValue) {\n      content =\n        displayText !== accessibleText ? (\n          <abbr aria-label={accessibleText}>{displayText}</abbr>\n        ) : (\n          <>{displayText}</>\n        );\n    }\n\n    return (\n      <StyledDateTimeDisplay\n        ref={ref}\n        dateTime={hasValue ? parsedDate.toISOString() : undefined}\n        {...restProps}\n      >\n        {content}\n      </StyledDateTimeDisplay>\n    );\n  }\n);\n\nexport default DateTimeDisplay;\n"]}
+{"version":3,"file":"DateTimeDisplay.js","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimeDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,GAAG,MAAM,iBAAiB,CAAC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE9D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAyBzC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAEnD,MAAM,eAAe,GAA0D,UAAU,CACvF,SAAS,eAAe,CACtB,EACE,KAAK,EACL,OAAO,EACP,MAAM,GAAG,QAAQ,EACjB,WAAW,EACX,QAAQ,EACR,GAAG,SAAS,EAC0B,EACxC,GAAgC;IAEhC,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,UAAU,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACzE,MAAM,QAAQ,GAAG,CAAC,CAAC,UAAU,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC;IAEzD,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExF,MAAM,WAAW,GAAG,QAAQ;QAC1B,CAAC,CAAC,GAAG,CACD,cAAc,CAAC,UAAU,EAAE;YACzB,CAAC;YACD,MAAM;YACN,MAAM;YACN,OAAO;YACP,WAAW;YACX,QAAQ,EAAE,gBAAgB;SAC3B,CAAC,CACH;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,kFAAkF;IAClF,oFAAoF;IACpF,sFAAsF;IACtF,0EAA0E;IAC1E,MAAM,cAAc,GAClB,QAAQ,IAAI,MAAM,KAAK,QAAQ;QAC7B,CAAC,CAAC,GAAG,CACD,cAAc,CAAC,UAAU,EAAE;YACzB,CAAC;YACD,MAAM;YACN,MAAM;YACN,OAAO;YACP,WAAW;YACX,QAAQ,EAAE,gBAAgB;YAC1B,WAAW,EAAE,KAAK;SACnB,CAAC,CACH;QACH,CAAC,CAAC,WAAW,CAAC;IAElB,IAAI,OAAO,GAAG,KAAC,OAAO,KAAG,CAAC;IAC1B,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO;YACL,WAAW,KAAK,cAAc,CAAC,CAAC,CAAC,CAC/B,6BAAkB,cAAc,YAAG,WAAW,GAAQ,CACvD,CAAC,CAAC,CAAC,CACF,4BAAG,WAAW,GAAI,CACnB,CAAC;IACN,CAAC;IAED,OAAO,CACL,KAAC,qBAAqB,IACpB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,KACrD,SAAS,YAEZ,OAAO,GACc,CACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport type { BaseProps, ForwardRefForwardPropsComponent } from '../../types';\nimport { useConfiguration, useI18n } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\nimport cap from '../../utils/cap';\n\nimport type { DateTimeFormat, DateTimeVariant } from './DateTime.types';\nimport { getValidTimeZone, parseToDate } from './Input/utils';\nimport type { ClockFormat } from './Input/utils';\nimport { isValidDate } from './Picker/utils';\nimport { formatDateTime } from './utils';\n\nexport interface DateTimeDisplayProps extends BaseProps {\n  /** Date as ISO8601 string, timestamp or native Date object. */\n  value?: Date | string | number;\n  /** Controls date time variant. */\n  variant: DateTimeVariant;\n  /**\n   * Controls display format.\n   * @default 'medium'\n   */\n  format?: DateTimeFormat;\n  /** Defines clock format that overrides locale based format */\n  clockFormat?: ClockFormat;\n  /**\n   * IANA timezone identifier (e.g. 'America/New_York', 'Europe/Paris').\n   * When provided all screens will render the value in this timezone regardless\n   * of the browser locale. When omitted the component defaults to UTC to\n   * preserve backwards compatibility with callers that pass pre-converted values.\n   */\n  timeZone?: string;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLTimeElement>;\n}\n\nexport const StyledDateTimeDisplay = styled.time``;\n\nconst DateTimeDisplay: ForwardRefForwardPropsComponent<DateTimeDisplayProps> = forwardRef(\n  function DateTimeDisplay(\n    {\n      value,\n      variant,\n      format = 'medium',\n      clockFormat,\n      timeZone,\n      ...restProps\n    }: PropsWithoutRef<DateTimeDisplayProps>,\n    ref: DateTimeDisplayProps['ref']\n  ) {\n    const { locale } = useConfiguration();\n    const t = useI18n();\n\n    const parsedDate = value || value === 0 ? parseToDate(value) : undefined;\n    const hasValue = !!parsedDate && isValidDate(parsedDate);\n\n    const resolvedTimeZone = useMemo(() => getValidTimeZone(timeZone) ?? 'UTC', [timeZone]);\n\n    const displayText = hasValue\n      ? cap(\n          formatDateTime(parsedDate, {\n            t,\n            locale,\n            format,\n            variant,\n            clockFormat,\n            timeZone: resolvedTimeZone\n          })\n        )\n      : undefined;\n\n    // Abbreviated month names (e.g. \"Oct\") read phonetically to screen readers, so an\n    // accessible, fully expanded label (e.g. \"October\") is exposed via aria-label while\n    // the visible, abbreviated text stays unchanged. Only 'medium' format ever renders an\n    // abbreviated month name, so other formats simply reuse the display text.\n    const accessibleText =\n      hasValue && format === 'medium'\n        ? cap(\n            formatDateTime(parsedDate, {\n              t,\n              locale,\n              format,\n              variant,\n              clockFormat,\n              timeZone: resolvedTimeZone,\n              abbreviated: false\n            })\n          )\n        : displayText;\n\n    let content = <NoValue />;\n    if (hasValue) {\n      content =\n        displayText !== accessibleText ? (\n          <abbr aria-label={accessibleText}>{displayText}</abbr>\n        ) : (\n          <>{displayText}</>\n        );\n    }\n\n    return (\n      <StyledDateTimeDisplay\n        ref={ref}\n        dateTime={hasValue ? parsedDate.toISOString() : undefined}\n        {...restProps}\n      >\n        {content}\n      </StyledDateTimeDisplay>\n    );\n  }\n);\n\nexport default DateTimeDisplay;\n"]}

package/lib/components/DateTime/Input/DateTimeInput.d.ts

@@ -31,6 +31,13 @@ export interface DateTimeInputProps extends DateTimeProps {
     additionalInfo?: FormControlProps['additionalInfo'];
     /** Additional properties for imperative control. */
     handle?: Ref<DateTimeInputHandleValue>;
+    /**
+     * Controls timezone emission compatibility.
+     * - precalculated: caller provides a value already adjusted for the display timezone.
+     * - component: DateTimeInput converts between raw UTC and the display timezone.
+     * @default precalculated
+     */
+    timeZoneConversionMode?: 'precalculated' | 'component';
 }
 export declare const StyledDateTimeInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement> | null | undefined;

package/lib/components/DateTime/Input/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTimeInput.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAEV,iBAAiB,EAGjB,GAAG,EACH,SAAS,EACV,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAkB1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AA2BnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,OAAO,KAAK,EAAa,aAAa,EAAa,MAAM,uBAAuB,CAAC;AAIjF,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,MAAM,yBAAyB,CAAC;CAClD;AAED,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,+DAA+D;IAC/D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,oDAAoD;IACpD,MAAM,CAAC,EAAE,GAAG,CAAC,wBAAwB,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,mBAAmB;;gCAK9B,CAAC;AA+BH,eAAO,MAAM,0BAA0B,GACrC,MAAM,IAAI,EACV,OAAO,aAAa,CAAC,MAAM,GAAG,SAAS,CAAC,EACxC,QAAQ,MAAM,KACb,yBAgFF,CAAC;;;;AAspBF,wBAAmE"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTimeInput.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAEV,iBAAiB,EAGjB,GAAG,EACH,SAAS,EACV,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAkB1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AA+BnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,OAAO,KAAK,EAAa,aAAa,EAAa,MAAM,uBAAuB,CAAC;AAIjF,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,MAAM,yBAAyB,CAAC;CAClD;AAED,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,+DAA+D;IAC/D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,oDAAoD;IACpD,MAAM,CAAC,EAAE,GAAG,CAAC,wBAAwB,CAAC,CAAC;IACvC;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,eAAe,GAAG,WAAW,CAAC;CACxD;AAED,eAAO,MAAM,mBAAmB;;gCAK9B,CAAC;AA+BH,eAAO,MAAM,0BAA0B,GACrC,MAAM,IAAI,EACV,OAAO,aAAa,CAAC,MAAM,GAAG,SAAS,CAAC,EACxC,QAAQ,MAAM,KACb,yBAgFF,CAAC;;;;AAqwBF,wBAAmE"}

package/lib/components/DateTime/Input/DateTimeInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, Fragment, useCallback, useEffect, useRef, useState, useImperativeHandle } from 'react';
+import { forwardRef, Fragment, useCallback, useEffect, useRef, useState, useImperativeHandle, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../../theme';
 import { StyledFormControl } from '../../FormControl';
@@ -17,7 +17,7 @@ import { getAdjustedUTCDateTime, getAdjustedUTCDateTimeForTimezone } from '../ut
 import HiddenText from '../../HiddenText';
 import TouchDialog from '../../Dialog/TouchDialog';
 import StyledDateTime, { StyledDatePickerDialog, StyledDialogContent, StyledInputButton, StyledInputContainer, StyledTouchDateTimeDialogFooter } from './DateTime.styles';
-import { buildRawDateTimeString, generatePickerButtonAriaLabel, getDateFormat, getDateTimeParts, getTimeOptions, is12HClockFormat, parsePastedTextToDate, parseToDate, validateDate, validateDateTime, validateTime } from './utils';
+import { buildRawDateTimeString, generatePickerButtonAriaLabel, getDateFormat, getDateTimeParts, getTimeOptions, getValidTimeZone, isISODate, is12HClockFormat, parsePastedTextToDate, parseToDate, wallTimeToUTCISO, projectToTimeZoneWallTime, validateDate, validateDateTime, validateTime } from './utils';
 import useAutoFocusNextInput from './useAutoFocusNextInput';
 import PartInput from './PartInput';
 import usePickerButton from './usePickerButton';
@@ -103,14 +103,33 @@ function dateOptions() {
 const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
     const { locale } = useConfiguration();
     const t = useI18n();
-    const { testId, value, min, max, id, label, labelHidden, withSeconds = false, clockFormat, info = getDateFormat(t, locale, withSeconds ? 'datetime+seconds' : 'datetime'), status, required, readOnly, disabled, showWeekNumber, pickerInterval = 30, timeZone, onChange, onFocus, onBlur, suggestion, additionalInfo, handle, autoFocus, className, ...restProps } = props;
+    const { testId, value, min, max, id, label, labelHidden, withSeconds = false, clockFormat, info = getDateFormat(t, locale, withSeconds ? 'datetime+seconds' : 'datetime'), status, required, readOnly, disabled, showWeekNumber, pickerInterval = 30, timeZone, timeZoneConversionMode = 'precalculated', onChange, onFocus, onBlur, suggestion, additionalInfo, handle, autoFocus, className, ...restProps } = props;
     const testIds = useTestIds(testId, getDateTimeInputTestIds);
     const yearPartId = useUID();
+    const normalizedTimeZone = useMemo(() => getValidTimeZone(timeZone), [timeZone]);
     const containerRef = useConsolidatedRef(ref);
+    // dateTime is the ISO value supplied by the caller.
     const dateTime = value !== undefined && value !== '' ? parseToDate(value) : undefined;
+    // Legacy DX supplies an already converted wall-clock value. New consumers pass raw UTC and
+    // opt into timezone projection explicitly.
+    const localDateTime = dateTime !== undefined && timeZoneConversionMode === 'component'
+        ? projectToTimeZoneWallTime(dateTime, normalizedTimeZone)
+        : dateTime;
     const is12h = clockFormat ? clockFormat === 12 : is12HClockFormat(locale);
-    const minYear = min !== undefined ? parseToDate(min).getUTCFullYear() : 1;
-    const maxYear = max !== undefined ? parseToDate(max).getUTCFullYear() : 9999;
+    const minDate = min !== undefined ? parseToDate(min) : undefined;
+    const maxDate = max !== undefined ? parseToDate(max) : undefined;
+    const displayMinDate = minDate !== undefined &&
+        timeZoneConversionMode === 'component' &&
+        (typeof min !== 'string' || isISODate(min))
+        ? projectToTimeZoneWallTime(minDate, normalizedTimeZone)
+        : minDate;
+    const displayMaxDate = maxDate !== undefined &&
+        timeZoneConversionMode === 'component' &&
+        (typeof max !== 'string' || isISODate(max))
+        ? projectToTimeZoneWallTime(maxDate, normalizedTimeZone)
+        : maxDate;
+    const minYear = displayMinDate !== undefined ? displayMinDate.getUTCFullYear() : 1;
+    const maxYear = displayMaxDate !== undefined ? displayMaxDate.getUTCFullYear() : 9999;
     const [yearInputRef, monthInputRef, dayInputRef, hourInputRef, minuteInputRef, secondInputRef, meridiemSelectRef] = [
         useRef(null),
         useRef(null),
@@ -130,11 +149,57 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
             (withSeconds && secondInputRef.current?.value)));
     }, [dateTime]);
     useEffect(() => {
-        if (is12h && meridiemSelectRef.current && dateTime?.getUTCHours() !== undefined) {
-            meridiemSelectRef.current.value = getMeridiem(dateTime?.getUTCHours());
+        if (is12h && meridiemSelectRef.current && localDateTime?.getUTCHours() !== undefined) {
+            meridiemSelectRef.current.value = getMeridiem(localDateTime.getUTCHours());
         }
-    }, [is12h, dateTime?.getUTCHours()]);
+    }, [is12h, localDateTime?.getUTCHours()]);
     const [pickerSelection, setPickerSelection] = useState(undefined);
+    // Builds the callback value from edited fields. Component mode must reject DST-gap wall times
+    // instead of emitting the different instant the timezone parser would otherwise normalize to.
+    const toCallbackParam = (parts, overrideBaseDate) => {
+        if (timeZoneConversionMode !== 'component') {
+            return convertToCallbackParameter(overrideBaseDate ?? (dateTime ? new Date(dateTime) : new Date()), parts, locale);
+        }
+        const tz = normalizedTimeZone ?? '';
+        let fallbackDate = new Date();
+        if (tz) {
+            fallbackDate = getAdjustedUTCDateTimeForTimezone(tz);
+        }
+        else if (timeZone?.trim()) {
+            fallbackDate = getAdjustedUTCDateTime();
+        }
+        const validDateTime = dateTime !== undefined && !Number.isNaN(dateTime.getTime()) ? dateTime : undefined;
+        const validLocalDateTime = localDateTime !== undefined && !Number.isNaN(localDateTime.getTime())
+            ? localDateTime
+            : undefined;
+        const baseDate = overrideBaseDate ?? (validLocalDateTime ? new Date(validLocalDateTime) : fallbackDate);
+        const param = convertToCallbackParameter(baseDate, parts, locale);
+        if (validDateTime !== undefined &&
+            validLocalDateTime !== undefined &&
+            param.valueAsISOString === validLocalDateTime.toISOString()) {
+            return {
+                ...param,
+                valueAsISOString: validDateTime.toISOString(),
+                valueAsTimestamp: validDateTime.getTime()
+            };
+        }
+        if (tz && param.valueAsISOString && !param.state) {
+            const shiftedISO = wallTimeToUTCISO(param.valueAsISOString, tz);
+            if (!shiftedISO) {
+                return {
+                    ...param,
+                    valueAsTimestamp: NaN,
+                    state: 'invalid'
+                };
+            }
+            return {
+                ...param,
+                valueAsISOString: shiftedISO,
+                valueAsTimestamp: new Date(shiftedISO).getTime()
+            };
+        }
+        return param;
+    };
     const pickDateParts = () => {
         return {
             day: dayInputRef.current?.value || undefined,
@@ -160,7 +225,9 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
     const pickParts = () => {
         return { ...pickDateParts(), ...pickTimeParts() };
     };
-    const getNow = useCallback(() => (timeZone ? getAdjustedUTCDateTimeForTimezone(timeZone) : getAdjustedUTCDateTime()), [timeZone]);
+    const getNow = useCallback(() => normalizedTimeZone
+        ? getAdjustedUTCDateTimeForTimezone(normalizedTimeZone)
+        : getAdjustedUTCDateTime(), [normalizedTimeZone]);
     const currentlySelectedDate = () => {
         const parts = pickDateParts();
         if (Object.values(parts).every(Boolean)) {
@@ -179,9 +246,10 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
             const minute = Number(parts.minute);
             const second = parts.second ? Number(parts.second) : 0;
             const meridiem = parts.dayPeriod;
-            const current = dateTime !== undefined ? new Date(dateTime) : getNow();
+            // make a copy of current value to avoid mutation
+            const current = localDateTime !== undefined ? new Date(localDateTime) : getNow();
             return validateTime(hour, minute, second, 0, meridiem !== undefined)
-                ? new Date(current.setUTCHours(meridiem !== undefined ? convertTo24h(hour, meridiem) : hour, minute, second, dateTime?.getUTCMilliseconds() || 0))
+                ? new Date(current.setUTCHours(meridiem !== undefined ? convertTo24h(hour, meridiem) : hour, minute, second, localDateTime?.getUTCMilliseconds() || 0))
                 : undefined;
         }
     };
@@ -210,10 +278,10 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
     };
     const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton(setDefaultTimeIfEmpty);
     useImperativeHandle(handle, () => ({
-        getCurrentValue: () => convertToCallbackParameter(dateTime ? new Date(dateTime) : new Date(), pickParts(), locale)
+        getCurrentValue: () => toCallbackParam(pickParts(), dateTime ? new Date(dateTime) : undefined)
     }));
-    const onInputChange = () => {
-        onChange?.(convertToCallbackParameter(dateTime ? new Date(dateTime) : new Date(), pickParts(), locale));
+    const onInputChange = (baseDate) => {
+        onChange?.(toCallbackParam(pickParts(), baseDate));
         buttonEl?.setAttribute('aria-label', generatePickerButtonAriaLabel(currentlySelectedDateTime(), 'datetime', locale, t, open, is12h));
         setHasValue(!!(dayInputRef.current?.value ||
             monthInputRef.current?.value ||
@@ -222,6 +290,9 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
             minuteInputRef.current?.value ||
             (withSeconds && secondInputRef.current?.value)));
     };
+    // Wrapper with the signature expected by PartInput.onChange — the value
+    // param is intentionally ignored; parts are read from refs inside onInputChange.
+    const onPartChange = () => onInputChange();
     const setInputValue = (newValue) => {
         dayInputRef.current.value = newValue?.getUTCDate().toString().padStart(2, '0') ?? '';
         monthInputRef.current.value =
@@ -246,18 +317,28 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
     };
     const onPaste = (e) => {
         const text = e.clipboardData.getData('text');
-        const date = parsePastedTextToDate(text, locale, dateTime || new Date(), 'datetime');
+        const parsedDate = parsePastedTextToDate(text, locale, localDateTime || getNow(), 'datetime');
+        const isAbsoluteISODateTime = isISODate(text);
+        const date = parsedDate && timeZoneConversionMode === 'component' && isAbsoluteISODateTime
+            ? projectToTimeZoneWallTime(parsedDate, normalizedTimeZone)
+            : parsedDate;
+        const pastedISOValue = parsedDate && timeZoneConversionMode === 'component' && isAbsoluteISODateTime
+            ? {
+                valueAsISOString: parsedDate.toISOString(),
+                valueAsTimestamp: parsedDate.getTime()
+            }
+            : undefined;
         if (date) {
             e.preventDefault();
             setInputValue(date);
             setPickerSelection(date);
-            onChange?.(convertToCallbackParameter(date, pickParts(), locale));
+            onChange?.(pastedISOValue ?? toCallbackParam(pickParts(), date));
             setHasValue(true);
         }
     };
     const inputContainerRef = useRef(null);
     const onFocusChange = (focused) => {
-        const callbackParam = convertToCallbackParameter(dateTime ? new Date(dateTime) : new Date(), pickParts(), locale);
+        const callbackParam = toCallbackParam(pickParts());
         if (onFocus && focused)
             onFocus(callbackParam);
         if (!focused) {
@@ -277,13 +358,15 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
         }
     });
     const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });
-    const DayInput = (_jsx(PartInput, { "data-testid": testIds.controlDay, placeholder: t('day_placeholder'), "aria-label": displayNames.of('day'), value: dateTime?.getUTCDate(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: 1, max: 31, ref: dayInputRef }, 'day'));
-    const MonthInput = (_jsx(PartInput, { "data-testid": testIds.controlMonth, placeholder: t('month_placeholder'), "aria-label": displayNames.of('month'), value: dateTime ? dateTime.getUTCMonth() + 1 : undefined, onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: 1, max: 12, ref: monthInputRef }, 'month'));
-    const YearInput = (_jsxs(Fragment, { children: [_jsx(PartInput, { "data-testid": testIds.controlYear, placeholder: t('year_placeholder'), "aria-label": displayNames.of('year'), "aria-describedby": yearPartId, value: dateTime?.getUTCFullYear(), onChange: onInputChange, size: 4, maxLength: 4, padWithZeros: false, readOnly: readOnly, min: minYear, max: maxYear, ref: yearInputRef }), _jsx(HiddenText, { id: yearPartId, children: t('year_input_description') })] }, 'year'));
-    const hour = dateTime && is12h ? convertTo12h(dateTime.getUTCHours()) : dateTime?.getUTCHours();
-    const HourInput = (_jsx(PartInput, { "data-testid": testIds.controlHour, placeholder: t('hour_placeholder'), "aria-label": displayNames.of('hour'), value: hour, onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: is12h ? 1 : 0, max: is12h ? 12 : 23, ref: hourInputRef }, 'hour'));
-    const MinuteInput = (_jsx(PartInput, { "data-testid": testIds.controlMinute, placeholder: t('minute_placeholder'), "aria-label": displayNames.of('minute'), value: dateTime?.getUTCMinutes(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: minuteInputRef }, 'minute'));
-    const SecondInput = (_jsx(PartInput, { "data-testid": testIds.controlSecond, placeholder: t('second_placeholder'), "aria-label": displayNames.of('second'), value: dateTime?.getUTCSeconds(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: secondInputRef }, 'second'));
+    const DayInput = (_jsx(PartInput, { "data-testid": testIds.controlDay, placeholder: t('day_placeholder'), "aria-label": displayNames.of('day'), value: localDateTime?.getUTCDate(), onChange: onPartChange, size: 2, maxLength: 2, readOnly: readOnly, min: 1, max: 31, ref: dayInputRef }, 'day'));
+    const MonthInput = (_jsx(PartInput, { "data-testid": testIds.controlMonth, placeholder: t('month_placeholder'), "aria-label": displayNames.of('month'), value: localDateTime ? localDateTime.getUTCMonth() + 1 : undefined, onChange: onPartChange, size: 2, maxLength: 2, readOnly: readOnly, min: 1, max: 12, ref: monthInputRef }, 'month'));
+    const YearInput = (_jsxs(Fragment, { children: [_jsx(PartInput, { "data-testid": testIds.controlYear, placeholder: t('year_placeholder'), "aria-label": displayNames.of('year'), "aria-describedby": yearPartId, value: localDateTime?.getUTCFullYear(), onChange: onPartChange, size: 4, maxLength: 4, padWithZeros: false, readOnly: readOnly, min: minYear, max: maxYear, ref: yearInputRef }), _jsx(HiddenText, { id: yearPartId, children: t('year_input_description') })] }, 'year'));
+    const hour = localDateTime && is12h
+        ? convertTo12h(localDateTime.getUTCHours())
+        : localDateTime?.getUTCHours();
+    const HourInput = (_jsx(PartInput, { "data-testid": testIds.controlHour, placeholder: t('hour_placeholder'), "aria-label": displayNames.of('hour'), value: hour, onChange: onPartChange, size: 2, maxLength: 2, readOnly: readOnly, min: is12h ? 1 : 0, max: is12h ? 12 : 23, ref: hourInputRef }, 'hour'));
+    const MinuteInput = (_jsx(PartInput, { "data-testid": testIds.controlMinute, placeholder: t('minute_placeholder'), "aria-label": displayNames.of('minute'), value: localDateTime?.getUTCMinutes(), onChange: onPartChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: minuteInputRef }, 'minute'));
+    const SecondInput = (_jsx(PartInput, { "data-testid": testIds.controlSecond, placeholder: t('second_placeholder'), "aria-label": displayNames.of('second'), value: localDateTime?.getUTCSeconds(), onChange: onPartChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: secondInputRef }, 'second'));
     const { rtl } = useDirection();
     const Period = (_jsxs(Select, { "data-testid": testIds.controlPeriod, ref: meridiemSelectRef, "aria-label": displayNames.of('dayPeriod'), required: required, disabled: disabled, dir: rtl ? 'rtl' : 'ltr', onChange: () => {
             if (Object.values(pickParts()).every(Boolean))
@@ -329,7 +412,15 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
     useFocusWithin([containerRef], onFocusChange);
     const pickerContent = (_jsxs(Flex, { container: { direction: 'column' }, as: StyledDialogContent, children: [_jsx(DatePicker, { testId: testIds.picker, mode: 'datetime', selected: currentlySelectedDateTime(), onChange: selected => {
                     setPickerSelection(selected);
-                }, min: min, max: max, showWeekNumber: showWeekNumber, pickerInterval: pickerInterval, withSeconds: withSeconds, clockFormat: clockFormat, timeZone: timeZone }), _jsxs(Flex, { as: StyledTouchDateTimeDialogFooter, container: { justify: 'between' }, children: [_jsx(Button, { "data-testid": testIds.discardChanges, "aria-label": t('cancel'), onClick: () => {
+                }, min: timeZoneConversionMode === 'component' &&
+                    displayMinDate &&
+                    !Number.isNaN(displayMinDate.getTime())
+                    ? displayMinDate.toISOString()
+                    : min, max: timeZoneConversionMode === 'component' &&
+                    displayMaxDate &&
+                    !Number.isNaN(displayMaxDate.getTime())
+                    ? displayMaxDate.toISOString()
+                    : max, showWeekNumber: showWeekNumber, pickerInterval: pickerInterval, withSeconds: withSeconds, clockFormat: clockFormat, timeZone: normalizedTimeZone }), _jsxs(Flex, { as: StyledTouchDateTimeDialogFooter, container: { justify: 'between' }, children: [_jsx(Button, { "data-testid": testIds.discardChanges, "aria-label": t('cancel'), onClick: () => {
                             setPickerSelection(undefined);
                             setOpen(false);
                             setTimeout(() => buttonEl?.focus());
@@ -340,7 +431,7 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
                             }
                             setOpen(false);
                             setTimeout(() => buttonEl?.focus());
-                            onInputChange();
+                            onInputChange(timeZoneConversionMode === 'component' ? pickerSelection : undefined);
                         }, children: t('apply') })] })] }));
     const Picker = (_jsxs(_Fragment, { children: [_jsx(StyledInputButton, { "data-testid": testIds.openClosePicker, variant: 'simple', icon: true, ref: setButtonEl, onClick: () => {
                     setOpen(cur => !cur);