@vkontakte/vkui 8.1.2 → 8.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "8.1.2",
+  "version": "8.2.0",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",
@@ -57,7 +57,7 @@
     "clear": "yarn run -T shx rm -rf dist/* || yarn run -T shx true",
     "docker:clear-playwright-cache": "../../scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker rm -f && docker volume rm vkui_package_vkui_playwright_cache",
     "postcss": "yarn run -T cross-env NODE_ENV=production concurrently 'yarn:postcss:*'",
-    "postcss:bundle": "yarn run -T rspack --config rspack.styles.config.mjs",
+    "postcss:bundle": "yarn run -T rspack --config rspack.styles.config.ts",
     "postcss:modules": "yarn run -T postcss './src/**/*.css' --base ./src --dir ./dist/cssm --config ./cssm",
     "swc-base": "yarn run -T cross-env NODE_ENV=production swc src/ --config-file package.swcrc --extensions .tsx,.jsx,.ts,.js --strip-leading-paths",
     "swc:es6": "yarn swc-base -d dist -s",
@@ -68,8 +68,8 @@
     "test:ci": "yarn run -T vitest run --reporter=json --outputFile=../../test-results.json --coverage",
     "test:e2e": "../../scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e-update": "../../scripts/generate_env_docker.sh -u && docker compose --env-file=./.env.docker up --abort-on-container-exit",
-    "test:e2e:ci": "yarn run -T cross-env NODE_OPTIONS='--experimental-transform-types --disable-warning=ExperimentalWarning' playwright test --config playwright-ct.config.ts",
-    "test:e2e:ci:ui": "yarn run -T cross-env NODE_OPTIONS='--experimental-transform-types --disable-warning=ExperimentalWarning' playwright test --ui --ui-port=4300 --ui-host=0.0.0.0 --config playwright-ct.config.ts",
+    "test:e2e:ci": "yarn run -T playwright test --config playwright-ct.config.ts",
+    "test:e2e:ci:ui": "yarn run test:e2e:ci --ui --ui-port=4300 --ui-host=0.0.0.0",
     "test:e2e:ui": "../../scripts/generate_env_docker.sh -r test:e2e:ci:ui && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e-update:ci": "yarn run test:e2e:ci --update-snapshots",
     "lint:generated-files": "yarn run -T concurrently 'yarn:lint:generated-files:*'",
@@ -94,12 +94,13 @@
     "@vkontakte/vkui-floating-ui": "^0.2.8"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.11",
+    "@biomejs/biome": "^2.4.15",
     "@types/node": "*",
     "@types/postcss-import": "^14.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^6.0.2"
