@vkontakte/vkui 7.2.1 → 7.3.0

package/src/hooks/useDateInput.ts

@@ -19,6 +19,7 @@ export interface UseDateInputDependencies<T, D> {
   getInternalValue: (value?: D | null | undefined) => string[];
   onClear: () => void;
   onCalendarOpenChanged?: (opened: boolean) => void;
+  accessible?: boolean;
 }
 
 export function useDateInput<T extends HTMLElement, D>({
@@ -32,12 +33,14 @@ export function useDateInput<T extends HTMLElement, D>({
   getInternalValue,
   value,
   onCalendarOpenChanged,
+  accessible,
 }: UseDateInputDependencies<T, D>): {
   rootRef: React.RefObject<HTMLDivElement | null>;
   calendarRef: React.RefObject<HTMLDivElement | null>;
   open: boolean;
   openCalendar: () => void;
   closeCalendar: () => void;
+  toggleCalendar: () => void;
   internalValue: string[];
   focusedElement: number | null;
   setFocusedElement: React.Dispatch<React.SetStateAction<number | null>>;
@@ -65,17 +68,26 @@ export function useDateInput<T extends HTMLElement, D>({
     if (!open) {
       openCalendar();
       onCalendarOpenChanged?.(true);
+      if (accessible) {
+        setFocusedElement(null);
+      }
     }
-  }, [onCalendarOpenChanged, open, openCalendar]);
+  }, [onCalendarOpenChanged, open, openCalendar, accessible]);
 
-  const removeFocusFromField = React.useCallback(() => {
-    if (focusedElement !== null) {
-      setFocusedElement(null);
+  const toggleCalendar = useCallback(() => {
+    if (open) {
       _onCalendarClose();
-      window!.getSelection()?.removeAllRanges();
-      setInternalValue(getInternalValue(value));
+    } else {
+      _onCalendarOpen();
     }
-  }, [focusedElement, _onCalendarClose, window, getInternalValue, value]);
+  }, [open, _onCalendarOpen, _onCalendarClose]);
+
+  const removeFocusFromField = React.useCallback(() => {
+    setFocusedElement(null);
+    _onCalendarClose();
+    window!.getSelection()?.removeAllRanges();
+    setInternalValue(getInternalValue(value));
+  }, [_onCalendarClose, window, getInternalValue, value]);
 
   const handleClickOutside = React.useCallback(
     (e: MouseEvent) => {
@@ -90,8 +102,12 @@ export function useDateInput<T extends HTMLElement, D>({
   );
 
   const selectFirst = React.useCallback(() => {
+    if (focusedElement !== null) {
+      return;
+    }
+
     setFocusedElement(0);
-  }, []);
+  }, [focusedElement]);
 
   useGlobalEventListener(document, 'click', handleClickOutside, {
     capture: true,
@@ -116,16 +132,28 @@ export function useDateInput<T extends HTMLElement, D>({
 
     let element = refs[focusedElement].current;
 
+    let timerId: ReturnType<typeof setTimeout>;
     if (element) {
       element.focus();
-      _onCalendarOpen();
+      if (!accessible) {
+        _onCalendarOpen();
+      }
       range.selectNodeContents(element as Node);
 
-      const selection = window!.getSelection();
-      selection?.removeAllRanges();
-      selection?.addRange(range);
+      // Fix для Firefox: setTimeout нужен чтобы отложить range selection на
+      // какое-то время, иначе, при фокусе на InputLike
+      // извне, контент визуально не будет выбран
+      timerId = setTimeout(() => {
+        const selection = window!.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }, 0);
     }
-  }, [disabled, focusedElement, _onCalendarOpen, refs, window]);
+
+    return () => {
+      clearTimeout(timerId);
+    };
+  }, [disabled, focusedElement, refs, window, _onCalendarOpen, accessible]);
 
   const clear = React.useCallback(() => {
     onClear?.();
@@ -133,10 +161,8 @@ export function useDateInput<T extends HTMLElement, D>({
   }, [onClear, selectFirst]);
 
   const handleFieldEnter = React.useCallback(() => {
-    if (!open) {
-      selectFirst();
-    }
-  }, [open, selectFirst]);
+    selectFirst();
+  }, [selectFirst]);
 
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent<HTMLSpanElement>) => {
@@ -172,19 +198,24 @@ export function useDateInput<T extends HTMLElement, D>({
         _value[focusedElement] = String(
           currentValue >= config.max ? config.min : currentValue + 1,
         ).padStart(config.length, '0');
-      } else if (
-        e.key === 'Enter' ||
-        (e.key === 'Tab' && focusedElement === maxElement) ||
-        (e.key === 'Tab' && e.shiftKey && focusedElement === 0)
-      ) {
-        removeFocusFromField();
-        return;
       } else if (e.key === 'ArrowLeft' || e.key === 'Left' || (e.key === 'Tab' && e.shiftKey)) {
-        setFocusedElement(focusedElement <= 0 ? maxElement : focusedElement - 1);
+        if (focusedElement <= 0) {
+          removeFocusFromField();
+          return;
+        }
+        setFocusedElement(focusedElement - 1);
       } else if (e.key === 'ArrowRight' || e.key === 'Right' || e.key === 'Tab') {
-        setFocusedElement(focusedElement >= maxElement ? 0 : focusedElement + 1);
+        if (focusedElement >= maxElement) {
+          removeFocusFromField();
+          return;
+        }
+
+        setFocusedElement(focusedElement + 1);
       } else if (e.key === 'Delete' || e.key === 'Del') {
         _value[focusedElement] = '';
+      } else if (e.key === ' ') {
+        _onCalendarOpen();
+        return;
       } else {
         return;
       }
@@ -194,12 +225,13 @@ export function useDateInput<T extends HTMLElement, D>({
       onInternalValueChange(_value);
     },
     [
+      _onCalendarOpen,
+      removeFocusFromField,
       elementsConfig,
       focusedElement,
       internalValue,
       maxElement,
       onInternalValueChange,
-      removeFocusFromField,
     ],
   );
 
@@ -209,6 +241,7 @@ export function useDateInput<T extends HTMLElement, D>({
     open,
     openCalendar: _onCalendarOpen,
     closeCalendar: _onCalendarClose,
+    toggleCalendar,
     internalValue,
     focusedElement,
     setFocusedElement,

package/src/hooks/useFocusTrap.ts

@@ -106,6 +106,14 @@ export type UseFocusTrapProps = {
    * Вызывается при нажатии на кнопку `Escape`.
    */
   onClose?: VoidFunction;
+  /**
+   * Следует ли обрабатываеть событие нажатия клавиши Escape при "погружении", то есть
+   * до того как это событие будет обработано на EventTarget
+   * Удобно установить в false, если требуется запретить "всплытие" события до FocusTrap
+   *
+   * @default true
+   */
+  captureEscapeKeyboardEvent?: boolean;
 };
 
 /**
@@ -120,6 +128,7 @@ export const useFocusTrap = (
     restoreFocus = true,
     timeout = 0,
     onClose,
+    captureEscapeKeyboardEvent = true,
   }: UseFocusTrapProps,
 ) => {
   const { document } = useDOM();
@@ -252,11 +261,22 @@ export const useFocusTrap = (
 
             break;
           }
-          case Keys.ESCAPE: {
-            if (onClose) {
-              event.preventDefault();
-              onClose();
-            }
+        }
+
+        return true;
+      };
+
+      const onEscapeKeydown = (event: KeyboardEvent) => {
+        if (disabled) {
+          return;
+        }
+
+        const pressedKeyResult = pressedKey(event);
+
+        if (pressedKeyResult === Keys.ESCAPE) {
+          if (onClose) {
+            event.preventDefault();
+            onClose();
           }
         }
 
@@ -267,8 +287,12 @@ export const useFocusTrap = (
       doc.addEventListener('keydown', onDocumentKeydown, {
         capture: true,
       });
+      doc.addEventListener('keydown', onEscapeKeydown, {
+        capture: captureEscapeKeyboardEvent,
+      });
       return () => {
         doc.removeEventListener('keydown', onDocumentKeydown, true);
+        doc.removeEventListener('keydown', onEscapeKeydown, captureEscapeKeyboardEvent);
       };
     },
     [onClose, ref, disabled],

package/src/hooks/useLocale.ts

@@ -0,0 +1,7 @@
+import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
+
+export function useLocale(): string {
+  const { locale } = useConfigProvider();
+
+  return locale;
+}

package/src/index.ts

@@ -437,6 +437,7 @@ export { withPlatform } from './hoc/withPlatform';
  */
 export { usePlatform } from './hooks/usePlatform';
 export { useConfigDirection as useDirection } from './hooks/useConfigDirection';
+export { useLocale } from './hooks/useLocale';
 export { useAdaptivity } from './hooks/useAdaptivity';
 export {
   type UseAdaptivityConditionalRender,

package/src/lib/animation/useCSSTransition.stories.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./useCSSTransition.stories.module.css"],"names":["host","appear","appearing","appeared","enter","entering","entered","exit","exiting","exited"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,Q,WATA;AAAA,E,aAaAC,W,WAbA;AAAA,E,aAkBAC,U,WAlBA;AAAA,E,aAsBAC,O,WAtBA;AAAA,E,aA4BAC,U,WA5BA;AAAA,E,aAqCAC,S,WArCA;AAAA,E,aAyCAC,M,WAzCA;AAAA,E,aA8CAC,S,WA9CA;AAAA,E,aAuDAC,Q,WAvDA;AAAA;AAAA","file":"useCSSTransition.stories.module.css.d.ts","sourceRoot":""}

package/src/lib/calendar.ts

@@ -1,5 +1,6 @@
 import {
   addDays,
+  addMonths,
   addWeeks,
   eachDayOfInterval,
   endOfMonth,
@@ -12,6 +13,7 @@ import {
   startOfMonth,
   startOfWeek,
   subDays,
+  subMonths,
   subWeeks,
 } from 'date-fns';
 import { clamp as clampNumber } from '../helpers/math';
@@ -70,14 +72,17 @@ export const getDaysNames = (
   now: Date,
   weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6,
   locale?: string,
-): string[] => {
-  const formatter = new Intl.DateTimeFormat(locale, {
+): Array<{ short: string; long: string }> => {
+  const shortFormatter = new Intl.DateTimeFormat(locale, {
     weekday: 'short',
   });
+  const longFormatter = new Intl.DateTimeFormat(locale, {
+    weekday: 'long',
+  });
   return eachDayOfInterval({
     start: startOfWeek(now, { weekStartsOn }),
     end: endOfWeek(now, { weekStartsOn }),
-  }).map((day) => formatter.format(day));
+  }).map((day) => ({ short: shortFormatter.format(day), long: longFormatter.format(day) }));
 };
 
 export const navigateDate = (date?: Date | null, key?: string): Date => {
@@ -96,6 +101,18 @@ export const navigateDate = (date?: Date | null, key?: string): Date => {
     case 'ArrowDown':
       newDate = addWeeks(newDate, 1);
       break;
+    case 'Home':
+      newDate = startOfWeek(newDate, { weekStartsOn: 1 });
+      break;
+    case 'End':
+      newDate = endOfWeek(newDate, { weekStartsOn: 1 });
+      break;
+    case 'PageUp':
+      newDate = subMonths(newDate, 1);
+      break;
+    case 'PageDown':
+      newDate = addMonths(newDate, 1);
+      break;
   }
 
   return newDate;

package/src/lib/platform.ts

@@ -1,3 +1,9 @@
+/**
+ * android - базовая платформа
+ * ios - платформа которая подстраивается под ios
+ * vkcom - платформа предназначенная для миниприложений которые встраиваются в vk.com
+ */
+
 import { type BrowserInfo, computeBrowserInfo } from './browser';
 
 export const Platform = {
@@ -6,9 +12,6 @@ export const Platform = {
   VKCOM: 'vkcom',
 } as const;
 
-/**
- * TODO [>=8]: Переименовать 'vkcom' в 'web' и заменить в DEFAULT_TOKENS_CLASS_NAMES тему по умолчанию
- */
 export type PlatformType = 'android' | 'ios' | 'vkcom';
 
 export function platform(browserInfo?: BrowserInfo): PlatformType {

package/src/lib/react/defineComponentDisplayNames.ts

@@ -0,0 +1,6 @@
+export function defineComponentDisplayNames(Component: React.FC<any>, name: string) {
+  Component.displayName = name;
+  Object.defineProperty(Component, 'name', {
+    value: name,
+  });
+}

package/src/lib/tokens/TokensClassProvider.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./TokensClassProvider.module.css"],"names":["defaultColor"],"mappings":"AAAA;AAAA,E,aAAAA,c,WAAA;AAAA;AAAA","file":"TokensClassProvider.module.css.d.ts","sourceRoot":""}

package/src/styles/adaptivity.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./adaptivity.module.css"],"names":["-sizeX--compact-mq","-sizeX--regular-mq","-sizeY--compact-mq","-sizeY--regular-mq","-viewWidth--tabletMinus-mq","-viewWidth--tabletPlus-mq","-deviceType--mobile-mq","-deviceType--desktop-mq"],"mappings":"AAAA;AAAA,E,aAeEA,oB,WAfF;AAAA,E,aAqBEC,oB,WArBF;AAAA,E,aA8BEC,oB,WA9BF;AAAA,E,aAoCEC,oB,WApCF;AAAA,E,aA6CEC,4B,WA7CF;AAAA,E,aAmDEC,2B,WAnDF;AAAA,E,aA4DEC,wB,WA5DF;AAAA,E,aAkEEC,yB,WAlEF;AAAA;AAAA","file":"adaptivity.module.css.d.ts","sourceRoot":""}

package/src/styles/animationFades.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./animationFades.module.css"],"names":["-anim-fade-in","-anim-fade-out"],"mappings":"AAAA;AAAA,E,aAAAA,e,WAAA;AAAA,E,aAIAC,gB,WAJA;AAAA;AAAA","file":"animationFades.module.css.d.ts","sourceRoot":""}

package/src/styles/common.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./common.css"],"names":["vkui","vkui__root","vkui__root--embedded","vkui--layout-card","vkui--layout-plain","vkui--disable-overscroll-behavior"],"mappings":"AAAA;AAAA,E,aAqBAA,M,WArBA;AAAA,E,aAsBAA,M,WAtBA;AAAA,E,aAuBAC,Y,WAvBA;AAAA,E,aA8BAD,M,WA9BA;AAAA,E,aAwCAC,Y,WAxCA;AAAA,E,aA+CAC,sB,WA/CA;AAAA,E,aAmDAC,mB,WAnDA;AAAA,E,aAuDAC,oB,WAvDA;AAAA,E,aA6DAC,mC,WA7DA;AAAA;AAAA","file":"common.css.d.ts","sourceRoot":""}

package/src/styles/constants.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"constants.css.d.ts","sourceRoot":""}

package/src/styles/customMedias.generated.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"customMedias.generated.css.d.ts","sourceRoot":""}

package/src/styles/dynamicTokens.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"dynamicTokens.css.d.ts","sourceRoot":""}

package/src/styles/focusVisible.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./focusVisible.module.css"],"names":["-focus-visible","-focus-visible--mode-outside","-focus-visible--mode-inside","-focus-visible--focused"],"mappings":"AAAA;AAAA,E,aAIAA,gB,WAJA;AAAA,E,aASAA,gB,WATA;AAAA,E,aAUAA,gB,WAVA;AAAA,E,aAWAA,gB,WAXA;AAAA,E,aAYAA,gB,WAZA;AAAA,E,aAiBAA,gB,WAjBA;AAAA,E,aAiBeC,8B,WAjBf;AAAA,E,aAsBAD,gB,WAtBA;AAAA,E,aAsBeE,6B,WAtBf;AAAA,E,aA2BAF,gB,WA3BA;AAAA,E,aA2BeG,yB,WA3Bf;AAAA,E,aA2BuCD,6B,WA3BvC;AAAA,E,aA4BAF,gB,WA5BA;AAAA,E,aA4BeG,yB,WA5Bf;AAAA,E,aA4BuCF,8B,WA5BvC;AAAA,E,aAmCED,gB,WAnCF;AAAA,E,aAmCiBG,yB,WAnCjB;AAAA,E,aAmCyCD,6B,WAnCzC;AAAA,E,aAoCIF,gB,WApCJ;AAAA,E,aAoCmBG,yB,WApCnB;AAAA,E,aAoC2CF,8B,WApC3C;AAAA;AAAA","file":"focusVisible.module.css.d.ts","sourceRoot":""}

package/src/styles/gaps.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./gaps.module.css"],"names":["-row-gap--2xs","-row-gap--xs","-row-gap--s","-row-gap--m","-row-gap--l","-row-gap--xl","-row-gap--2xl","-row-gap--3xl","-row-gap--4xl","-column-gap--2xs","-column-gap--xs","-column-gap--s","-column-gap--m","-column-gap--l","-column-gap--xl","-column-gap--2xl","-column-gap--3xl","-column-gap--4xl"],"mappings":"AAAA;AAAA,E,aAEAA,e,WAFA;AAAA,E,aAMAC,c,WANA;AAAA,E,aAUAC,a,WAVA;AAAA,E,aAcAC,a,WAdA;AAAA,E,aAkBAC,a,WAlBA;AAAA,E,aAsBAC,c,WAtBA;AAAA,E,aA0BAC,e,WA1BA;AAAA,E,aA8BAC,e,WA9BA;AAAA,E,aAkCAC,e,WAlCA;AAAA,E,aAwCAC,kB,WAxCA;AAAA,E,aA4CAC,iB,WA5CA;AAAA,E,aAgDAC,gB,WAhDA;AAAA,E,aAoDAC,gB,WApDA;AAAA,E,aAwDAC,gB,WAxDA;AAAA,E,aA4DAC,iB,WA5DA;AAAA,E,aAgEAC,kB,WAhEA;AAAA,E,aAoEAC,kB,WApEA;AAAA,E,aAwEAC,kB,WAxEA;AAAA;AAAA","file":"gaps.module.css.d.ts","sourceRoot":""}

package/src/styles/missedThemeTokens.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"missedThemeTokens.css.d.ts","sourceRoot":""}

package/src/styles/spacings.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./spacings.module.css"],"names":["-spacing--2xs","-spacing--xs","-spacing--s","-spacing--m","-spacing--l","-spacing--xl","-spacing--2xl","-spacing--3xl","-spacing--4xl"],"mappings":"AAAA;AAAA,E,aAAAA,e,WAAA;AAAA,E,aAIAC,c,WAJA;AAAA,E,aAQAC,a,WARA;AAAA,E,aAYAC,a,WAZA;AAAA,E,aAgBAC,a,WAhBA;AAAA,E,aAoBAC,c,WApBA;AAAA,E,aAwBAC,e,WAxBA;AAAA,E,aA4BAC,e,WA5BA;AAAA,E,aAgCAC,e,WAhCA;AAAA;AAAA","file":"spacings.module.css.d.ts","sourceRoot":""}

package/src/styles/themes.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./themes.css","../../../../node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariablesLocal.css","../../../../node_modules/@vkontakte/vkui-tokens/themes/vkBaseDark/cssVars/declarations/onlyVariablesLocal.css","../../../../node_modules/@vkontakte/vkui-tokens/themes/vkIOS/cssVars/declarations/onlyVariablesLocal.css","../../../../node_modules/@vkontakte/vkui-tokens/themes/vkIOSDark/cssVars/declarations/onlyVariablesLocal.css","../../../../node_modules/@vkontakte/vkui-tokens/themes/vkCom/cssVars/declarations/onlyVariablesLocal.css","../../../../node_modules/@vkontakte/vkui-tokens/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css"],"names":["vkui--vkBase--light","vkui--vkBase--dark","vkui--vkIOS--light","vkui--vkIOS--dark","vkui--vkCom--light","vkui--vkCom--dark"],"mappings":"AAAA;AAAA,E,aCAAA,qB,WDAA;AAAA,E,aEAAC,oB,WFAA;AAAA,E,aGAAC,oB,WHAA;AAAA,E,aIAAC,mB,WJAA;AAAA,E,aKAAC,oB,WLAA;AAAA,E,aMAAC,mB,WNAA;AAAA;AAAA","file":"themes.css.d.ts","sourceRoot":""}

package/src/styles/transformOriginByPlacement.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./transformOriginByPlacement.module.css"],"names":["-anim-transform-origin-top","-anim-transform-origin-top-start","-anim-transform-origin-top-end","-anim-transform-origin-right","-anim-transform-origin-right-start","-anim-transform-origin-right-end","-anim-transform-origin-bottom","-anim-transform-origin-bottom-start","-anim-transform-origin-bottom-end","-anim-transform-origin-left","-anim-transform-origin-left-start","-anim-transform-origin-left-end"],"mappings":"AAAA;AAAA,E,aAAAA,4B,WAAA;AAAA,E,aAIAC,kC,WAJA;AAAA,E,aAQAC,gC,WARA;AAAA,E,aAYAC,8B,WAZA;AAAA,E,aAgBAC,oC,WAhBA;AAAA,E,aAoBAC,kC,WApBA;AAAA,E,aAwBAC,+B,WAxBA;AAAA,E,aA4BAC,qC,WA5BA;AAAA,E,aAgCAC,mC,WAhCA;AAAA,E,aAoCAC,6B,WApCA;AAAA,E,aAwCAC,mC,WAxCA;AAAA,E,aA4CAC,iC,WA5CA;AAAA;AAAA","file":"transformOriginByPlacement.module.css.d.ts","sourceRoot":""}