@pega/cosmos-react-core 9.0.0-build.9.1 → 9.0.0-build.9.11

package/lib/components/AppShell/AppHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAevD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA4G9D,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAgBvD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAiH9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -6,11 +6,13 @@ import SearchInput from '../SearchInput';
 import { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import { ThemeOverride } from '../Configuration';
+import useThemeMode from '../../hooks/useThemeMode';
 import AppShellOperator from './Operator';
 import ContextSwitcher from './ContextSwitcher';
 import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator, StyledAppHeaderLogo } from './AppHeader.styles';
 import AppShellContext from './AppShellContext';
 import { getHeaderTheme } from './style-utils';
+import ThemeSwitcher from './ThemeSwitcher';
 const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, imageAltText, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage }, ref) {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
@@ -26,10 +28,11 @@ const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { co
             setSearchContainerEl(null);
         }
     }, [searchPage, searchContainer, setSearchContainerEl]);
+    const { themeMode, onThemeModeChange } = useThemeMode();
     let appInfoAs = 'div';
     if (href)
         appInfoAs = 'a';
-    return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: [(fullImageSrc || imageSrc) && (_jsx(Flex, { container: { alignItems: 'center' }, as: StyledAppHeaderLogo, children: _jsx(Image, { src: fullImageSrc || imageSrc, alt: imageAltText ?? t('application_logo') }) })), _jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: operator.avatar })] }) }));
+    return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: [(fullImageSrc || imageSrc) && (_jsx(Flex, { container: { alignItems: 'center' }, as: StyledAppHeaderLogo, children: _jsx(Image, { src: fullImageSrc || imageSrc, alt: imageAltText ?? t('application_logo') }) })), _jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: operator.avatar })] }) }));
 });
 export default AppHeader;
 //# sourceMappingURL=AppHeader.js.map

package/lib/components/AppShell/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator,\n  StyledAppHeaderLogo\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\n    imageAltText,\n    href,\n    onClick,\n    portalName,\n    target,\n    appNameHidden,\n    operator,\n    searchInput,\n    searchLabel,\n    searchPage\n  }: AppHeaderProps,\n  ref: Ref<Element>\n) {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n  const theme = useTheme();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n  useEffect(() => {\n    if (searchPage && searchContainer) {\n      setSearchContainerEl(searchContainer);\n    } else {\n      setSearchContainerEl(null);\n    }\n  }, [searchPage, searchContainer, setSearchContainerEl]);\n\n  let appInfoAs: ElementType = 'div';\n  if (href) appInfoAs = 'a';\n  return (\n    <ThemeOverride theme={headerTheme}>\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        drawerOpen={drawerOpen}\n        ref={ref}\n      >\n        {contexts && contexts.length > 1 && onContextClick && (\n          <ContextSwitcher\n            contexts={contexts}\n            onContextClick={onContextClick}\n            label={contextSwitcherLabel}\n          />\n        )}\n\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={appInfoAs}\n            href={href}\n            onClick={href ? onClick : undefined}\n            target={target}\n          >\n            {(fullImageSrc || imageSrc) && (\n              <Flex container={{ alignItems: 'center' }} as={StyledAppHeaderLogo}>\n                <Image src={fullImageSrc || imageSrc} alt={imageAltText ?? t('application_logo')} />\n              </Flex>\n            )}\n            <StyledAppHeaderText\n              as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n              variant='primary'\n            >\n              {appName}\n            </StyledAppHeaderText>\n            {portalName && (\n              <StyledAppHeaderText\n                as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n                variant='secondary'\n              >\n                {portalName}\n              </StyledAppHeaderText>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n          name={operator.name}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    </ThemeOverride>\n  );\n});\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\nimport useThemeMode from '../../hooks/useThemeMode';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator,\n  StyledAppHeaderLogo\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\nimport ThemeSwitcher from './ThemeSwitcher';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\n    imageAltText,\n    href,\n    onClick,\n    portalName,\n    target,\n    appNameHidden,\n    operator,\n    searchInput,\n    searchLabel,\n    searchPage\n  }: AppHeaderProps,\n  ref: Ref<Element>\n) {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n  const theme = useTheme();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n  useEffect(() => {\n    if (searchPage && searchContainer) {\n      setSearchContainerEl(searchContainer);\n    } else {\n      setSearchContainerEl(null);\n    }\n  }, [searchPage, searchContainer, setSearchContainerEl]);\n\n  const { themeMode, onThemeModeChange } = useThemeMode();\n\n  let appInfoAs: ElementType = 'div';\n  if (href) appInfoAs = 'a';\n  return (\n    <ThemeOverride theme={headerTheme}>\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        drawerOpen={drawerOpen}\n        ref={ref}\n      >\n        {contexts && contexts.length > 1 && onContextClick && (\n          <ContextSwitcher\n            contexts={contexts}\n            onContextClick={onContextClick}\n            label={contextSwitcherLabel}\n          />\n        )}\n\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={appInfoAs}\n            href={href}\n            onClick={href ? onClick : undefined}\n            target={target}\n          >\n            {(fullImageSrc || imageSrc) && (\n              <Flex container={{ alignItems: 'center' }} as={StyledAppHeaderLogo}>\n                <Image src={fullImageSrc || imageSrc} alt={imageAltText ?? t('application_logo')} />\n              </Flex>\n            )}\n            <StyledAppHeaderText\n              as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n              variant='primary'\n            >\n              {appName}\n            </StyledAppHeaderText>\n            {portalName && (\n              <StyledAppHeaderText\n                as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n                variant='secondary'\n              >\n                {portalName}\n              </StyledAppHeaderText>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\n        {onThemeModeChange && (\n          <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n        )}\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n          name={operator.name}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    </ThemeOverride>\n  );\n});\n\nexport default AppHeader;\n"]}

package/lib/components/AppShell/ThemeSwitcher.d.ts

@@ -0,0 +1,9 @@
+import type { BaseProps, ForwardRefForwardPropsComponent, NoChildrenProp, TestIdProp } from '../../types';
+import { type ConfigurationProps } from '../Configuration';
+export interface ThemeSwitcherProps extends BaseProps, NoChildrenProp, TestIdProp {
+    themeMode: NonNullable<ConfigurationProps['themeMode']>;
+    onThemeModeChange: (mode: ThemeSwitcherProps['themeMode']) => void;
+}
+declare const ThemeSwitcher: ForwardRefForwardPropsComponent<ThemeSwitcherProps>;
+export default ThemeSwitcher;
+//# sourceMappingURL=ThemeSwitcher.d.ts.map

package/lib/components/AppShell/ThemeSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAErB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAa1E,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC/E,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;IACxD,iBAAiB,EAAE,CAAC,IAAI,EAAE,kBAAkB,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACpE;AAED,QAAA,MAAM,aAAa,EAAE,+BAA+B,CAAC,kBAAkB,CAgEtE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/AppShell/ThemeSwitcher.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo } from 'react';
+import { menuHelpers } from '../Menu';
+import { useI18n, useTestIds } from '../../hooks';
+import Flex from '../Flex';
+import { ThemeOverride } from '../Configuration';
+import MenuButton from '../MenuButton';
+import { withTestIds } from '../../utils';
+import Icon from '../Icon';
+import { getThemeSwitcherTestIds } from './ThemeSwitcher.test-ids';
+const ThemeModeIconMap = {
+    light: 'sun',
+    dark: 'moon',
+    system: 'circle-mixed-left'
+};
+const ThemeSwitcher = withTestIds(forwardRef(function ThemeSwitcher({ testId, themeMode, onThemeModeChange }) {
+    const t = useI18n();
+    const testIds = useTestIds(testId, getThemeSwitcherTestIds);
+    const [items, setItems] = useState(() => [
+        {
+            id: 'light',
+            primary: 'Light',
+            visual: _jsx(Icon, { name: ThemeModeIconMap.light, set: 'budicon' }),
+            selected: themeMode === 'light'
+        },
+        {
+            id: 'dark',
+            primary: 'Dark',
+            visual: _jsx(Icon, { name: ThemeModeIconMap.dark, set: 'budicon' }),
+            selected: themeMode === 'dark'
+        },
+        {
+            id: 'system',
+            primary: 'System',
+            visual: _jsx(Icon, { name: ThemeModeIconMap.system, set: 'budicon' }),
+            selected: !themeMode || themeMode === 'system'
+        }
+    ]);
+    const handleMenuItemClick = (id) => {
+        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));
+        onThemeModeChange?.(id);
+    };
+    const selectedThemeIcon = useMemo(() => {
+        const selected = menuHelpers.getSelected(items)[0];
+        return selected
+            ? ThemeModeIconMap[selected.id]
+            : ThemeModeIconMap.system;
+    }, [items]);
+    return (_jsx(Flex, { container: {
+            alignItems: 'center'
+        }, children: _jsx(ThemeOverride, { theme: { base: { 'icon-set': 'budicon' } }, children: _jsx(MenuButton, { text: t('theme_mode'), "data-testid": testIds.root, icon: selectedThemeIcon, iconOnly: true, variant: 'simple', menu: {
+                    mode: 'single-select',
+                    items,
+                    onItemClick: handleMenuItemClick
+                } }) }) }));
+}), getThemeSwitcherTestIds);
+export default ThemeSwitcher;
+//# sourceMappingURL=ThemeSwitcher.js.map

