@pega/cosmos-react-core 10.0.0-build.9.4 → 10.0.0-build.9.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppShell/TouchAppShell.styles.d.ts.map +1 -1
- package/lib/components/AppShell/TouchAppShell.styles.js +2 -1
- package/lib/components/AppShell/TouchAppShell.styles.js.map +1 -1
- package/lib/components/DateTime/DateTime.types.d.ts +1 -1
- package/lib/components/DateTime/DateTime.types.js.map +1 -1
- package/lib/components/DateTime/DateTimeDisplay.d.ts +7 -0
- package/lib/components/DateTime/DateTimeDisplay.d.ts.map +1 -1
- package/lib/components/DateTime/DateTimeDisplay.js +6 -5
- package/lib/components/DateTime/DateTimeDisplay.js.map +1 -1
- package/lib/components/DateTime/Input/DateTimeInput.d.ts +7 -0
- package/lib/components/DateTime/Input/DateTimeInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateTimeInput.js +117 -26
- package/lib/components/DateTime/Input/DateTimeInput.js.map +1 -1
- package/lib/components/DateTime/Input/utils.d.ts +4 -1
- package/lib/components/DateTime/Input/utils.d.ts.map +1 -1
- package/lib/components/DateTime/Input/utils.js +68 -5
- package/lib/components/DateTime/Input/utils.js.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.js +1 -1
- package/lib/components/ListToolbar/ListToolbar.js.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.types.d.ts +2 -1
- package/lib/components/ListToolbar/ListToolbar.types.d.ts.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.types.js.map +1 -1
- package/lib/hooks/useAnimatedText.d.ts.map +1 -1
- package/lib/hooks/useAnimatedText.js +12 -1
- package/lib/hooks/useAnimatedText.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TouchAppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/TouchAppShell.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAA0B,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA8BtF,eAAO,MAAM,wBAAwB;0BACb,OAAO;kBACf,OAAO;YACb,YAAY;EAarB,CAAC;AAEF,eAAO,MAAM,uBAAuB;aAAyB,OAAO;YAOnE,CAAC;AAIF,eAAO,MAAM,oBAAoB;aAAyB,OAAO;YAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB;;
|
|
1
|
+
{"version":3,"file":"TouchAppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/TouchAppShell.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAA0B,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA8BtF,eAAO,MAAM,wBAAwB;0BACb,OAAO;kBACf,OAAO;YACb,YAAY;EAarB,CAAC;AAEF,eAAO,MAAM,uBAAuB;aAAyB,OAAO;YAOnE,CAAC;AAIF,eAAO,MAAM,oBAAoB;aAAyB,OAAO;YAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB;;gKAWnC,CAAC;AAIF,eAAO,MAAM,oBAAoB;;mBAShC,CAAC;AAIF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAAwC,OAAO;gJAqFzE,CAAC;AAIH,eAAO,MAAM,0BAA0B;;2JAgDrC,CAAC"}
|
|
@@ -43,8 +43,9 @@ export const StyledSplitViewPanel = styled.div(({ active, theme }) => {
|
|
|
43
43
|
`;
|
|
44
44
|
});
|
|
45
45
|
StyledSplitViewPanel.defaultProps = defaultThemeProp;
|
|
46
|
-
export const StyledPortalTouchDialog = styled(TouchDialog)(() => css `
|
|
46
|
+
export const StyledPortalTouchDialog = styled(TouchDialog)(({ theme }) => css `
|
|
47
47
|
&& {
|
|
48
|
+
background: ${theme.components.agent.background};
|
|
48
49
|
pointer-events: auto;
|
|
49
50
|
inset-inline: 0;
|
|
50
51
|
inset-block-end: var(--appshell-hard-bottom-offset, 0);
|
|
@@ -1 +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"]}
|
|
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 ({ 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"]}
|
|
@@ -29,7 +29,7 @@ export interface DateTimeProperties extends TestIdProp, BaseProps {
|
|
|
29
29
|
/** Automatically focuses the input on render. */
|
|
30
30
|
autoFocus?: boolean;
|
|
31
31
|
/**
|
|
32
|
-
* IANA time zone
|
|
32
|
+
* IANA time zone identifier (e.g. "America/New_York", "Europe/Paris").
|
|
33
33
|
* When provided, today-highlight and the "Set today" / "Set now" button use
|
|
34
34
|
* the provided time zone instead of the browser's local time zone.
|
|
35
35
|
*/
|
|
@@ -1 +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
|
|
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 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"]}
|
|
@@ -14,6 +14,13 @@ export interface DateTimeDisplayProps extends BaseProps {
|
|
|
14
14
|
format?: DateTimeFormat;
|
|
15
15
|
/** Defines clock format that overrides locale based format */
|
|
16
16
|
clockFormat?: ClockFormat;
|
|
17
|
+
/**
|
|
18
|
+
* IANA timezone identifier (e.g. 'America/New_York', 'Europe/Paris').
|
|
19
|
+
* When provided all screens will render the value in this timezone regardless
|
|
20
|
+
* of the browser locale. When omitted the component defaults to UTC to
|
|
21
|
+
* preserve backwards compatibility with callers that pass pre-converted values.
|
|
22
|
+
*/
|
|
23
|
+
timeZone?: string;
|
|
17
24
|
/** Ref for the wrapping element. */
|
|
18
25
|
ref?: Ref<HTMLTimeElement>;
|
|
19
26
|
}
|
|
@@ -1 +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,
|
|
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;;;;;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"}
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
2
|
+
import { forwardRef, useMemo } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { useConfiguration, useI18n } from '../../hooks';
|
|
5
5
|
import NoValue from '../NoValue/NoValue';
|
|
6
6
|
import cap from '../../utils/cap';
|
|
7
|
-
import { parseToDate } from './Input/utils';
|
|
7
|
+
import { getValidTimeZone, parseToDate } from './Input/utils';
|
|
8
8
|
import { isValidDate } from './Picker/utils';
|
|
9
9
|
import { formatDateTime } from './utils';
|
|
10
10
|
export const StyledDateTimeDisplay = styled.time ``;
|
|
11
|
-
const DateTimeDisplay = forwardRef(function DateTimeDisplay({ value, variant, format = 'medium', clockFormat, ...restProps }, ref) {
|
|
11
|
+
const DateTimeDisplay = forwardRef(function DateTimeDisplay({ value, variant, format = 'medium', clockFormat, timeZone, ...restProps }, ref) {
|
|
12
12
|
const { locale } = useConfiguration();
|
|
13
13
|
const t = useI18n();
|
|
14
14
|
const parsedDate = value || value === 0 ? parseToDate(value) : undefined;
|
|
15
15
|
const hasValue = !!parsedDate && isValidDate(parsedDate);
|
|
16
|
+
const resolvedTimeZone = useMemo(() => getValidTimeZone(timeZone) ?? 'UTC', [timeZone]);
|
|
16
17
|
const displayText = hasValue
|
|
17
18
|
? cap(formatDateTime(parsedDate, {
|
|
18
19
|
t,
|
|
@@ -20,7 +21,7 @@ const DateTimeDisplay = forwardRef(function DateTimeDisplay({ value, variant, fo
|
|
|
20
21
|
format,
|
|
21
22
|
variant,
|
|
22
23
|
clockFormat,
|
|
23
|
-
timeZone:
|
|
24
|
+
timeZone: resolvedTimeZone
|
|
24
25
|
}))
|
|
25
26
|
: undefined;
|
|
26
27
|
// 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
|
|
|
34
35
|
format,
|
|
35
36
|
variant,
|
|
36
37
|
clockFormat,
|
|
37
|
-
timeZone:
|
|
38
|
+
timeZone: resolvedTimeZone,
|
|
38
39
|
abbreviated: false
|
|
39
40
|
}))
|
|
40
41
|
: displayText;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeDisplay.js","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimeDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"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"]}
|
|
@@ -31,6 +31,13 @@ export interface DateTimeInputProps extends DateTimeProps {
|
|
|
31
31
|
additionalInfo?: FormControlProps['additionalInfo'];
|
|
32
32
|
/** Additional properties for imperative control. */
|
|
33
33
|
handle?: Ref<DateTimeInputHandleValue>;
|
|
34
|
+
/**
|
|
35
|
+
* Controls timezone emission compatibility.
|
|
36
|
+
* - precalculated: caller provides a value already adjusted for the display timezone.
|
|
37
|
+
* - component: DateTimeInput converts between raw UTC and the display timezone.
|
|
38
|
+
* @default precalculated
|
|
39
|
+
*/
|
|
40
|
+
timeZoneConversionMode?: 'precalculated' | 'component';
|
|
34
41
|
}
|
|
35
42
|
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"> & {
|
|
36
43
|
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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTimeInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, Fragment, useCallback, useEffect, useRef, useState, useImperativeHandle } from 'react';
|
|
2
|
+
import { forwardRef, Fragment, useCallback, useEffect, useRef, useState, useImperativeHandle, useMemo } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { defaultThemeProp } from '../../../theme';
|
|
5
5
|
import { StyledFormControl } from '../../FormControl';
|
|
@@ -17,7 +17,7 @@ import { getAdjustedUTCDateTime, getAdjustedUTCDateTimeForTimezone } from '../ut
|
|
|
17
17
|
import HiddenText from '../../HiddenText';
|
|
18
18
|
import TouchDialog from '../../Dialog/TouchDialog';
|
|
19
19
|
import StyledDateTime, { StyledDatePickerDialog, StyledDialogContent, StyledInputButton, StyledInputContainer, StyledTouchDateTimeDialogFooter } from './DateTime.styles';
|
|
20
|
-
import { buildRawDateTimeString, generatePickerButtonAriaLabel, getDateFormat, getDateTimeParts, getTimeOptions, is12HClockFormat, parsePastedTextToDate, parseToDate, validateDate, validateDateTime, validateTime } from './utils';
|
|
20
|
+
import { buildRawDateTimeString, generatePickerButtonAriaLabel, getDateFormat, getDateTimeParts, getTimeOptions, getValidTimeZone, isISODate, is12HClockFormat, parsePastedTextToDate, parseToDate, wallTimeToUTCISO, projectToTimeZoneWallTime, validateDate, validateDateTime, validateTime } from './utils';
|
|
21
21
|
import useAutoFocusNextInput from './useAutoFocusNextInput';
|
|
22
22
|
import PartInput from './PartInput';
|
|
23
23
|
import usePickerButton from './usePickerButton';
|
|
@@ -103,14 +103,33 @@ function dateOptions() {
|
|
|
103
103
|
const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
|
|
104
104
|
const { locale } = useConfiguration();
|
|
105
105
|
const t = useI18n();
|
|
106
|
-
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;
|
|
106
|
+
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;
|
|
107
107
|
const testIds = useTestIds(testId, getDateTimeInputTestIds);
|
|
108
108
|
const yearPartId = useUID();
|
|
109
|
+
const normalizedTimeZone = useMemo(() => getValidTimeZone(timeZone), [timeZone]);
|
|
109
110
|
const containerRef = useConsolidatedRef(ref);
|
|
111
|
+
// dateTime is the ISO value supplied by the caller.
|
|
110
112
|
const dateTime = value !== undefined && value !== '' ? parseToDate(value) : undefined;
|
|
113
|
+
// Legacy DX supplies an already converted wall-clock value. New consumers pass raw UTC and
|
|
114
|
+
// opt into timezone projection explicitly.
|
|
115
|
+
const localDateTime = dateTime !== undefined && timeZoneConversionMode === 'component'
|
|
116
|
+
? projectToTimeZoneWallTime(dateTime, normalizedTimeZone)
|
|
117
|
+
: dateTime;
|
|
111
118
|
const is12h = clockFormat ? clockFormat === 12 : is12HClockFormat(locale);
|
|
112
|
-
const
|
|
113
|
-
const
|
|
119
|
+
const minDate = min !== undefined ? parseToDate(min) : undefined;
|
|
120
|
+
const maxDate = max !== undefined ? parseToDate(max) : undefined;
|
|
121
|
+
const displayMinDate = minDate !== undefined &&
|
|
122
|
+
timeZoneConversionMode === 'component' &&
|
|
123
|
+
(typeof min !== 'string' || isISODate(min))
|
|
124
|
+
? projectToTimeZoneWallTime(minDate, normalizedTimeZone)
|
|
125
|
+
: minDate;
|
|
126
|
+
const displayMaxDate = maxDate !== undefined &&
|
|
127
|
+
timeZoneConversionMode === 'component' &&
|
|
128
|
+
(typeof max !== 'string' || isISODate(max))
|
|
129
|
+
? projectToTimeZoneWallTime(maxDate, normalizedTimeZone)
|
|
130
|
+
: maxDate;
|
|
131
|
+
const minYear = displayMinDate !== undefined ? displayMinDate.getUTCFullYear() : 1;
|
|
132
|
+
const maxYear = displayMaxDate !== undefined ? displayMaxDate.getUTCFullYear() : 9999;
|
|
114
133
|
const [yearInputRef, monthInputRef, dayInputRef, hourInputRef, minuteInputRef, secondInputRef, meridiemSelectRef] = [
|
|
115
134
|
useRef(null),
|
|
116
135
|
useRef(null),
|
|
@@ -130,11 +149,57 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
|
|
|
130
149
|
(withSeconds && secondInputRef.current?.value)));
|
|
131
150
|
}, [dateTime]);
|
|
132
151
|
useEffect(() => {
|
|
133
|
-
if (is12h && meridiemSelectRef.current &&
|
|
134
|
-
meridiemSelectRef.current.value = getMeridiem(
|
|
152
|
+
if (is12h && meridiemSelectRef.current && localDateTime?.getUTCHours() !== undefined) {
|
|
153
|
+
meridiemSelectRef.current.value = getMeridiem(localDateTime.getUTCHours());
|
|
135
154
|
}
|
|
136
|
-
}, [is12h,
|
|
155
|
+
}, [is12h, localDateTime?.getUTCHours()]);
|
|
137
156
|
const [pickerSelection, setPickerSelection] = useState(undefined);
|
|
157
|
+
// Builds the callback value from edited fields. Component mode must reject DST-gap wall times
|
|
158
|
+
// instead of emitting the different instant the timezone parser would otherwise normalize to.
|
|
159
|
+
const toCallbackParam = (parts, overrideBaseDate) => {
|
|
160
|
+
if (timeZoneConversionMode !== 'component') {
|
|
161
|
+
return convertToCallbackParameter(overrideBaseDate ?? (dateTime ? new Date(dateTime) : new Date()), parts, locale);
|
|
162
|
+
}
|
|
163
|
+
const tz = normalizedTimeZone ?? '';
|
|
164
|
+
let fallbackDate = new Date();
|
|
165
|
+
if (tz) {
|
|
166
|
+
fallbackDate = getAdjustedUTCDateTimeForTimezone(tz);
|
|
167
|
+
}
|
|
168
|
+
else if (timeZone?.trim()) {
|
|
169
|
+
fallbackDate = getAdjustedUTCDateTime();
|
|
170
|
+
}
|
|
171
|
+
const validDateTime = dateTime !== undefined && !Number.isNaN(dateTime.getTime()) ? dateTime : undefined;
|
|
172
|
+
const validLocalDateTime = localDateTime !== undefined && !Number.isNaN(localDateTime.getTime())
|
|
173
|
+
? localDateTime
|
|
174
|
+
: undefined;
|
|
175
|
+
const baseDate = overrideBaseDate ?? (validLocalDateTime ? new Date(validLocalDateTime) : fallbackDate);
|
|
176
|
+
const param = convertToCallbackParameter(baseDate, parts, locale);
|
|
177
|
+
if (validDateTime !== undefined &&
|
|
178
|
+
validLocalDateTime !== undefined &&
|
|
179
|
+
param.valueAsISOString === validLocalDateTime.toISOString()) {
|
|
180
|
+
return {
|
|
181
|
+
...param,
|
|
182
|
+
valueAsISOString: validDateTime.toISOString(),
|
|
183
|
+
valueAsTimestamp: validDateTime.getTime()
|
|
184
|
+
};
|
|
185
|
+
}
|
|
186
|
+
if (tz && param.valueAsISOString && !param.state) {
|
|
187
|
+
const shiftedISO = wallTimeToUTCISO(param.valueAsISOString, tz);
|
|
188
|
+
if (!shiftedISO) {
|
|
189
|
+
return {
|
|
190
|
+
...param,
|
|
191
|
+
valueAsTimestamp: NaN,
|
|
192
|
+
state: 'invalid'
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
return {
|
|
196
|
+
...param,
|
|
197
|
+
valueAsISOString: shiftedISO,
|
|
198
|
+
valueAsTimestamp: new Date(shiftedISO).getTime()
|
|
199
|
+
};
|
|
200
|
+
}
|
|
201
|
+
return param;
|
|
202
|
+
};
|
|
138
203
|
const pickDateParts = () => {
|
|
139
204
|
return {
|
|
140
205
|
day: dayInputRef.current?.value || undefined,
|
|
@@ -160,7 +225,9 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
|
|
|
160
225
|
const pickParts = () => {
|
|
161
226
|
return { ...pickDateParts(), ...pickTimeParts() };
|
|
162
227
|
};
|
|
163
|
-
const getNow = useCallback(() =>
|
|
228
|
+
const getNow = useCallback(() => normalizedTimeZone
|
|
229
|
+
? getAdjustedUTCDateTimeForTimezone(normalizedTimeZone)
|
|
230
|
+
: getAdjustedUTCDateTime(), [normalizedTimeZone]);
|
|
164
231
|
const currentlySelectedDate = () => {
|
|
165
232
|
const parts = pickDateParts();
|
|
166
233
|
if (Object.values(parts).every(Boolean)) {
|
|
@@ -179,9 +246,10 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
|
|
|
179
246
|
const minute = Number(parts.minute);
|
|
180
247
|
const second = parts.second ? Number(parts.second) : 0;
|
|
181
248
|
const meridiem = parts.dayPeriod;
|
|
182
|
-
|
|
249
|
+
// make a copy of current value to avoid mutation
|
|
250
|
+
const current = localDateTime !== undefined ? new Date(localDateTime) : getNow();
|
|
183
251
|
return validateTime(hour, minute, second, 0, meridiem !== undefined)
|
|
184
|
-
? new Date(current.setUTCHours(meridiem !== undefined ? convertTo24h(hour, meridiem) : hour, minute, second,
|
|
252
|
+
? new Date(current.setUTCHours(meridiem !== undefined ? convertTo24h(hour, meridiem) : hour, minute, second, localDateTime?.getUTCMilliseconds() || 0))
|
|
185
253
|
: undefined;
|
|
186
254
|
}
|
|
187
255
|
};
|
|
@@ -210,10 +278,10 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
|
|
|
210
278
|
};
|
|
211
279
|
const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton(setDefaultTimeIfEmpty);
|
|
212
280
|
useImperativeHandle(handle, () => ({
|
|
213
|
-
getCurrentValue: () =>
|
|
281
|
+
getCurrentValue: () => toCallbackParam(pickParts(), dateTime ? new Date(dateTime) : undefined)
|
|
214
282
|
}));
|
|
215
|
-
const onInputChange = () => {
|
|
216
|
-
onChange?.(
|
|
283
|
+
const onInputChange = (baseDate) => {
|
|
284
|
+
onChange?.(toCallbackParam(pickParts(), baseDate));
|
|
217
285
|
buttonEl?.setAttribute('aria-label', generatePickerButtonAriaLabel(currentlySelectedDateTime(), 'datetime', locale, t, open, is12h));
|
|
218
286
|
setHasValue(!!(dayInputRef.current?.value ||
|
|
219
287
|
monthInputRef.current?.value ||
|
|
@@ -222,6 +290,9 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
|
|
|
222
290
|
minuteInputRef.current?.value ||
|
|
223
291
|
(withSeconds && secondInputRef.current?.value)));
|
|
224
292
|
};
|
|
293
|
+
// Wrapper with the signature expected by PartInput.onChange — the value
|
|
294
|
+
// param is intentionally ignored; parts are read from refs inside onInputChange.
|
|
295
|
+
const onPartChange = () => onInputChange();
|
|
225
296
|
const setInputValue = (newValue) => {
|
|
226
297
|
dayInputRef.current.value = newValue?.getUTCDate().toString().padStart(2, '0') ?? '';
|
|
227
298
|
monthInputRef.current.value =
|
|
@@ -246,18 +317,28 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
|
|
|
246
317
|
};
|
|
247
318
|
const onPaste = (e) => {
|
|
248
319
|
const text = e.clipboardData.getData('text');
|
|
249
|
-
const
|
|
320
|
+
const parsedDate = parsePastedTextToDate(text, locale, localDateTime || getNow(), 'datetime');
|
|
321
|
+
const isAbsoluteISODateTime = isISODate(text);
|
|
322
|
+
const date = parsedDate && timeZoneConversionMode === 'component' && isAbsoluteISODateTime
|
|
323
|
+
? projectToTimeZoneWallTime(parsedDate, normalizedTimeZone)
|
|
324
|
+
: parsedDate;
|
|
325
|
+
const pastedISOValue = parsedDate && timeZoneConversionMode === 'component' && isAbsoluteISODateTime
|
|
326
|
+
? {
|
|
327
|
+
valueAsISOString: parsedDate.toISOString(),
|
|
328
|
+
valueAsTimestamp: parsedDate.getTime()
|
|
329
|
+
}
|
|
330
|
+
: undefined;
|
|
250
331
|
if (date) {
|
|
251
332
|
e.preventDefault();
|
|
252
333
|
setInputValue(date);
|
|
253
334
|
setPickerSelection(date);
|
|
254
|
-
onChange?.(
|
|
335
|
+
onChange?.(pastedISOValue ?? toCallbackParam(pickParts(), date));
|
|
255
336
|
setHasValue(true);
|
|
256
337
|
}
|
|
257
338
|
};
|
|
258
339
|
const inputContainerRef = useRef(null);
|
|
259
340
|
const onFocusChange = (focused) => {
|
|
260
|
-
const callbackParam =
|
|
341
|
+
const callbackParam = toCallbackParam(pickParts());
|
|
261
342
|
if (onFocus && focused)
|
|
262
343
|
onFocus(callbackParam);
|
|
263
344
|
if (!focused) {
|
|
@@ -277,13 +358,15 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
|
|
|
277
358
|
}
|
|
278
359
|
});
|
|
279
360
|
const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });
|
|
280
|
-
const DayInput = (_jsx(PartInput, { "data-testid": testIds.controlDay, placeholder: t('day_placeholder'), "aria-label": displayNames.of('day'), value:
|
|
281
|
-
const MonthInput = (_jsx(PartInput, { "data-testid": testIds.controlMonth, placeholder: t('month_placeholder'), "aria-label": displayNames.of('month'), value:
|
|
282
|
-
const YearInput = (_jsxs(Fragment, { children: [_jsx(PartInput, { "data-testid": testIds.controlYear, placeholder: t('year_placeholder'), "aria-label": displayNames.of('year'), "aria-describedby": yearPartId, value:
|
|
283
|
-
const hour =
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
const
|
|
361
|
+
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'));
|
|
362
|
+
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'));
|
|
363
|
+
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'));
|
|
364
|
+
const hour = localDateTime && is12h
|
|
365
|
+
? convertTo12h(localDateTime.getUTCHours())
|
|
366
|
+
: localDateTime?.getUTCHours();
|
|
367
|
+
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'));
|
|
368
|
+
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'));
|
|
369
|
+
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'));
|
|
287
370
|
const { rtl } = useDirection();
|
|
288
371
|
const Period = (_jsxs(Select, { "data-testid": testIds.controlPeriod, ref: meridiemSelectRef, "aria-label": displayNames.of('dayPeriod'), required: required, disabled: disabled, dir: rtl ? 'rtl' : 'ltr', onChange: () => {
|
|
289
372
|
if (Object.values(pickParts()).every(Boolean))
|
|
@@ -329,7 +412,15 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
|
|
|
329
412
|
useFocusWithin([containerRef], onFocusChange);
|
|
330
413
|
const pickerContent = (_jsxs(Flex, { container: { direction: 'column' }, as: StyledDialogContent, children: [_jsx(DatePicker, { testId: testIds.picker, mode: 'datetime', selected: currentlySelectedDateTime(), onChange: selected => {
|
|
331
414
|
setPickerSelection(selected);
|
|
332
|
-
}, min:
|
|
415
|
+
}, min: timeZoneConversionMode === 'component' &&
|
|
416
|
+
displayMinDate &&
|
|
417
|
+
!Number.isNaN(displayMinDate.getTime())
|
|
418
|
+
? displayMinDate.toISOString()
|
|
419
|
+
: min, max: timeZoneConversionMode === 'component' &&
|
|
420
|
+
displayMaxDate &&
|
|
421
|
+
!Number.isNaN(displayMaxDate.getTime())
|
|
422
|
+
? displayMaxDate.toISOString()
|
|
423
|
+
: 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: () => {
|
|
333
424
|
setPickerSelection(undefined);
|
|
334
425
|
setOpen(false);
|
|
335
426
|
setTimeout(() => buttonEl?.focus());
|
|
@@ -340,7 +431,7 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
|
|
|
340
431
|
}
|
|
341
432
|
setOpen(false);
|
|
342
433
|
setTimeout(() => buttonEl?.focus());
|
|
343
|
-
onInputChange();
|
|
434
|
+
onInputChange(timeZoneConversionMode === 'component' ? pickerSelection : undefined);
|
|
344
435
|
}, children: t('apply') })] })] }));
|
|
345
436
|
const Picker = (_jsxs(_Fragment, { children: [_jsx(StyledInputButton, { "data-testid": testIds.openClosePicker, variant: 'simple', icon: true, ref: setButtonEl, onClick: () => {
|
|
346
437
|
setOpen(cur => !cur);
|