+    "size-limit": "^12.1.0",
+    "typescript": "^6.0.3"
   },
   "size-limit": [
     {

package/src/components/ActionSheet/ActionSheet.tsx

@@ -8,6 +8,7 @@ import { useStableCallback } from '../../hooks/useStableCallback';
 import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import type { HasRootRef } from '../../types';
 import type { ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';
+import type { AppRootPortalProps } from '../AppRoot/AppRootPortal';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
@@ -57,6 +58,7 @@ export interface ActionSheetProps
       | 'restoreFocus'
       | 'autoFocus'
     >,
+    Pick<AppRootPortalProps, 'usePortal'>,
     Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {
   /**
    * Заголовок всплывающего окна.
@@ -100,11 +102,11 @@ export interface ActionSheetProps
    */
   mode?: 'sheet' | 'menu' | undefined;
   /**
-   * @deprecated Since 7.3.0.  Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.3.0.  Будет удалено в **VKUI v9**.
    */
   mount?: boolean | undefined; // TODO [>=9]: удалить неиспользуемое свойство
   /**
-   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.
    */
   disabled?: boolean | undefined; // TODO [>=9]: удалить неиспользуемое свойство
 }
@@ -125,6 +127,7 @@ export const ActionSheet = ({
   mode: modeProp,
   onClose: onCloseProp,
   onClosed,
+  usePortal,
   ...restProps
 }: ActionSheetProps): React.ReactNode => {
   const platform = usePlatform();
@@ -225,7 +228,7 @@ export const ActionSheet = ({
   );
 
   return (
-    <AppRootPortal>
+    <AppRootPortal usePortal={usePortal}>
       <PopoutWrapper
         noBackground={mode === 'menu'}
         closing={Boolean(closedReason)}

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -11,12 +11,12 @@ import type {
 export interface DensityProps {
   /**
    * Тип размера экрана по горизонтали.
-   * @deprecated Since 8.0.0. Будет удалено в **VKUI v10** – используйте `sizeX="compact"` → `viewWidth={ViewWidth.MOBILE}` или `sizeX="compact"` → `viewWidth={ViewWidth.SMALL_TABLET}` (см. Https://github.com/VKCOM/VKUI/issues/9015).
+   * @deprecated Since 8.0.0. Будет удалено в **VKUI v10** – используйте `sizeX="compact"` → `viewWidth={ViewWidth.MOBILE}` или `sizeX="compact"` → `viewWidth={ViewWidth.SMALL_TABLET}` (https://github.com/VKCOM/VKUI/issues/9015).
    */
   sizeX?: SizeTypeValues | undefined; // TODO [>=10]: #9015 удалить свойство
   /**
    * Тип размера экрана по вертикали.
-   * @deprecated Since 8.0.0. Будет удалено в **VKUI v10** – используйте `density` (см. Https://github.com/VKCOM/VKUI/issues/9015).
+   * @deprecated Since 8.0.0. Будет удалено в **VKUI v10** – используйте `density` (https://github.com/VKCOM/VKUI/issues/9015).
    */
   sizeY?: SizeTypeValues | undefined; // TODO [>=10]: #9015 удалить свойство
   /**
@@ -39,7 +39,7 @@ export interface AdaptivityProps extends DensityProps {
    */
   hasPointer?: boolean | undefined;
   /**
-   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9** (см. Https://github.com/VKCOM/VKUI/pull/8490).
+   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9** (https://github.com/VKCOM/VKUI/pull/8490).
    */
   hasHover?: boolean | undefined; // TODO [>=9]: удалить неиспользуемое свойство
 }

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -37,12 +37,12 @@ export const AdaptivityProvider = ({
     if (process.env.NODE_ENV === 'development') {
       if (sizeXProp !== undefined) {
         warn(
-          'Свойство устарело начиная с 8.0.0 и будет удалено в **VKUI v10**. Для обратной совместимости, используйте `viewWidth={ViewWidth.MOBILE}` вместо `sizeX="compact"` и `viewWidth={ViewWidth.SMALL_TABLET}` вместо `sizeX="compact"` (см. Https://github.com/VKCOM/VKUI/issues/9015).',
+          'Свойство устарело начиная с 8.0.0 и будет удалено в **VKUI v10**. Для обратной совместимости, используйте `viewWidth={ViewWidth.MOBILE}` вместо `sizeX="compact"` и `viewWidth={ViewWidth.SMALL_TABLET}` вместо `sizeX="regular"` (см. https://github.com/VKCOM/VKUI/issues/9015).',
         );
       }
       if (sizeYProp !== undefined) {
         warn(
-          'Свойство устарело начиная с 8.0.0 и будет удалено в **VKUI v10**. Используйте `density` (см. Https://github.com/VKCOM/VKUI/issues/9015).',
+          'Свойство устарело начиная с 8.0.0 и будет удалено в **VKUI v10**. Используйте `density` (см. https://github.com/VKCOM/VKUI/issues/9015).',
         );
       }
       if (hasHover !== undefined) {

package/src/components/AppRoot/AppRoot.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';
 import { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';
 import { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';
 import { AppRootContext } from './AppRootContext';
@@ -102,7 +101,6 @@ export const AppRoot = ({
 }: AppRootProps): React.ReactNode => {
   const appRootRef = React.useRef<HTMLDivElement | null>(null);
 
-  const isKeyboardInputActiveRef = useKeyboardInputTracker();
   const safeAreaInsets = useSafeAreaInsetsMemo(safeAreaInsetsProp);
 
   const contextValue = React.useMemo(
@@ -114,20 +112,9 @@ export const AppRoot = ({
       mode,
       disablePortal,
       layout,
-      get keyboardInput() {
-        return isKeyboardInputActiveRef.current;
-      },
       userSelectMode,
     }),
-    [
-      portalRoot,
-      disablePortal,
-      isKeyboardInputActiveRef,
-      layout,
-      mode,
-      safeAreaInsets,
-      userSelectMode,
-    ],
+    [portalRoot, disablePortal, layout, mode, safeAreaInsets, userSelectMode],
   );
 
   /*

package/src/components/AppRoot/AppRootContext.ts

@@ -9,7 +9,6 @@ export interface AppRootContextInterface {
   safeAreaInsets?: SafeAreaInsets | undefined;
   embedded: boolean;
   mode: 'partial' | 'embedded' | 'full';
-  keyboardInput: boolean;
   disablePortal: boolean;
   layout?: 'card' | 'plain' | undefined;
   userSelectMode?: AppRootUserSelectMode | undefined;
@@ -26,7 +25,6 @@ export const DEFAULT_APP_ROOT_CONTEXT_VALUE: AppRootContextInterface = {
   portalRoot: null,
   safeAreaInsets: undefined,
   embedded: false,
-  keyboardInput: false,
   disablePortal: false,
 };
 

package/src/components/Calendar/Calendar.tsx

@@ -88,7 +88,7 @@ export interface CalendarProps
   /**
    * `aria-label` для изменения дня.
    *
-   * @deprecated Будет удалeно в **VKUI v9**.
+   * @deprecated Будет удалено в **VKUI v9**.
    * Использовалось для задания aria-label для контейнера дней в календаре.
    * Теперь этот контейнер является таблицей (с помощью role="grid") и
    * в aria-label рендерится текущий открытый в календаре месяц и год.
@@ -243,7 +243,7 @@ export const Calendar = ({
     if (timeZonedValue) {
       setViewDate(timeZonedValue);
     }
-  }, [timeZonedValue]);
+  }, [timeZonedValue, setViewDate]);
 
   if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {
     warn("Нельзя включить селекты выбора месяца/года, если размер календаря 's'", 'error');

package/src/components/CalendarDay/CalendarDay.tsx

@@ -2,12 +2,13 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useFocusVisible } from '../../hooks/useFocusVisible';
 import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
+import { useLocale } from '../../hooks/useLocale';
 import { cacheDateTimeFormat } from '../../lib/intlCache';
 import { mergeCalls } from '../../lib/mergeCalls';
 import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
-import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { Tappable } from '../Tappable/Tappable';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './CalendarDay.module.css';
@@ -140,7 +141,8 @@ export const CalendarDay = React.memo(
     'aria-colindex': colIndex,
     ...restProps
   }: CalendarDayProps) => {
-    const { locale, direction } = useConfigProvider();
+    const locale = useLocale();
+    const direction = useConfigDirection();
     const ref = React.useRef<HTMLElement>(null);
     const onClick = React.useCallback(() => onChange(day), [day, onChange]);
     const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);

package/src/components/CalendarDays/CalendarDays.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { classNames, isSameDate } from '@vkontakte/vkjs';
+import { useLocale } from '../../hooks/useLocale';
 import { useTodayDate } from '../../hooks/useTodayDate';
 import { getDaysNames, getWeeks } from '../../lib/calendar';
 import { isSameMonth } from '../../lib/date';
@@ -13,7 +14,6 @@ import {
   type CalendarDayProps,
   type CalendarDayTestsProps,
 } from '../CalendarDay/CalendarDay';
-import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -150,7 +150,7 @@ export const CalendarDays = ({
   dayTestId,
   ...props
 }: CalendarDaysProps): React.ReactNode => {
-  const { locale } = useConfigProvider();
+  const locale = useLocale();
   const now = useTodayDate(listenDayChangesForUpdate);
 
   const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -8,13 +8,14 @@ import {
   Icon20ChevronRightOutline,
 } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
+import { useLocale } from '../../hooks/useLocale';
 import { ViewWidth } from '../../lib/adaptivity';
 import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar';
 import { addMonths, setMonth, setYear, subMonths } from '../../lib/date';
 import { cacheDateTimeFormat } from '../../lib/intlCache';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
-import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
@@ -163,7 +164,8 @@ export const CalendarHeader = ({
   nextMonthButtonTestId,
   ...restProps
 }: CalendarHeaderProps): React.ReactNode => {
-  const { locale, direction } = useConfigProvider();
+  const locale = useLocale();
+  const direction = useConfigDirection();
 
   const onMonthsChange = React.useCallback(
     (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>

package/src/components/CalendarRange/CalendarRange.tsx

@@ -80,7 +80,7 @@ export interface CalendarRangeProps
   /**
    * `aria-label` для изменения дня.
    *
-   * @deprecated Since 7.4.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.4.0. Будет удалено в **VKUI v9**.
    *
    * Использовалось для задания aria-label для контейнера дней в календаре.
    * Теперь этот контейнер является таблицей (с помощью role="grid") и
@@ -100,7 +100,7 @@ export interface CalendarRangeProps
    */
   shouldDisableDate?: ((value: Date) => boolean) | undefined;
   /**
-   * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.3.0. Будет удалено в **VKUI v9**.
    */
   onClose?: (() => void) | undefined; // TODO [>=9]: удалить неиспользуемое свойство
 }

package/src/components/CalendarTime/CalendarTime.module.css

@@ -20,3 +20,41 @@
 .button {
   margin-inline-start: auto;
 }
+
+.inputPopDown {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.inputPopUp {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.popper {
+  box-sizing: border-box;
+  inline-size: 100%;
+  overflow: hidden;
+  background-color: var(--vkui--color_background_contrast_themed);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_field_border_alpha);
+  border-radius: 8px;
+  box-shadow: var(--vkui--elevation1);
+}
+
+.popperBottom {
+  border-block-start: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.popperTop {
+  inset-block-end: 100%;
+  border-block-end: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  box-shadow: var(--vkui--elevation1_invert_y);
+}
+
+.customScroll {
+  max-block-size: 184px;
+}

package/src/components/CalendarTime/CalendarTime.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./CalendarTime.module.css"],"names":["host","host__withoutDone","picker","divider","button"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAKAC,mB,WALA;AAAA,E,aASAC,Q,WATA;AAAA,E,aAaAC,S,WAbA;AAAA,E,aAmBAC,Q,WAnBA;AAAA;AAAA","file":"CalendarTime.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./CalendarTime.module.css"],"names":["host","host__withoutDone","picker","divider","button","inputPopDown","inputPopUp","popper","popperBottom","popperTop","customScroll"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAKAC,mB,WALA;AAAA,E,aASAC,Q,WATA;AAAA,E,aAaAC,S,WAbA;AAAA,E,aAmBAC,Q,WAnBA;AAAA,E,aAuBAC,c,WAvBA;AAAA,E,aA4BAC,Y,WA5BA;AAAA,E,aAiCAC,Q,WAjCA;AAAA,E,aA2CAC,c,WA3CA;AAAA,E,aAiDAC,W,WAjDA;AAAA,E,aAyDAC,c,WAzDA;AAAA;AAAA","file":"CalendarTime.module.css.d.ts","sourceRoot":""}

package/src/components/CalendarTime/CalendarTime.tsx

@@ -7,9 +7,34 @@ import { Keys, pressedKey } from '../../lib/accessibility';
 import { setHours, setMinutes } from '../../lib/date';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { Button, type ButtonProps } from '../Button/Button';
-import { CalendarTimePicker } from './CalendarTimePicker';
+import { CalendarTimePicker, padStartTimeValue } from './CalendarTimePicker';
 import styles from './CalendarTime.module.css';
 
+const MAX_HOURS = 23;
+const MAX_MINUTES = 59;
+
+function generateLabels(
+  min: number,
+  max: number,
+): Array<{
+  value: string;
+  label: string;
+}> {
+  const array = new Array(Math.ceil(max - min + 1));
+
+  for (let i = min; i <= max; i += 1) {
+    const value = padStartTimeValue(i);
+
+    array[i - min] = { value, label: value };
+  }
+
+  return array;
+}
+
+const hours = generateLabels(0, MAX_HOURS);
+
+const minutes = generateLabels(0, MAX_MINUTES);
+
 export type CalendarTimeTestsProps = {
   /**
    * Передает атрибут `data-testid` для дропдауна выбора часа в календаре.
@@ -79,22 +104,6 @@ export interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneB
   isDayDisabled?: ((day: Date, withTime?: boolean) => boolean) | undefined;
 }
 
-const hours: Array<{
-  value: number;
-  label: string;
-}> = [];
-for (let i = 0; i < 24; i += 1) {
-  hours.push({ value: i, label: String(i).padStart(2, '0') });
-}
-
-const minutes: Array<{
-  value: number;
-  label: string;
-}> = [];
-for (let i = 0; i < 60; i += 1) {
-  minutes.push({ value: i, label: String(i).padStart(2, '0') });
-}
-
 export const CalendarTime = ({
   value,
   onChange,
@@ -103,7 +112,6 @@ export const CalendarTime = ({
   changeMinutesLabel,
   setHours: setHoursFn = setHours,
   setMinutes: setMinutesFn = setMinutes,
-  isDayDisabled,
   doneButtonText = 'Готово',
   doneButtonDisabled = false,
   doneButtonShow = true,
@@ -111,6 +119,7 @@ export const CalendarTime = ({
   hoursTestId,
   doneButtonTestId,
   DoneButton,
+  isDayDisabled,
 }: CalendarTimeProps): React.ReactNode => {
   const hoursInputRef = useRef<HTMLInputElement | null>(null);
   const minutesInputRef = useRef<HTMLInputElement | null>(null);
@@ -118,13 +127,16 @@ export const CalendarTime = ({
 
   const localHours = isDayDisabled
     ? hours.map((hour) => {
-        return { ...hour, disabled: isDayDisabled(setHoursFn(value, hour.value), true) };
+        return { ...hour, disabled: isDayDisabled(setHoursFn(value, Number(hour.value)), true) };
       })
     : hours;
 
   const localMinutes = isDayDisabled
     ? minutes.map((minute) => {
-        return { ...minute, disabled: isDayDisabled(setMinutesFn(value, minute.value), true) };
+        return {
+          ...minute,
+          disabled: isDayDisabled(setMinutesFn(value, Number(minute.value)), true),
+        };
       })
     : minutes;
 
@@ -152,18 +164,8 @@ export const CalendarTime = ({
     }
   };
 
-  const stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(
-    (event: React.KeyboardEvent, isOpen: boolean) => {
-      if (isOpen && event.key === 'Escape') {
-        event.stopPropagation();
-      }
-    },
-    [],
-  );
-
-  const onSelectInputKeyDown = (e: React.KeyboardEvent, isOpen: boolean) => {
-    onPickerKeyDown(e);
-    stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen(e, isOpen);
+  const onHoursInputEnd = () => {
+    minutesInputRef.current?.focus();
   };
 
   const renderDoneButton = () => {
@@ -185,29 +187,40 @@ export const CalendarTime = ({
 
   return (
     <div className={classNames(styles.host, !doneButtonShow && styles.host__withoutDone)}>
-      <CalendarTimePicker
-        value={value}
-        getNumericValue={(v) => v.getHours()}
-        onChange={onChange}
-        options={localHours}
-        setTime={setHoursFn}
-        onInputKeyDown={onSelectInputKeyDown}
-        inputRef={hoursInputRef}
-        inputLabel={changeHoursLabel}
-        inputTestId={hoursTestId}
-      />
-      <div className={styles.divider}>:</div>
-      <CalendarTimePicker
-        value={value}
-        getNumericValue={(v) => v.getMinutes()}
-        onChange={onChange}
-        options={localMinutes}
-        setTime={setMinutesFn}
-        onInputKeyDown={onSelectInputKeyDown}
-        inputRef={minutesInputRef}
-        inputLabel={changeMinutesLabel}
-        inputTestId={minutesTestId}
-      />
+      <AdaptivityProvider density="compact">
+        <div className={styles.picker}>
+          <CalendarTimePicker
+            valueDate={value}
+            value={value.getHours()}
+            onChange={onChange}
+            options={localHours}
+            setTime={setHoursFn}
+            onKeyDown={onPickerKeyDown}
+            inputRef={hoursInputRef}
+            inputLabel={changeHoursLabel}
+            inputTestId={hoursTestId}
+            maxValue={MAX_HOURS}
+            onInputEnd={onHoursInputEnd}
+            isDayDisabled={isDayDisabled}
+          />
+        </div>
+        <div className={styles.divider}>:</div>
+        <div className={styles.picker}>
+          <CalendarTimePicker
+            valueDate={value}
+            value={value.getMinutes()}
+            onChange={onChange}
+            options={localMinutes}
+            setTime={setMinutesFn}
+            onKeyDown={onPickerKeyDown}
+            inputRef={minutesInputRef}
+            inputLabel={changeMinutesLabel}
+            inputTestId={minutesTestId}
+            maxValue={MAX_MINUTES}
+            isDayDisabled={isDayDisabled}
+          />
+        </div>
+      </AdaptivityProvider>
       {doneButtonShow && (
         <div className={styles.button}>
           <AdaptivityProvider density="compact">{renderDoneButton()}</AdaptivityProvider>