package/lib/components/AppShell/ThemeSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.js","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useMemo } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { menuHelpers } from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport type { MenuProps } from '../Menu/Menu.types';\nimport { useI18n, useTestIds } from '../../hooks';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp,\n  RefElement,\n  TestIdProp\n} from '../../types';\nimport Flex from '../Flex';\nimport { ThemeOverride, type ConfigurationProps } from '../Configuration';\nimport MenuButton from '../MenuButton';\nimport { withTestIds } from '../../utils';\nimport Icon from '../Icon';\n\nimport { getThemeSwitcherTestIds } from './ThemeSwitcher.test-ids';\n\nconst ThemeModeIconMap = {\n  light: 'sun',\n  dark: 'moon',\n  system: 'circle-mixed-left'\n} as const;\n\nexport interface ThemeSwitcherProps extends BaseProps, NoChildrenProp, TestIdProp {\n  themeMode: NonNullable<ConfigurationProps['themeMode']>;\n  onThemeModeChange: (mode: ThemeSwitcherProps['themeMode']) => void;\n}\n\nconst ThemeSwitcher: ForwardRefForwardPropsComponent<ThemeSwitcherProps> = withTestIds(\n  forwardRef<RefElement<ThemeSwitcherProps>, PropsWithoutRef<ThemeSwitcherProps>>(\n    function ThemeSwitcher({ testId, themeMode, onThemeModeChange }) {\n      const t = useI18n();\n      const testIds = useTestIds(testId, getThemeSwitcherTestIds);\n\n      const [items, setItems] = useState<MenuProps['items']>(() => [\n        {\n          id: 'light',\n          primary: 'Light',\n          visual: <Icon name={ThemeModeIconMap.light} set='budicon' />,\n          selected: themeMode === 'light'\n        },\n        {\n          id: 'dark',\n          primary: 'Dark',\n          visual: <Icon name={ThemeModeIconMap.dark} set='budicon' />,\n          selected: themeMode === 'dark'\n        },\n        {\n          id: 'system',\n          primary: 'System',\n          visual: <Icon name={ThemeModeIconMap.system} set='budicon' />,\n          selected: !themeMode || themeMode === 'system'\n        }\n      ]);\n\n      const handleMenuItemClick = (id: MenuItemProps['id']) => {\n        setItems(cur => menuHelpers.selectItem(cur, id, 'single-select'));\n        onThemeModeChange?.(id as ThemeSwitcherProps['themeMode']);\n      };\n\n      const selectedThemeIcon = useMemo(() => {\n        const selected = menuHelpers.getSelected(items)[0];\n        return selected\n          ? ThemeModeIconMap[selected.id as keyof typeof ThemeModeIconMap]\n          : ThemeModeIconMap.system;\n      }, [items]);\n\n      return (\n        <Flex\n          container={{\n            alignItems: 'center'\n          }}\n        >\n          <ThemeOverride theme={{ base: { 'icon-set': 'budicon' } }}>\n            <MenuButton\n              text={t('theme_mode')}\n              data-testid={testIds.root}\n              icon={selectedThemeIcon}\n              iconOnly\n              variant='simple'\n              menu={{\n                mode: 'single-select',\n                items,\n                onItemClick: handleMenuItemClick\n              }}\n            />\n          </ThemeOverride>\n        </Flex>\n      );\n    }\n  ),\n  getThemeSwitcherTestIds\n);\n\nexport default ThemeSwitcher;\n"]}

package/lib/components/AppShell/ThemeSwitcher.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getThemeSwitcherTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly []>;
+//# sourceMappingURL=ThemeSwitcher.test-ids.d.ts.map

package/lib/components/AppShell/ThemeSwitcher.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,mGAA+C,CAAC"}

package/lib/components/AppShell/ThemeSwitcher.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '../../utils';
+export const getThemeSwitcherTestIds = createTestIds('theme-switcher', []);
+//# sourceMappingURL=ThemeSwitcher.test-ids.js.map

package/lib/components/AppShell/ThemeSwitcher.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.test-ids.js","sourceRoot":"","sources":["../../../src/components/AppShell/ThemeSwitcher.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAC,gBAAgB,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getThemeSwitcherTestIds = createTestIds('theme-switcher', [] as const);\n"]}

package/lib/components/Configuration/Configuration.d.ts

@@ -17,6 +17,10 @@ export interface ConfigurationProps {
     translations?: Translation;
     /** Theme object used to override any or all Cosmos theme properties. */
     theme?: DefaultSettableTheme;
+    /** Theme mode for the application. Can be 'light', 'dark', or 'system'. */
+    themeMode?: 'light' | 'dark' | 'system';
+    /** Callback function triggered when the theme mode changes. */
+    onThemeModeChange?: (mode: NonNullable<ConfigurationProps['themeMode']>) => void;
     /** Disables loading Open Sans or Inter from Google Fonts. Only takes effect on the root configuration. */
     disableDefaultFontLoading?: boolean;
     /** List of style sheets to inject in style sheet target. */
@@ -53,6 +57,8 @@ export interface ConfigurationContextValue {
     direction: NonNullable<ConfigurationProps['direction']>;
     translations: TranslationPack;
     themeMachine: ThemeMachineLike<DefaultThemeDefinition>;
+    themeMode: NonNullable<ConfigurationProps['themeMode']>;
+    onThemeModeChange: ConfigurationProps['onThemeModeChange'];
     styleSheetTarget: ConfigurationProps['styleSheetTarget'];
     portalTarget: ConfigurationProps['portalTarget'];
     loadedRef: MutableRefObject<boolean>;

package/lib/components/Configuration/Configuration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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"}

package/lib/components/Configuration/Configuration.js

@@ -17,6 +17,8 @@ export const ConfigurationContext = createContext({
     direction: directionOfLocale(defaultLocale),
     translations: DefaultTranslation,
     themeMachine: BaseThemeMachine,
+    themeMode: 'system',
+    onThemeModeChange: undefined,
     styleSheetTarget: documentIsAvailable ? document.head : undefined,
     portalTarget: documentIsAvailable ? document.body : undefined,
     loadedRef: { current: false },
@@ -64,7 +66,7 @@ if (windowIsAvailable) {
         };
     }
 }
-const Configuration = forwardRef(function Configuration({ children, locale, direction, translations: customTranslations, theme, disableDefaultFontLoading, styleSheets: styleSheetURLs, styleSheetTarget, portalTarget, renderNativeControls, testIds, id }, ref) {
+const Configuration = forwardRef(function Configuration({ children, locale, direction, translations: customTranslations, theme, themeMode, onThemeModeChange, disableDefaultFontLoading, styleSheets: styleSheetURLs, styleSheetTarget, portalTarget, renderNativeControls, testIds, id }, ref) {
     const context = windowIsAvailable
         ? window.cosmos.configurationContext ?? ConfigurationContext
         : ConfigurationContext;
@@ -154,6 +156,8 @@ const Configuration = forwardRef(function Configuration({ children, locale, dire
                     direction: direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),
                     translations,
                     themeMachine,
+                    themeMode: themeMode ?? ctx.themeMode,
+                    onThemeModeChange: onThemeModeChange ?? ctx.onThemeModeChange,
                     styleSheetTarget: resolvedStyleSheetTarget,
                     portalTarget: resolvedPortalTarget,
                     loadedRef: ctx.loadedRef,

package/lib/components/Configuration/Configuration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useContext, useMemo, useEffect, useState, forwardRef } from 'react';\nimport type { ReactNode, Context, MutableRefObject, Ref, PropsWithoutRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\nimport type { StyleSheetManagerProps } from 'styled-components';\n\nimport '../../init';\nimport { GlobalStyle } from '../../styles';\nimport { ThemeMachine, BaseThemeMachine } from '../../theme';\nimport type { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';\nimport {\n  createTranslationPack,\n  DefaultTranslation,\n  direction as directionOfLocale\n} from '../../i18n';\nimport type { Translation, TranslationPack } from '../../i18n';\nimport { documentIsAvailable, navigatorIsAvailable, windowIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport useElement from '../../hooks/useElement';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport type PegaConnectedWatcher from './connected-watcher';\n\nimport './connected-watcher';\n\nexport interface ConfigurationProps {\n  /** Any components or nodes that should be impacted by the settings applied by this Configuration component. */\n  children: ReactNode;\n  /** User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php). */\n  locale?: string;\n  /** Override rendering direction of the document. Direction will be based on the locale if now provided. */\n  direction?: 'ltr' | 'rtl';\n  /** Object with (partial) translations. */\n  translations?: Translation;\n  /** Theme object used to override any or all Cosmos theme properties. */\n  theme?: DefaultSettableTheme;\n  /** Disables loading Open Sans or Inter from Google Fonts. Only takes effect on the root configuration. */\n  disableDefaultFontLoading?: boolean;\n  /** List of style sheets to inject in style sheet target. */\n  styleSheets?: string[];\n  /**\n   * Target element for loading styles related to `styled-components`.\n   * @deprecated\n   */\n  styleSheetTarget?: StyleSheetManagerProps['target'];\n  /**\n   * Target element for rendering a `ReactDOM` portal.\n   * @deprecated\n   */\n  portalTarget?: Parameters<typeof createPortal>[1];\n  /**\n   * Use native HTML5 controls for inputs instead of rich ones.\n   * @default false\n   */\n  renderNativeControls?: boolean;\n  /** String to identify this configuration instance. */\n  id?: string;\n  /**\n   * Enable/disable testId attribute rendering for all components.\n   * @default true\n   */\n  testIds?: boolean;\n  /**\n   * Ref for the configuration root.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface ConfigurationContextValue {\n  locale: string;\n  direction: NonNullable<ConfigurationProps['direction']>;\n  translations: TranslationPack;\n  themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n  styleSheetTarget: ConfigurationProps['styleSheetTarget'];\n  portalTarget: ConfigurationProps['portalTarget'];\n  loadedRef: MutableRefObject<boolean>;\n  renderNativeControls: boolean;\n  testIds: NonNullable<ConfigurationProps['testIds']>;\n  /** @internal */\n  mountedStyleSheetManagers?: (typeof StyleSheetManager)[];\n  /** @internal */\n  initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n  locale: defaultLocale,\n  direction: directionOfLocale(defaultLocale),\n  translations: DefaultTranslation,\n  themeMachine: BaseThemeMachine,\n  styleSheetTarget: documentIsAvailable ? document.head : undefined,\n  portalTarget: documentIsAvailable ? document.body : undefined,\n  loadedRef: { current: false },\n  renderNativeControls: false,\n  testIds: true,\n  mountedStyleSheetManagers: [],\n  initialized: false\n});\n\nconst legacyMetaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface LegacyCosmosInstace {\n  version: string;\n}\n\ndeclare global {\n  interface Window {\n    [legacyMetaKey]?: {\n      push: (instance: LegacyCosmosInstace) => void;\n    };\n  }\n}\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance extends LegacyCosmosInstace {\n  mountedConfigs: string[];\n  mountOrder: string[];\n  mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n  version: pkg.version,\n  mountedConfigs: [],\n  mountOrder: [],\n  mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n  mountedConfigs.add(sym);\n  instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n  const description = sym.description ?? 'Unknown';\n\n  instance.mountOrder.push(description);\n\n  if (!(description in instance.mountCount)) {\n    instance.mountCount[description] = 0;\n  }\n  instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n  mountedConfigs.delete(sym);\n  instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n  export interface CosmosGlobals {\n    instances?: (CosmosInstance | LegacyCosmosInstace)[];\n    configurationContext?: Context<ConfigurationContextValue>;\n  }\n}\n\nif (windowIsAvailable) {\n  if (!window.cosmos.instances) {\n    window.cosmos.instances = [];\n  }\n\n  window.cosmos.instances.push(instance);\n\n  if (Array.isArray(window[legacyMetaKey])) {\n    window.cosmos.instances.push(...window[legacyMetaKey]);\n    delete window[legacyMetaKey];\n  }\n\n  if (!window[legacyMetaKey]) {\n    window[legacyMetaKey] = {\n      push: inst => {\n        window.cosmos.instances?.push(inst);\n      }\n    };\n  }\n}\n\nconst Configuration = forwardRef(function Configuration(\n  {\n    children,\n    locale,\n    direction,\n    translations: customTranslations,\n    theme,\n    disableDefaultFontLoading,\n    styleSheets: styleSheetURLs,\n    styleSheetTarget,\n    portalTarget,\n    renderNativeControls,\n    testIds,\n    id\n  }: PropsWithoutRef<ConfigurationProps>,\n  ref: ConfigurationProps['ref']\n) {\n  const context = windowIsAvailable\n    ? window.cosmos.configurationContext ?? ConfigurationContext\n    : ConfigurationContext;\n  const ctx = useContext(context);\n  const themeMachine = theme\n    ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n    : ctx.themeMachine;\n  const translations = useMemo(\n    () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n    [ctx.translations, customTranslations]\n  );\n\n  const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>();\n  const [connectedWatcherEl, setConnectedWatcherEl] = useElement<PegaConnectedWatcher>();\n  // State tracking if the DOM nodes are connected. Only used to trigger rerenders when connected state changes.\n  const [, setConnected] = useState<boolean | null>(null);\n  const configRootRef = useConsolidatedRef<HTMLDivElement>(setWrapperEl, ref);\n\n  useEffect(() => {\n    if (!connectedWatcherEl) return;\n\n    const connectDisconnectListener = () => {\n      setConnected(connectedWatcherEl.isConnected);\n    };\n\n    connectedWatcherEl.addEventListener('connect-disconnect', connectDisconnectListener);\n\n    return () => {\n      connectedWatcherEl.removeEventListener('connect-disconnect', connectDisconnectListener);\n    };\n  }, [connectedWatcherEl]);\n\n  // Determine valid style sheet and portal target with ShadowDOM handling.\n  const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {\n    // When rendering on the server, or before the wrapper is in the DOM, just bail.\n    if (!documentIsAvailable || !wrapperEl?.isConnected) return [undefined, undefined];\n\n    const rootNode = wrapperEl.getRootNode();\n\n    // When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.\n    const defaultStyleSheetTarget = rootNode instanceof ShadowRoot ? rootNode : document.head;\n    const defaultPortalTarget = rootNode instanceof ShadowRoot ? rootNode : document.body;\n\n    // Currently passed prop or previous context value\n    const requestedStyleSheetTarget = styleSheetTarget ?? ctx.styleSheetTarget;\n    const requestedPortalTarget = portalTarget ?? ctx.portalTarget;\n\n    // If the \"requested\" target is within the root node, it is valid, so use that, otherwise fallback to the default.\n    return [\n      rootNode.contains(requestedStyleSheetTarget ?? null)\n        ? requestedStyleSheetTarget\n        : defaultStyleSheetTarget,\n      rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget\n    ];\n  }, [\n    wrapperEl,\n    wrapperEl?.isConnected,\n    styleSheetTarget,\n    portalTarget,\n    ctx.styleSheetTarget,\n    ctx.portalTarget\n  ]);\n\n  // Load global fonts and styles if this configuration instance is...\n  const shouldInitialize = useMemo(\n    () =>\n      // the first configuration instance or...\n      !ctx.initialized ||\n      // is not within the same root node as the previous configuration instance.\n      !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()),\n    [ctx.initialized, wrapperEl]\n  );\n\n  // If we need to reinitialize, clear the mounted StyleSheetManagers.\n  const mountedStyleSheetManagers = shouldInitialize ? [] : ctx.mountedStyleSheetManagers;\n\n  // Check if this StyleSheetManager is mounted above this Configuration.\n  const stylesheetManagerMounted = useMemo(\n    () => !!mountedStyleSheetManagers?.includes(StyleSheetManager),\n    [mountedStyleSheetManagers]\n  );\n\n  useEffect(() => {\n    const sym = Symbol(id);\n    mountConfig(sym);\n\n    return () => {\n      unmountConfig(sym);\n    };\n  }, [id]);\n\n  const wrappedChildren = shouldInitialize ? (\n    <>\n      {!disableDefaultFontLoading &&\n        resolvedStyleSheetTarget &&\n        createPortal(\n          <link\n            rel='stylesheet'\n            href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,400..700&display=swap'\n            data-cosmos-global-style\n          />,\n          resolvedStyleSheetTarget\n        )}\n      <GlobalStyle />\n      {children}\n    </>\n  ) : (\n    <>{children}</>\n  );\n\n  const styledWrappedChildren = stylesheetManagerMounted ? (\n    wrappedChildren\n  ) : (\n    <StyleSheetManager\n      disableVendorPrefixes\n      target={\n        // Target must be undefined in a JSDOM environment due to Styled Components server mode handling.\n        navigatorIsAvailable &&\n        resolvedStyleSheetTarget?.isConnected &&\n        !navigator.userAgent.includes('jsdom')\n          ? resolvedStyleSheetTarget\n          : undefined\n      }\n    >\n      {wrappedChildren}\n    </StyleSheetManager>\n  );\n\n  return (\n    <div\n      data-config-root\n      // Need to use inline styles because the StyleSheetManager is configured within this div.\n      style={{ display: 'contents' }}\n      ref={configRootRef}\n    >\n      <context.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          locale: locale ?? ctx.locale,\n          direction:\n            direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n          translations,\n          themeMachine,\n          styleSheetTarget: resolvedStyleSheetTarget,\n          portalTarget: resolvedPortalTarget,\n          loadedRef: ctx.loadedRef,\n          renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n          testIds: testIds ?? ctx.testIds,\n          mountedStyleSheetManagers: stylesheetManagerMounted\n            ? mountedStyleSheetManagers\n            : [...(mountedStyleSheetManagers ?? []), StyleSheetManager],\n          initialized: true\n        }}\n      >\n        <ThemeProvider theme={themeMachine.theme}>\n          {styleSheetURLs &&\n            resolvedStyleSheetTarget &&\n            createPortal(\n              styleSheetURLs.map(url => (\n                <link rel='stylesheet' href={url} key={url} data-cosmos-global-style />\n              )),\n              resolvedStyleSheetTarget\n            )}\n          {styledWrappedChildren}\n        </ThemeProvider>\n      </context.Provider>\n      <pega-connected-watcher ref={setConnectedWatcherEl} style={{ display: 'none' }} />\n    </div>\n  );\n});\n\nexport default Configuration;\n"]}
+{"version":3,"file":"Configuration.js","sourceRoot":"","sources":["../../../src/components/Configuration/Configuration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, useContext, useMemo, useEffect, useState, forwardRef } from 'react';\nimport type { ReactNode, Context, MutableRefObject, Ref, PropsWithoutRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ThemeProvider, StyleSheetManager } from 'styled-components';\nimport type { StyleSheetManagerProps } from 'styled-components';\n\nimport '../../init';\nimport { GlobalStyle } from '../../styles';\nimport { ThemeMachine, BaseThemeMachine } from '../../theme';\nimport type { ThemeMachineLike, DefaultSettableTheme, DefaultThemeDefinition } from '../../theme';\nimport {\n  createTranslationPack,\n  DefaultTranslation,\n  direction as directionOfLocale\n} from '../../i18n';\nimport type { Translation, TranslationPack } from '../../i18n';\nimport { documentIsAvailable, navigatorIsAvailable, windowIsAvailable } from '../../utils';\nimport pkg from '../../../package.json';\nimport useElement from '../../hooks/useElement';\nimport { useConsolidatedRef } from '../../hooks';\n\nimport type PegaConnectedWatcher from './connected-watcher';\n\nimport './connected-watcher';\n\nexport interface ConfigurationProps {\n  /** Any components or nodes that should be impacted by the settings applied by this Configuration component. */\n  children: ReactNode;\n  /** User locale as defined in [BCP-47](https://www.techonthenet.com/js/language_tags.php). */\n  locale?: string;\n  /** Override rendering direction of the document. Direction will be based on the locale if now provided. */\n  direction?: 'ltr' | 'rtl';\n  /** Object with (partial) translations. */\n  translations?: Translation;\n  /** Theme object used to override any or all Cosmos theme properties. */\n  theme?: DefaultSettableTheme;\n  /** Theme mode for the application. Can be 'light', 'dark', or 'system'. */\n  themeMode?: 'light' | 'dark' | 'system';\n  /** Callback function triggered when the theme mode changes. */\n  onThemeModeChange?: (mode: NonNullable<ConfigurationProps['themeMode']>) => void;\n  /** Disables loading Open Sans or Inter from Google Fonts. Only takes effect on the root configuration. */\n  disableDefaultFontLoading?: boolean;\n  /** List of style sheets to inject in style sheet target. */\n  styleSheets?: string[];\n  /**\n   * Target element for loading styles related to `styled-components`.\n   * @deprecated\n   */\n  styleSheetTarget?: StyleSheetManagerProps['target'];\n  /**\n   * Target element for rendering a `ReactDOM` portal.\n   * @deprecated\n   */\n  portalTarget?: Parameters<typeof createPortal>[1];\n  /**\n   * Use native HTML5 controls for inputs instead of rich ones.\n   * @default false\n   */\n  renderNativeControls?: boolean;\n  /** String to identify this configuration instance. */\n  id?: string;\n  /**\n   * Enable/disable testId attribute rendering for all components.\n   * @default true\n   */\n  testIds?: boolean;\n  /**\n   * Ref for the configuration root.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface ConfigurationContextValue {\n  locale: string;\n  direction: NonNullable<ConfigurationProps['direction']>;\n  translations: TranslationPack;\n  themeMachine: ThemeMachineLike<DefaultThemeDefinition>;\n  themeMode: NonNullable<ConfigurationProps['themeMode']>;\n  onThemeModeChange: ConfigurationProps['onThemeModeChange'];\n  styleSheetTarget: ConfigurationProps['styleSheetTarget'];\n  portalTarget: ConfigurationProps['portalTarget'];\n  loadedRef: MutableRefObject<boolean>;\n  renderNativeControls: boolean;\n  testIds: NonNullable<ConfigurationProps['testIds']>;\n  /** @internal */\n  mountedStyleSheetManagers?: (typeof StyleSheetManager)[];\n  /** @internal */\n  initialized: boolean;\n}\n\nconst defaultLocale = navigatorIsAvailable ? navigator.language : 'en';\n\nexport const ConfigurationContext = createContext<ConfigurationContextValue>({\n  locale: defaultLocale,\n  direction: directionOfLocale(defaultLocale),\n  translations: DefaultTranslation,\n  themeMachine: BaseThemeMachine,\n  themeMode: 'system',\n  onThemeModeChange: undefined,\n  styleSheetTarget: documentIsAvailable ? document.head : undefined,\n  portalTarget: documentIsAvailable ? document.body : undefined,\n  loadedRef: { current: false },\n  renderNativeControls: false,\n  testIds: true,\n  mountedStyleSheetManagers: [],\n  initialized: false\n});\n\nconst legacyMetaKey = Symbol.for('@pega/cosmos-react-core.metadata');\n\ninterface LegacyCosmosInstace {\n  version: string;\n}\n\ndeclare global {\n  interface Window {\n    [legacyMetaKey]?: {\n      push: (instance: LegacyCosmosInstace) => void;\n    };\n  }\n}\n\nconst mountedConfigs = new Set<symbol>();\n\ninterface CosmosInstance extends LegacyCosmosInstace {\n  mountedConfigs: string[];\n  mountOrder: string[];\n  mountCount: Record<string, number>;\n}\n\nconst instance: CosmosInstance = {\n  version: pkg.version,\n  mountedConfigs: [],\n  mountOrder: [],\n  mountCount: {}\n};\n\nconst mountConfig = (sym: symbol) => {\n  mountedConfigs.add(sym);\n  instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n\n  const description = sym.description ?? 'Unknown';\n\n  instance.mountOrder.push(description);\n\n  if (!(description in instance.mountCount)) {\n    instance.mountCount[description] = 0;\n  }\n  instance.mountCount[description] += 1;\n};\n\nconst unmountConfig = (sym: symbol) => {\n  mountedConfigs.delete(sym);\n  instance.mountedConfigs = [...mountedConfigs].map(i => i.description ?? 'Unknown');\n};\n\ndeclare module '../../init' {\n  export interface CosmosGlobals {\n    instances?: (CosmosInstance | LegacyCosmosInstace)[];\n    configurationContext?: Context<ConfigurationContextValue>;\n  }\n}\n\nif (windowIsAvailable) {\n  if (!window.cosmos.instances) {\n    window.cosmos.instances = [];\n  }\n\n  window.cosmos.instances.push(instance);\n\n  if (Array.isArray(window[legacyMetaKey])) {\n    window.cosmos.instances.push(...window[legacyMetaKey]);\n    delete window[legacyMetaKey];\n  }\n\n  if (!window[legacyMetaKey]) {\n    window[legacyMetaKey] = {\n      push: inst => {\n        window.cosmos.instances?.push(inst);\n      }\n    };\n  }\n}\n\nconst Configuration = forwardRef(function Configuration(\n  {\n    children,\n    locale,\n    direction,\n    translations: customTranslations,\n    theme,\n    themeMode,\n    onThemeModeChange,\n    disableDefaultFontLoading,\n    styleSheets: styleSheetURLs,\n    styleSheetTarget,\n    portalTarget,\n    renderNativeControls,\n    testIds,\n    id\n  }: PropsWithoutRef<ConfigurationProps>,\n  ref: ConfigurationProps['ref']\n) {\n  const context = windowIsAvailable\n    ? window.cosmos.configurationContext ?? ConfigurationContext\n    : ConfigurationContext;\n  const ctx = useContext(context);\n  const themeMachine = theme\n    ? new ThemeMachine<DefaultThemeDefinition>({ theme, parent: ctx.themeMachine })\n    : ctx.themeMachine;\n  const translations = useMemo(\n    () => createTranslationPack({ ...ctx.translations, ...customTranslations }),\n    [ctx.translations, customTranslations]\n  );\n\n  const [wrapperEl, setWrapperEl] = useElement<HTMLDivElement>();\n  const [connectedWatcherEl, setConnectedWatcherEl] = useElement<PegaConnectedWatcher>();\n  // State tracking if the DOM nodes are connected. Only used to trigger rerenders when connected state changes.\n  const [, setConnected] = useState<boolean | null>(null);\n  const configRootRef = useConsolidatedRef<HTMLDivElement>(setWrapperEl, ref);\n\n  useEffect(() => {\n    if (!connectedWatcherEl) return;\n\n    const connectDisconnectListener = () => {\n      setConnected(connectedWatcherEl.isConnected);\n    };\n\n    connectedWatcherEl.addEventListener('connect-disconnect', connectDisconnectListener);\n\n    return () => {\n      connectedWatcherEl.removeEventListener('connect-disconnect', connectDisconnectListener);\n    };\n  }, [connectedWatcherEl]);\n\n  // Determine valid style sheet and portal target with ShadowDOM handling.\n  const [resolvedStyleSheetTarget, resolvedPortalTarget] = useMemo(() => {\n    // When rendering on the server, or before the wrapper is in the DOM, just bail.\n    if (!documentIsAvailable || !wrapperEl?.isConnected) return [undefined, undefined];\n\n    const rootNode = wrapperEl.getRootNode();\n\n    // When within the ShadowDOM, the default target is the ShadowRoot, otherwise default to head/body element.\n    const defaultStyleSheetTarget = rootNode instanceof ShadowRoot ? rootNode : document.head;\n    const defaultPortalTarget = rootNode instanceof ShadowRoot ? rootNode : document.body;\n\n    // Currently passed prop or previous context value\n    const requestedStyleSheetTarget = styleSheetTarget ?? ctx.styleSheetTarget;\n    const requestedPortalTarget = portalTarget ?? ctx.portalTarget;\n\n    // If the \"requested\" target is within the root node, it is valid, so use that, otherwise fallback to the default.\n    return [\n      rootNode.contains(requestedStyleSheetTarget ?? null)\n        ? requestedStyleSheetTarget\n        : defaultStyleSheetTarget,\n      rootNode.contains(requestedPortalTarget ?? null) ? requestedPortalTarget : defaultPortalTarget\n    ];\n  }, [\n    wrapperEl,\n    wrapperEl?.isConnected,\n    styleSheetTarget,\n    portalTarget,\n    ctx.styleSheetTarget,\n    ctx.portalTarget\n  ]);\n\n  // Load global fonts and styles if this configuration instance is...\n  const shouldInitialize = useMemo(\n    () =>\n      // the first configuration instance or...\n      !ctx.initialized ||\n      // is not within the same root node as the previous configuration instance.\n      !!(wrapperEl && wrapperEl.getRootNode() !== ctx.styleSheetTarget?.getRootNode()),\n    [ctx.initialized, wrapperEl]\n  );\n\n  // If we need to reinitialize, clear the mounted StyleSheetManagers.\n  const mountedStyleSheetManagers = shouldInitialize ? [] : ctx.mountedStyleSheetManagers;\n\n  // Check if this StyleSheetManager is mounted above this Configuration.\n  const stylesheetManagerMounted = useMemo(\n    () => !!mountedStyleSheetManagers?.includes(StyleSheetManager),\n    [mountedStyleSheetManagers]\n  );\n\n  useEffect(() => {\n    const sym = Symbol(id);\n    mountConfig(sym);\n\n    return () => {\n      unmountConfig(sym);\n    };\n  }, [id]);\n\n  const wrappedChildren = shouldInitialize ? (\n    <>\n      {!disableDefaultFontLoading &&\n        resolvedStyleSheetTarget &&\n        createPortal(\n          <link\n            rel='stylesheet'\n            href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..700&family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,400..700&display=swap'\n            data-cosmos-global-style\n          />,\n          resolvedStyleSheetTarget\n        )}\n      <GlobalStyle />\n      {children}\n    </>\n  ) : (\n    <>{children}</>\n  );\n\n  const styledWrappedChildren = stylesheetManagerMounted ? (\n    wrappedChildren\n  ) : (\n    <StyleSheetManager\n      disableVendorPrefixes\n      target={\n        // Target must be undefined in a JSDOM environment due to Styled Components server mode handling.\n        navigatorIsAvailable &&\n        resolvedStyleSheetTarget?.isConnected &&\n        !navigator.userAgent.includes('jsdom')\n          ? resolvedStyleSheetTarget\n          : undefined\n      }\n    >\n      {wrappedChildren}\n    </StyleSheetManager>\n  );\n\n  return (\n    <div\n      data-config-root\n      // Need to use inline styles because the StyleSheetManager is configured within this div.\n      style={{ display: 'contents' }}\n      ref={configRootRef}\n    >\n      <context.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          locale: locale ?? ctx.locale,\n          direction:\n            direction ?? (locale !== undefined ? directionOfLocale(locale) : ctx.direction),\n          translations,\n          themeMachine,\n          themeMode: themeMode ?? ctx.themeMode,\n          onThemeModeChange: onThemeModeChange ?? ctx.onThemeModeChange,\n          styleSheetTarget: resolvedStyleSheetTarget,\n          portalTarget: resolvedPortalTarget,\n          loadedRef: ctx.loadedRef,\n          renderNativeControls: renderNativeControls ?? ctx.renderNativeControls,\n          testIds: testIds ?? ctx.testIds,\n          mountedStyleSheetManagers: stylesheetManagerMounted\n            ? mountedStyleSheetManagers\n            : [...(mountedStyleSheetManagers ?? []), StyleSheetManager],\n          initialized: true\n        }}\n      >\n        <ThemeProvider theme={themeMachine.theme}>\n          {styleSheetURLs &&\n            resolvedStyleSheetTarget &&\n            createPortal(\n              styleSheetURLs.map(url => (\n                <link rel='stylesheet' href={url} key={url} data-cosmos-global-style />\n              )),\n              resolvedStyleSheetTarget\n            )}\n          {styledWrappedChildren}\n        </ThemeProvider>\n      </context.Provider>\n      <pega-connected-watcher ref={setConnectedWatcherEl} style={{ display: 'none' }} />\n    </div>\n  );\n});\n\nexport default Configuration;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EAEjB,GAAG,EAEH,QAAQ,EACR,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAMnD,OAAO,KAAK,eAAe,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AA0BnD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC5C;AAED,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,aAAa,CAAC;QACxB,aAAa,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC;KACzD,CAAC;IACF,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,oDAAoD;IACpD,MAAM,CAAC,EAAE,GAAG,CAAC,oBAAoB,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;;;;AA8WF,wBAA2D"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EAEjB,GAAG,EAEH,QAAQ,EACR,cAAc,EACd,aAAa,EACd,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAMnD,OAAO,KAAK,eAAe,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AA2BnD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC5C;AAED,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,aAAa,CAAC;QACxB,aAAa,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC;KACzD,CAAC;IACF,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,oDAAoD;IACpD,MAAM,CAAC,EAAE,GAAG,CAAC,oBAAoB,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,eAAe,qHAE3B,CAAC;;;;AAmXF,wBAA2D"}

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

@@ -1,8 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useImperativeHandle, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useEffect, useState, Fragment } from 'react';
 import styled from 'styled-components';
 import { defaultThemeProp } from '../../../theme';
-import { useConfiguration, useFocusWithin, useI18n, useOuterEvent, useTestIds } from '../../../hooks';
+import { useConfiguration, useFocusWithin, useI18n, useOuterEvent, useTestIds, useUID } from '../../../hooks';
 import FormField from '../../FormField';
 import Flex from '../../Flex';
 import Icon, { registerIcon } from '../../Icon';
@@ -11,6 +11,7 @@ import DatePicker from '../Picker/DatePicker';
 import { StyledFormControl } from '../../FormControl';
 import { createClassName, withTestIds } from '../../../utils';
 import { getDateInputTestIds } from '../DateTime.test-ids';
+import HiddenText from '../../HiddenText';
 import { getDateFormat, getDateTimeParts, parsePastedTextToDate, parseToDate, validateDate, generatePickerButtonAriaLabel } from './utils';
 import StyledDateTime, { StyledDatePickerDialog, StyledDialogContent, StyledInputButton, StyledInputContainer } from './DateTime.styles';
 import useAutoFocusNextInput from './useAutoFocusNextInput';
@@ -53,6 +54,7 @@ const DateInput = forwardRef(function DateInput(props, ref) {
     const t = useI18n();
     const { testId, value, min, max, id, label, labelHidden, info = getDateFormat(t, locale, 'date'), status, required, readOnly, disabled, onChange, onFocus, onBlur, onResolveSuggestion, showWeekNumber, picker: { renderer: PickerComp = DatePicker, rendererProps = {} } = {}, autoFocus, additionalInfo, handle, className, ...restProps } = props;
     const testIds = useTestIds(testId, getDateInputTestIds);
+    const yearPartId = useUID();
     const containerRef = useRef(null);
     const date = value !== undefined && value !== '' ? parseToDate(value) : undefined;
     const [yearInputRef, monthInputRef, dayInputRef] = [
@@ -132,7 +134,7 @@ const DateInput = forwardRef(function DateInput(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: date?.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: date ? date.getUTCMonth() + 1 : undefined, onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: 1, max: 12, ref: monthInputRef }, 'month'));
-    const YearInput = (_jsx(PartInput, { "data-testid": testIds.controlYear, placeholder: t('year_placeholder'), "aria-label": displayNames.of('year'), value: date?.getUTCFullYear(), onChange: onInputChange, size: 4, maxLength: 4, padWithZeros: false, readOnly: readOnly, min: 1, ref: yearInputRef }, 'year'));
+    const YearInput = (_jsxs(Fragment, { children: [_jsx(PartInput, { "data-testid": testIds.controlYear, placeholder: t('year_placeholder'), "aria-label": displayNames.of('year'), "aria-describedby": yearPartId, value: date?.getUTCFullYear(), onChange: onInputChange, size: 4, maxLength: 4, padWithZeros: false, readOnly: readOnly, min: 1, max: 9999, ref: yearInputRef }), _jsx(HiddenText, { id: yearPartId, children: t('year_input_description') })] }, 'year'));
     useFocusWithin([containerRef], onFocusChange);
     useImperativeHandle(handle, () => ({ setOpen }));
     const PickerButton = (_jsxs(_Fragment, { children: [_jsx(StyledInputButton, { "data-testid": testIds.openClosePicker, variant: 'simple', icon: true, ref: setDatePickerButtonEl, onClick: () => setOpen(cur => !cur), "aria-label": generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open), readOnly: readOnly, disabled: disabled, children: _jsx(Icon, { name: 'calendar' }) }), open && datePickerButtonEl && (_jsx(StyledDatePickerDialog, { ref: setPopoverRef, target: datePickerButtonEl, placement: 'bottom-end', "aria-label": t('choose_date'), children: _jsx(Flex, { container: { direction: 'column' }, as: StyledDialogContent, children: _jsx(PickerComp, { testId: testIds.picker, selected: currentlySelectedDate(), min: min, max: max, showWeekNumber: showWeekNumber, ...rendererProps, onChange: selected => {

package/lib/components/DateTime/Input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useImperativeHandle, useEffect, useState } from 'react';\nimport type {\n  ClipboardEvent,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  RefObject,\n  Dispatch,\n  SetStateAction,\n  ComponentType\n} from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport {\n  useConfiguration,\n  useFocusWithin,\n  useI18n,\n  useOuterEvent,\n  useTestIds\n} from '../../../hooks';\nimport type { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Flex from '../../Flex';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as calendarIcon from '../../Icon/icons/calendar.icon';\nimport DatePicker from '../Picker/DatePicker';\nimport type DatePickerProps from '../Picker/DatePicker.types';\nimport { StyledFormControl } from '../../FormControl';\nimport type { FormControlProps } from '../../FormControl';\nimport type DateTimeProps from '../DateTime.types';\nimport type { DateTimeCallbackParameter } from '../DateTime.types';\nimport { createClassName, withTestIds } from '../../../utils';\nimport { getDateInputTestIds } from '../DateTime.test-ids';\n\nimport {\n  getDateFormat,\n  getDateTimeParts,\n  parsePastedTextToDate,\n  parseToDate,\n  validateDate,\n  generatePickerButtonAriaLabel\n} from './utils';\nimport StyledDateTime, {\n  StyledDatePickerDialog,\n  StyledDialogContent,\n  StyledInputButton,\n  StyledInputContainer\n} from './DateTime.styles';\nimport useAutoFocusNextInput from './useAutoFocusNextInput';\nimport PartInput from './PartInput';\nimport usePickerButton from './usePickerButton';\nimport type { DateParts } from './DateTimeInput.types';\n\nregisterIcon(calendarIcon);\n\nexport interface DateInputHandleValue {\n  setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nexport interface DateInputProps extends DateTimeProps {\n  /**\n   * Display additional column with week number in date picker popover.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n  /** Changes default date picker */\n  picker?: {\n    renderer: ComponentType;\n    rendererProps?: Partial<DatePickerProps> & ForwardProps;\n  };\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Additional properties for imperative control. */\n  handle?: Ref<DateInputHandleValue>;\n}\n\nexport const StyledDateInput = styled(StyledDateTime)<DateInputProps>`\n  padding-inline-end: 0;\n`;\n\nStyledDateInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  { year, month: monthIndex, day }: DateParts<string | undefined>\n): DateTimeCallbackParameter => {\n  if ([year, monthIndex, day].every(Boolean)) {\n    if (!validateDate(Number(year), Number(monthIndex) + 1, Number(day))) {\n      return {\n        valueAsISOString: '',\n        valueAsTimestamp: NaN,\n        state: 'invalid'\n      };\n    }\n\n    date.setUTCFullYear(Number(year), Number(monthIndex), Number(day));\n    return {\n      valueAsISOString: date.toISOString(),\n      valueAsTimestamp: date.getTime()\n    };\n  }\n  if ([year, monthIndex, day].every(p => !p)) {\n    return {\n      valueAsISOString: undefined,\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst DateInput: FunctionComponent<DateInputProps & ForwardProps> = forwardRef(function DateInput(\n  props: PropsWithoutRef<DateInputProps>,\n  ref: Ref<HTMLFieldSetElement>\n) {\n  const { locale } = useConfiguration();\n  const t = useI18n();\n  const {\n    testId,\n    value,\n    min,\n    max,\n    id,\n    label,\n    labelHidden,\n    info = getDateFormat(t, locale, 'date'),\n    status,\n    required,\n    readOnly,\n    disabled,\n    onChange,\n    onFocus,\n    onBlur,\n    onResolveSuggestion,\n    showWeekNumber,\n    picker: { renderer: PickerComp = DatePicker, rendererProps = {} } = {},\n    autoFocus,\n    additionalInfo,\n    handle,\n    className,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getDateInputTestIds);\n\n  const containerRef = useRef<HTMLElement>(null);\n\n  const date = value !== undefined && value !== '' ? parseToDate(value) : undefined;\n\n  const [yearInputRef, monthInputRef, dayInputRef] = [\n    useRef<HTMLInputElement>(null),\n    useRef<HTMLInputElement>(null),\n    useRef<HTMLInputElement>(null)\n  ];\n\n  const [hasValue, setHasValue] = useState(!!date);\n  useEffect(() => {\n    setHasValue(\n      !!(yearInputRef.current?.value || monthInputRef.current?.value || dayInputRef.current?.value)\n    );\n  }, [date]);\n\n  const pickParts = (): DateParts<string | undefined> => {\n    return {\n      day: dayInputRef.current?.value || undefined,\n      month: monthInputRef.current?.value\n        ? (Number(monthInputRef.current.value) - 1).toString()\n        : undefined,\n      year: yearInputRef.current?.value || undefined\n    };\n  };\n\n  const currentlySelectedDate = () => {\n    const parts = pickParts();\n    if (Object.values(parts).every(Boolean)) {\n      const year = Number(parts.year);\n      const monthIndex = Number(parts.month);\n      const day = Number(parts.day);\n\n      return validateDate(year, monthIndex + 1, day)\n        ? new Date(Date.UTC(year, monthIndex, day))\n        : undefined;\n    }\n  };\n\n  const [open, setOpen, , setPopoverRef, datePickerButtonEl, setDatePickerButtonEl] =\n    usePickerButton();\n\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n\n  const onFocusChange = (focused: boolean) => {\n    const callbackParam = convertToCallbackParameter(\n      date ? new Date(date) : new Date(),\n      pickParts()\n    );\n    if (onFocus && focused) onFocus(callbackParam);\n    if (!focused) {\n      if (inputContainerRef.current) inputContainerRef.current.scrollTop = 0;\n      onBlur?.(callbackParam);\n    }\n  };\n\n  const onInputChange = () => {\n    onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n    datePickerButtonEl?.setAttribute(\n      'aria-label',\n      generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open)\n    );\n    if (dayInputRef.current?.value || monthInputRef.current?.value || yearInputRef.current?.value) {\n      setHasValue(true);\n    } else {\n      setHasValue(false);\n    }\n  };\n\n  const setInputValue = (newValue?: Date) => {\n    if (dayInputRef.current && monthInputRef.current && yearInputRef.current) {\n      dayInputRef.current.value = newValue?.getUTCDate().toString().padStart(2, '0') ?? '';\n      monthInputRef.current.value =\n        (newValue && (newValue.getUTCMonth() + 1).toString().padStart(2, '0')) ?? '';\n      yearInputRef.current.value = newValue?.getUTCFullYear().toString() ?? '';\n      setHasValue(!!newValue);\n    }\n  };\n\n  const onPaste = (e: ClipboardEvent) => {\n    const text = e.clipboardData.getData('text');\n    const newDate = parsePastedTextToDate(text, locale, date || new Date());\n    if (newDate) {\n      e.preventDefault();\n      setInputValue(newDate);\n      onInputChange();\n    }\n  };\n\n  // autoclose picker on focusing out\n  useOuterEvent('focusin', [containerRef], e => {\n    if (containerRef.current?.contains(e.relatedTarget as HTMLElement)) setOpen(false);\n  });\n\n  const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n  const DayInput = (\n    <PartInput\n      data-testid={testIds.controlDay}\n      key='day'\n      placeholder={t('day_placeholder')}\n      aria-label={displayNames.of('day')}\n      value={date?.getUTCDate()}\n      onChange={onInputChange}\n      size={2}\n      maxLength={2}\n      readOnly={readOnly}\n      min={1}\n      max={31}\n      ref={dayInputRef}\n    />\n  );\n\n  const MonthInput = (\n    <PartInput\n      data-testid={testIds.controlMonth}\n      key='month'\n      placeholder={t('month_placeholder')}\n      aria-label={displayNames.of('month')}\n      value={date ? date.getUTCMonth() + 1 : undefined}\n      onChange={onInputChange}\n      size={2}\n      maxLength={2}\n      readOnly={readOnly}\n      min={1}\n      max={12}\n      ref={monthInputRef}\n    />\n  );\n\n  const YearInput = (\n    <PartInput\n      data-testid={testIds.controlYear}\n      key='year'\n      placeholder={t('year_placeholder')}\n      aria-label={displayNames.of('year')}\n      value={date?.getUTCFullYear()}\n      onChange={onInputChange}\n      size={4}\n      maxLength={4}\n      padWithZeros={false}\n      readOnly={readOnly}\n      min={1}\n      ref={yearInputRef}\n    />\n  );\n\n  useFocusWithin([containerRef], onFocusChange);\n\n  useImperativeHandle(handle, () => ({ setOpen }));\n\n  const PickerButton = (\n    <>\n      <StyledInputButton\n        data-testid={testIds.openClosePicker}\n        variant='simple'\n        icon\n        ref={setDatePickerButtonEl}\n        onClick={() => setOpen(cur => !cur)}\n        aria-label={generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open)}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        <Icon name='calendar' />\n      </StyledInputButton>\n      {open && datePickerButtonEl && (\n        <StyledDatePickerDialog\n          ref={setPopoverRef}\n          target={datePickerButtonEl}\n          placement='bottom-end'\n          aria-label={t('choose_date')}\n        >\n          <Flex container={{ direction: 'column' }} as={StyledDialogContent}>\n            <PickerComp\n              testId={testIds.picker}\n              selected={currentlySelectedDate()}\n              min={min}\n              max={max}\n              showWeekNumber={showWeekNumber}\n              {...rendererProps}\n              onChange={selected => {\n                setInputValue(selected);\n                setOpen(false);\n                setTimeout(() => datePickerButtonEl?.focus());\n                onInputChange();\n                rendererProps?.onChange?.(selected);\n              }}\n            />\n          </Flex>\n        </StyledDatePickerDialog>\n      )}\n    </>\n  );\n\n  const orderedRefs: RefObject<HTMLInputElement>[] = [];\n\n  const Comp = (\n    <Flex\n      data-testid={label ? undefined : testIds.root}\n      as={StyledDateInput}\n      forwardedAs={StyledFormControl}\n      hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n      container={{ alignItems: 'center', wrap: 'nowrap', justify: 'between' }}\n      status={status}\n      readOnly={readOnly}\n      disabled={disabled}\n      ref={containerRef}\n      onClick={(e: MouseEvent) => {\n        if (e.target === containerRef.current) orderedRefs[0].current?.focus();\n      }}\n      {...restProps}\n      className={createClassName('date-input', className, { status })}\n    >\n      <Flex\n        ref={inputContainerRef}\n        as={StyledInputContainer}\n        container={{ alignItems: 'center', wrap: 'wrap' }}\n        onPaste={onPaste}\n      >\n        {getDateTimeParts(locale).map(part => {\n          switch (part) {\n            case 'day':\n              orderedRefs.push(dayInputRef);\n              return DayInput;\n            case 'month':\n              orderedRefs.push(monthInputRef);\n              return MonthInput;\n            case 'year':\n              orderedRefs.push(yearInputRef);\n              return YearInput;\n            default:\n              return part;\n          }\n        })}\n      </Flex>\n      {!readOnly && (\n        <Flex container>\n          {hasValue && (\n            <StyledInputButton\n              data-testid={testIds.clearCurrentDate}\n              aria-label={t('clear_current_date')}\n              icon\n              onClick={() => {\n                setInputValue(undefined);\n                setTimeout(() => datePickerButtonEl?.focus());\n                onInputChange();\n              }}\n              variant='simple'\n              compact\n              label={t('clear')}\n            >\n              <Icon name='times' />\n            </StyledInputButton>\n          )}\n          {PickerButton}\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  useEffect(() => {\n    if (autoFocus) orderedRefs[0].current?.focus();\n  }, [autoFocus]);\n\n  const { description, descriptionID } = useAutoFocusNextInput(orderedRefs);\n\n  return label ? (\n    <>\n      <FormField\n        testId={testIds}\n        as='fieldset'\n        aria-labelledby={id}\n        labelAs='legend'\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        readOnly={readOnly}\n        status={status}\n        required={required}\n        disabled={disabled}\n        onResolveSuggestion={onResolveSuggestion}\n        additionalInfo={additionalInfo}\n        aria-describedby={descriptionID}\n        ref={ref}\n      >\n        {Comp}\n      </FormField>\n      {description}\n    </>\n  ) : (\n    Comp\n  );\n});\n\nexport default withTestIds(DateInput, getDateInputTestIds);\n"]}
+{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useImperativeHandle, useEffect, useState, Fragment } from 'react';\nimport type {\n  ClipboardEvent,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  RefObject,\n  Dispatch,\n  SetStateAction,\n  ComponentType\n} from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport {\n  useConfiguration,\n  useFocusWithin,\n  useI18n,\n  useOuterEvent,\n  useTestIds,\n  useUID\n} from '../../../hooks';\nimport type { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Flex from '../../Flex';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as calendarIcon from '../../Icon/icons/calendar.icon';\nimport DatePicker from '../Picker/DatePicker';\nimport type DatePickerProps from '../Picker/DatePicker.types';\nimport { StyledFormControl } from '../../FormControl';\nimport type { FormControlProps } from '../../FormControl';\nimport type DateTimeProps from '../DateTime.types';\nimport type { DateTimeCallbackParameter } from '../DateTime.types';\nimport { createClassName, withTestIds } from '../../../utils';\nimport { getDateInputTestIds } from '../DateTime.test-ids';\nimport HiddenText from '../../HiddenText';\n\nimport {\n  getDateFormat,\n  getDateTimeParts,\n  parsePastedTextToDate,\n  parseToDate,\n  validateDate,\n  generatePickerButtonAriaLabel\n} from './utils';\nimport StyledDateTime, {\n  StyledDatePickerDialog,\n  StyledDialogContent,\n  StyledInputButton,\n  StyledInputContainer\n} from './DateTime.styles';\nimport useAutoFocusNextInput from './useAutoFocusNextInput';\nimport PartInput from './PartInput';\nimport usePickerButton from './usePickerButton';\nimport type { DateParts } from './DateTimeInput.types';\n\nregisterIcon(calendarIcon);\n\nexport interface DateInputHandleValue {\n  setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nexport interface DateInputProps extends DateTimeProps {\n  /**\n   * Display additional column with week number in date picker popover.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n  /** Changes default date picker */\n  picker?: {\n    renderer: ComponentType;\n    rendererProps?: Partial<DatePickerProps> & ForwardProps;\n  };\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Additional properties for imperative control. */\n  handle?: Ref<DateInputHandleValue>;\n}\n\nexport const StyledDateInput = styled(StyledDateTime)<DateInputProps>`\n  padding-inline-end: 0;\n`;\n\nStyledDateInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  { year, month: monthIndex, day }: DateParts<string | undefined>\n): DateTimeCallbackParameter => {\n  if ([year, monthIndex, day].every(Boolean)) {\n    if (!validateDate(Number(year), Number(monthIndex) + 1, Number(day))) {\n      return {\n        valueAsISOString: '',\n        valueAsTimestamp: NaN,\n        state: 'invalid'\n      };\n    }\n\n    date.setUTCFullYear(Number(year), Number(monthIndex), Number(day));\n    return {\n      valueAsISOString: date.toISOString(),\n      valueAsTimestamp: date.getTime()\n    };\n  }\n  if ([year, monthIndex, day].every(p => !p)) {\n    return {\n      valueAsISOString: undefined,\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst DateInput: FunctionComponent<DateInputProps & ForwardProps> = forwardRef(function DateInput(\n  props: PropsWithoutRef<DateInputProps>,\n  ref: Ref<HTMLFieldSetElement>\n) {\n  const { locale } = useConfiguration();\n  const t = useI18n();\n  const {\n    testId,\n    value,\n    min,\n    max,\n    id,\n    label,\n    labelHidden,\n    info = getDateFormat(t, locale, 'date'),\n    status,\n    required,\n    readOnly,\n    disabled,\n    onChange,\n    onFocus,\n    onBlur,\n    onResolveSuggestion,\n    showWeekNumber,\n    picker: { renderer: PickerComp = DatePicker, rendererProps = {} } = {},\n    autoFocus,\n    additionalInfo,\n    handle,\n    className,\n    ...restProps\n  } = props;\n\n  const testIds = useTestIds(testId, getDateInputTestIds);\n  const yearPartId = useUID();\n\n  const containerRef = useRef<HTMLElement>(null);\n\n  const date = value !== undefined && value !== '' ? parseToDate(value) : undefined;\n\n  const [yearInputRef, monthInputRef, dayInputRef] = [\n    useRef<HTMLInputElement>(null),\n    useRef<HTMLInputElement>(null),\n    useRef<HTMLInputElement>(null)\n  ];\n\n  const [hasValue, setHasValue] = useState(!!date);\n  useEffect(() => {\n    setHasValue(\n      !!(yearInputRef.current?.value || monthInputRef.current?.value || dayInputRef.current?.value)\n    );\n  }, [date]);\n\n  const pickParts = (): DateParts<string | undefined> => {\n    return {\n      day: dayInputRef.current?.value || undefined,\n      month: monthInputRef.current?.value\n        ? (Number(monthInputRef.current.value) - 1).toString()\n        : undefined,\n      year: yearInputRef.current?.value || undefined\n    };\n  };\n\n  const currentlySelectedDate = () => {\n    const parts = pickParts();\n    if (Object.values(parts).every(Boolean)) {\n      const year = Number(parts.year);\n      const monthIndex = Number(parts.month);\n      const day = Number(parts.day);\n\n      return validateDate(year, monthIndex + 1, day)\n        ? new Date(Date.UTC(year, monthIndex, day))\n        : undefined;\n    }\n  };\n\n  const [open, setOpen, , setPopoverRef, datePickerButtonEl, setDatePickerButtonEl] =\n    usePickerButton();\n\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n\n  const onFocusChange = (focused: boolean) => {\n    const callbackParam = convertToCallbackParameter(\n      date ? new Date(date) : new Date(),\n      pickParts()\n    );\n    if (onFocus && focused) onFocus(callbackParam);\n    if (!focused) {\n      if (inputContainerRef.current) inputContainerRef.current.scrollTop = 0;\n      onBlur?.(callbackParam);\n    }\n  };\n\n  const onInputChange = () => {\n    onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n    datePickerButtonEl?.setAttribute(\n      'aria-label',\n      generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open)\n    );\n    if (dayInputRef.current?.value || monthInputRef.current?.value || yearInputRef.current?.value) {\n      setHasValue(true);\n    } else {\n      setHasValue(false);\n    }\n  };\n\n  const setInputValue = (newValue?: Date) => {\n    if (dayInputRef.current && monthInputRef.current && yearInputRef.current) {\n      dayInputRef.current.value = newValue?.getUTCDate().toString().padStart(2, '0') ?? '';\n      monthInputRef.current.value =\n        (newValue && (newValue.getUTCMonth() + 1).toString().padStart(2, '0')) ?? '';\n      yearInputRef.current.value = newValue?.getUTCFullYear().toString() ?? '';\n      setHasValue(!!newValue);\n    }\n  };\n\n  const onPaste = (e: ClipboardEvent) => {\n    const text = e.clipboardData.getData('text');\n    const newDate = parsePastedTextToDate(text, locale, date || new Date());\n    if (newDate) {\n      e.preventDefault();\n      setInputValue(newDate);\n      onInputChange();\n    }\n  };\n\n  // autoclose picker on focusing out\n  useOuterEvent('focusin', [containerRef], e => {\n    if (containerRef.current?.contains(e.relatedTarget as HTMLElement)) setOpen(false);\n  });\n\n  const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n  const DayInput = (\n    <PartInput\n      data-testid={testIds.controlDay}\n      key='day'\n      placeholder={t('day_placeholder')}\n      aria-label={displayNames.of('day')}\n      value={date?.getUTCDate()}\n      onChange={onInputChange}\n      size={2}\n      maxLength={2}\n      readOnly={readOnly}\n      min={1}\n      max={31}\n      ref={dayInputRef}\n    />\n  );\n\n  const MonthInput = (\n    <PartInput\n      data-testid={testIds.controlMonth}\n      key='month'\n      placeholder={t('month_placeholder')}\n      aria-label={displayNames.of('month')}\n      value={date ? date.getUTCMonth() + 1 : undefined}\n      onChange={onInputChange}\n      size={2}\n      maxLength={2}\n      readOnly={readOnly}\n      min={1}\n      max={12}\n      ref={monthInputRef}\n    />\n  );\n\n  const YearInput = (\n    <Fragment key='year'>\n      <PartInput\n        data-testid={testIds.controlYear}\n        placeholder={t('year_placeholder')}\n        aria-label={displayNames.of('year')}\n        aria-describedby={yearPartId}\n        value={date?.getUTCFullYear()}\n        onChange={onInputChange}\n        size={4}\n        maxLength={4}\n        padWithZeros={false}\n        readOnly={readOnly}\n        min={1}\n        max={9999}\n        ref={yearInputRef}\n      />\n      <HiddenText id={yearPartId}>{t('year_input_description')}</HiddenText>\n    </Fragment>\n  );\n\n  useFocusWithin([containerRef], onFocusChange);\n\n  useImperativeHandle(handle, () => ({ setOpen }));\n\n  const PickerButton = (\n    <>\n      <StyledInputButton\n        data-testid={testIds.openClosePicker}\n        variant='simple'\n        icon\n        ref={setDatePickerButtonEl}\n        onClick={() => setOpen(cur => !cur)}\n        aria-label={generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open)}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        <Icon name='calendar' />\n      </StyledInputButton>\n      {open && datePickerButtonEl && (\n        <StyledDatePickerDialog\n          ref={setPopoverRef}\n          target={datePickerButtonEl}\n          placement='bottom-end'\n          aria-label={t('choose_date')}\n        >\n          <Flex container={{ direction: 'column' }} as={StyledDialogContent}>\n            <PickerComp\n              testId={testIds.picker}\n              selected={currentlySelectedDate()}\n              min={min}\n              max={max}\n              showWeekNumber={showWeekNumber}\n              {...rendererProps}\n              onChange={selected => {\n                setInputValue(selected);\n                setOpen(false);\n                setTimeout(() => datePickerButtonEl?.focus());\n                onInputChange();\n                rendererProps?.onChange?.(selected);\n              }}\n            />\n          </Flex>\n        </StyledDatePickerDialog>\n      )}\n    </>\n  );\n\n  const orderedRefs: RefObject<HTMLInputElement>[] = [];\n\n  const Comp = (\n    <Flex\n      data-testid={label ? undefined : testIds.root}\n      as={StyledDateInput}\n      forwardedAs={StyledFormControl}\n      hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n      container={{ alignItems: 'center', wrap: 'nowrap', justify: 'between' }}\n      status={status}\n      readOnly={readOnly}\n      disabled={disabled}\n      ref={containerRef}\n      onClick={(e: MouseEvent) => {\n        if (e.target === containerRef.current) orderedRefs[0].current?.focus();\n      }}\n      {...restProps}\n      className={createClassName('date-input', className, { status })}\n    >\n      <Flex\n        ref={inputContainerRef}\n        as={StyledInputContainer}\n        container={{ alignItems: 'center', wrap: 'wrap' }}\n        onPaste={onPaste}\n      >\n        {getDateTimeParts(locale).map(part => {\n          switch (part) {\n            case 'day':\n              orderedRefs.push(dayInputRef);\n              return DayInput;\n            case 'month':\n              orderedRefs.push(monthInputRef);\n              return MonthInput;\n            case 'year':\n              orderedRefs.push(yearInputRef);\n              return YearInput;\n            default:\n              return part;\n          }\n        })}\n      </Flex>\n      {!readOnly && (\n        <Flex container>\n          {hasValue && (\n            <StyledInputButton\n              data-testid={testIds.clearCurrentDate}\n              aria-label={t('clear_current_date')}\n              icon\n              onClick={() => {\n                setInputValue(undefined);\n                setTimeout(() => datePickerButtonEl?.focus());\n                onInputChange();\n              }}\n              variant='simple'\n              compact\n              label={t('clear')}\n            >\n              <Icon name='times' />\n            </StyledInputButton>\n          )}\n          {PickerButton}\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  useEffect(() => {\n    if (autoFocus) orderedRefs[0].current?.focus();\n  }, [autoFocus]);\n\n  const { description, descriptionID } = useAutoFocusNextInput(orderedRefs);\n\n  return label ? (\n    <>\n      <FormField\n        testId={testIds}\n        as='fieldset'\n        aria-labelledby={id}\n        labelAs='legend'\n        label={label}\n        labelHidden={labelHidden}\n        id={id}\n        info={info}\n        readOnly={readOnly}\n        status={status}\n        required={required}\n        disabled={disabled}\n        onResolveSuggestion={onResolveSuggestion}\n        additionalInfo={additionalInfo}\n        aria-describedby={descriptionID}\n        ref={ref}\n      >\n        {Comp}\n      </FormField>\n      {description}\n    </>\n  ) : (\n    Comp\n  );\n});\n\nexport default withTestIds(DateInput, getDateInputTestIds);\n"]}

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":"AACA,OAAO,KAAK,EAEV,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAgB1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAwBnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,OAAO,KAAK,EAAa,aAAa,EAAa,MAAM,uBAAuB,CAAC;AAIjF,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;CACrD;AAED,eAAO,MAAM,mBAAmB,yHAK9B,CAAC;AAwBH,eAAO,MAAM,0BAA0B,GACrC,MAAM,IAAI,EACV,OAAO,aAAa,CAAC,MAAM,GAAG,SAAS,CAAC,KACvC,yBAgEF,CAAC;;;;AA8lBF,wBAAmE"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAiB1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,aAAa,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAyBnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,OAAO,KAAK,EAAa,aAAa,EAAa,MAAM,uBAAuB,CAAC;AAIjF,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;CACrD;AAED,eAAO,MAAM,mBAAmB,yHAK9B,CAAC;AAwBH,eAAO,MAAM,0BAA0B,GACrC,MAAM,IAAI,EACV,OAAO,aAAa,CAAC,MAAM,GAAG,SAAS,CAAC,KACvC,yBAgEF,CAAC;;;;AAmmBF,wBAAmE"}

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { StyledFormControl } from '../../FormControl';
 import FormField from '../../FormField';
-import { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n, useOuterEvent, useTestIds } from '../../../hooks';
+import { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n, useOuterEvent, useTestIds, useUID } from '../../../hooks';
 import Select, { Option } from '../../Select';
 import Flex from '../../Flex';
 import Button from '../../Button';
@@ -13,6 +13,7 @@ import DatePicker from '../Picker/DatePicker';
 import { createClassName, hasProp, withTestIds } from '../../../utils';
 import { getDateTimeInputTestIds } from '../DateTime.test-ids';
 import { getAdjustedUTCDateTime } from '../utils';
+import HiddenText from '../../HiddenText';
 import StyledDateTime, { StyledClearNowButtonsContainer, StyledDatePickerDialog, StyledDialogContent, StyledInputButton, StyledInputContainer } from './DateTime.styles';
 import { generatePickerButtonAriaLabel, getDateFormat, getDateTimeParts, getTimeOptions, is12HClockFormat, parsePastedTextToDate, parseToDate, validateDate, validateDateTime, validateTime } from './utils';
 import useAutoFocusNextInput from './useAutoFocusNextInput';
@@ -96,6 +97,7 @@ const DateTimeInput = forwardRef(function DateTimeInput(props, ref) {
     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, onChange, onFocus, onBlur, onResolveSuggestion, additionalInfo, autoFocus, className, ...restProps } = props;
     const testIds = useTestIds(testId, getDateTimeInputTestIds);
+    const yearPartId = useUID();
     const containerRef = useConsolidatedRef(ref);
     const dateTime = value !== undefined && value !== '' ? parseToDate(value) : undefined;
     const is12h = clockFormat ? clockFormat === 12 : is12HClockFormat(locale);
@@ -257,7 +259,7 @@ 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 = (_jsx(PartInput, { "data-testid": testIds.controlYear, placeholder: t('year_placeholder'), "aria-label": displayNames.of('year'), value: dateTime?.getUTCFullYear(), onChange: onInputChange, size: 4, maxLength: 4, padWithZeros: false, readOnly: readOnly, min: 1, ref: yearInputRef }, 'year'));
+    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: 1, max: 9999, 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'));