@vkontakte/vkui 8.1.2 → 8.2.0

package/src/components/WriteBar/WriteBar.tsx

@@ -1,19 +1,15 @@
 'use client';
 
 import * as React from 'react';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { useExternRef } from '../../hooks/useExternRef';
+import { hasReactNode } from '@vkontakte/vkjs';
 import { useMergeProps } from '../../hooks/useMergeProps';
-import { usePlatform } from '../../hooks/usePlatform';
-import { callMultiple } from '../../lib/callMultiple';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HasDataAttribute, HasRootRef } from '../../types';
-import { RootComponent } from '../RootComponent/RootComponent';
-import { useResizeTextarea } from '../Textarea/useResizeTextarea';
-import { Headline } from '../Typography/Headline/Headline';
-import { Title } from '../Typography/Title/Title';
-import type { TypographyProps } from '../Typography/Typography';
-import styles from './WriteBar.module.css';
+import { WriteBarBeforeOrAfter } from './WriteBarBeforeOrAfter/WriteBarBeforeOrAfter';
+import { WriteBarFormField } from './WriteBarFormField/WriteBarFormField';
+import { WriteBarFormFieldInlineAfter } from './WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter';
+import { WriteBarRoot } from './WriteBarRoot/WriteBarRoot';
+import { WriteBarTextarea } from './WriteBarTextarea/WriteBarTextarea';
 
 const warn = warnOnce('WriteBar');
 
@@ -91,16 +87,6 @@ export interface WriteBarProps
   children?: never | undefined;
 }
 
-const WriteBarTypography = (props: TypographyProps) => {
-  const platform = usePlatform();
-
-  if (platform === 'ios') {
-    return <Title {...props} level="3" weight="3" />;
-  }
-
-  return <Headline weight="3" {...props} />;
-};
-
 /**
  * @see https://vkui.io/components/write-bar
  */
@@ -130,7 +116,7 @@ export const WriteBar = ({
   wrap,
   rows,
   form,
-  onChange: onChangeProp,
+  onChange,
   onFocus,
   onBlur,
   id,
@@ -148,17 +134,10 @@ export const WriteBar = ({
     warn('Свойство `getRef` устаревшее, используйте `slotProps={ textArea: { getRootRef: ... } }`');
   }
 
-  const platform = usePlatform();
-
   const rootProps = useMergeProps(restProps, slotProps?.root);
 
-  const {
-    onChange,
-    getRootRef: getTextAreaRef,
-    ...textAreaRest
-  } = useMergeProps(
+  const textAreaRest = useMergeProps(
     {
-      className: styles.textarea,
       getRootRef: getRef,
       autoComplete,
       autoCapitalize,
@@ -176,7 +155,7 @@ export const WriteBar = ({
       wrap,
       rows,
       form,
-      onChange: onChangeProp,
+      onChange,
       onFocus,
       onBlur,
       id,
@@ -189,35 +168,22 @@ export const WriteBar = ({
     slotProps?.textArea,
   );
 
-  const [refResizeTextarea, resize] = useResizeTextarea(onHeightChange, true);
-  const textareaRef = useExternRef(getTextAreaRef, refResizeTextarea);
-
-  React.useEffect(resize, [resize, platform]);
-
   return (
-    <RootComponent
-      baseClassName={classNames(
-        styles.host,
-        platform === 'ios' && styles.ios,
-        shadow && styles.shadow,
-      )}
-      {...rootProps}
-    >
-      <div className={styles.form}>
-        {hasReactNode(before) && <div className={styles.before}>{before}</div>}
-
-        <div className={styles.formIn}>
-          <WriteBarTypography
-            Component="textarea"
-            onChange={callMultiple(onChange, resize)}
-            getRootRef={textareaRef}
-            {...textAreaRest}
-          />
-          {hasReactNode(inlineAfter) && <div className={styles.inlineAfter}>{inlineAfter}</div>}
-        </div>
-
-        {hasReactNode(after) && <div className={styles.after}>{after}</div>}
-      </div>
-    </RootComponent>
+    <WriteBarRoot shadow={shadow} {...rootProps}>
+      {hasReactNode(before) && <WriteBarBeforeOrAfter>{before}</WriteBarBeforeOrAfter>}
+      <WriteBarFormField>
+        <WriteBarTextarea onHeightChange={onHeightChange} {...textAreaRest} />
+        {hasReactNode(inlineAfter) && (
+          <WriteBarFormFieldInlineAfter>{inlineAfter}</WriteBarFormFieldInlineAfter>
+        )}
+      </WriteBarFormField>
+      {hasReactNode(after) && <WriteBarBeforeOrAfter>{after}</WriteBarBeforeOrAfter>}
+    </WriteBarRoot>
   );
 };
+
+WriteBar.FormField = WriteBarFormField;
+WriteBar.Textarea = WriteBarTextarea;
+WriteBar.Root = WriteBarRoot;
+WriteBar.Before = WriteBarBeforeOrAfter;
+WriteBar.After = WriteBarBeforeOrAfter;

package/src/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.module.css

@@ -0,0 +1,12 @@
+.host:first-of-type {
+  padding-inline-start: 4px;
+}
+
+.host:last-of-type {
+  padding-inline-end: 4px;
+}
+
+.ios {
+  padding-block: 0;
+  padding-inline: 4px;
+}

package/src/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./WriteBarBeforeOrAfter.module.css"],"names":["host","ios"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAA,M,WAJA;AAAA,E,aAQAC,K,WARA;AAAA;AAAA","file":"WriteBarBeforeOrAfter.module.css.d.ts","sourceRoot":""}

package/src/components/WriteBar/WriteBarBeforeOrAfter/WriteBarBeforeOrAfter.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { classNames } from '@vkontakte/vkjs';
+import { Flex, type FlexProps } from '../../../components/Flex/Flex';
+import { usePlatform } from '../../../hooks/usePlatform';
+import styles from './WriteBarBeforeOrAfter.module.css';
+
+type WriteBarBeforeOrAfterProps = FlexProps;
+
+export const WriteBarBeforeOrAfter = ({ className, ...restProps }: WriteBarBeforeOrAfterProps) => {
+  const platform = usePlatform();
+
+  return (
+    <Flex
+      align="end"
+      className={classNames(styles.host, platform === 'ios' && styles.ios, className)}
+      {...restProps}
+    />
+  );
+};

package/src/components/WriteBar/WriteBarFormField/WriteBarFormField.module.css

@@ -0,0 +1,18 @@
+.host {
+  position: relative;
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.ios {
+  box-sizing: border-box;
+  margin-block: 8px;
+  margin-inline: 0;
+  background-color: var(--vkui--color_write_bar_input_background);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_write_bar_input_border);
+  border-radius: 18px;
+}
+
+.ios:first-child {
+  margin-inline-start: 12px;
+}

package/src/components/WriteBar/WriteBarFormField/WriteBarFormField.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./WriteBarFormField.module.css"],"names":["host","ios"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,K,WANA;AAAA,E,aAeAA,K,WAfA;AAAA;AAAA","file":"WriteBarFormField.module.css.d.ts","sourceRoot":""}

package/src/components/WriteBar/WriteBarFormField/WriteBarFormField.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../../hooks/usePlatform';
+import { Flex, type FlexProps } from '../../Flex/Flex';
+import { WriteBarFormFieldInlineAfter } from './WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter';
+import styles from './WriteBarFormField.module.css';
+
+type WriteBarFormFieldProps = FlexProps;
+
+export const WriteBarFormField = ({ className, ...restProps }: WriteBarFormFieldProps) => {
+  const platform = usePlatform();
+
+  return (
+    <Flex
+      className={classNames(styles.host, platform === 'ios' && styles.ios, className)}
+      {...restProps}
+    />
+  );
+};
+
+WriteBarFormField.InlineAfter = WriteBarFormFieldInlineAfter;

package/src/components/WriteBar/WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter.module.css

@@ -0,0 +1,3 @@
+.ios {
+  margin-block: -8px;
+}

package/src/components/WriteBar/WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter.module.css.d.ts.map

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

package/src/components/WriteBar/WriteBarFormField/WriteBarFormFieldInlineAfter/WriteBarFormFieldInlineAfter.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { classNames } from '@vkontakte/vkjs';
+import { Flex, type FlexProps } from '../../../../components/Flex/Flex';
+import { usePlatform } from '../../../../hooks/usePlatform';
+import styles from './WriteBarFormFieldInlineAfter.module.css';
+
+type WriteBarFormFieldInlineAfterProps = FlexProps;
+
+export const WriteBarFormFieldInlineAfter = ({
+  className,
+  ...restProps
+}: WriteBarFormFieldInlineAfterProps) => {
+  const platform = usePlatform();
+
+  return (
+    <Flex
+      align="end"
+      className={classNames(platform === 'ios' && styles.ios, className)}
+      {...restProps}
+    />
+  );
+};

package/src/components/WriteBar/WriteBarRoot/WriteBarRoot.module.css

@@ -0,0 +1,14 @@
+.host {
+  background: var(--vkui--color_background_contrast_themed);
+}
+
+.shadow {
+  box-shadow: var(--vkui--elevation3);
+}
+
+/**
+ * iOS
+ */
+.ios {
+  background: var(--vkui--color_background_content);
+}

package/src/components/WriteBar/WriteBarRoot/WriteBarRoot.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./WriteBarRoot.module.css"],"names":["host","shadow","ios"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,Q,WAJA;AAAA,E,aAWAC,K,WAXA;AAAA;AAAA","file":"WriteBarRoot.module.css.d.ts","sourceRoot":""}

package/src/components/WriteBar/WriteBarRoot/WriteBarRoot.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../../hooks/usePlatform';
+import { Flex, type FlexProps } from '../../Flex/Flex';
+import styles from './WriteBarRoot.module.css';
+
+type WriteBarRootProps = FlexProps & {
+  /**
+   * Добавляет тень вокруг поля ввода.
+   */
+  shadow?: boolean;
+};
+
+export const WriteBarRoot = ({ shadow, className, ...restProps }: WriteBarRootProps) => {
+  const platform = usePlatform();
+
+  return (
+    <Flex
+      align="end"
+      minBlockSize={52}
+      className={classNames(
+        styles.host,
+        platform === 'ios' && styles.ios,
+        shadow && styles.shadow,
+        className,
+      )}
+      {...restProps}
+    />
+  );
+};

package/src/components/WriteBar/WriteBarTextarea/WriteBarTextarea.module.css

@@ -0,0 +1,42 @@
+.host {
+  box-sizing: border-box;
+  flex: 1;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-block-size: 120px;
+  margin: 0;
+  color: var(--vkui--color_text_primary);
+  appearance: none;
+  resize: none;
+  background: transparent;
+  border: 0;
+}
+
+.host:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+.host::placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--vkui--color_text_subhead);
+  white-space: nowrap;
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.host:focus {
+  outline: var(--vkui_internal--outline-reset);
+}
+
+.host {
+  block-size: 52px;
+  padding-block: 16px;
+  padding-inline: 12px;
+}
+
+.ios {
+  block-size: 36px;
+  padding-block: 6px;
+  padding-inline: 12px 0;
+}

package/src/components/WriteBar/WriteBarTextarea/WriteBarTextarea.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./WriteBarTextarea.module.css"],"names":["host","ios"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAcAA,M,WAdA;AAAA,E,aAkBAA,M,WAlBA;AAAA,E,aA2BAA,M,WA3BA;AAAA,E,aA+BAA,M,WA/BA;AAAA,E,aAqCAC,K,WArCA;AAAA;AAAA","file":"WriteBarTextarea.module.css.d.ts","sourceRoot":""}

package/src/components/WriteBar/WriteBarTextarea/WriteBarTextarea.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useExternRef } from '../../../hooks/useExternRef';
+import { usePlatform } from '../../../hooks/usePlatform';
+import { callMultiple } from '../../../lib/callMultiple';
+import type { RootComponentProps } from '../../RootComponent/RootComponent';
+import { useResizeTextarea } from '../../Textarea/useResizeTextarea';
+import { Headline } from '../../Typography/Headline/Headline';
+import { Title } from '../../Typography/Title/Title';
+import styles from './WriteBarTextarea.module.css';
+
+type WriteBarTextareaProps = RootComponentProps<HTMLTextAreaElement> & {
+  /**
+   * Вызывается при смене высоты поля ввода.
+   */
+  onHeightChange?: VoidFunction | undefined;
+};
+
+export const WriteBarTextarea = ({
+  className,
+  getRootRef,
+  onHeightChange,
+  onChange,
+  ...restProps
+}: WriteBarTextareaProps) => {
+  const platform = usePlatform();
+
+  const [refResizeTextarea, resize] = useResizeTextarea(onHeightChange, true);
+  const textareaRef = useExternRef(getRootRef, refResizeTextarea);
+
+  React.useEffect(resize, [resize, platform]);
+
+  const props = {
+    Component: 'textarea',
+    weight: '3',
+    className: classNames(className, styles.host, platform === 'ios' && styles.ios),
+    getRootRef: textareaRef,
+    onChange: callMultiple(onChange, resize),
+  } as const;
+
+  if (platform === 'ios') {
+    return <Title level="3" {...props} {...restProps} />;
+  }
+
+  return <Headline {...props} {...restProps} />;
+};

package/src/helpers/math.ts

@@ -1,6 +1,14 @@
 export const clamp = (value: number, min: number, max: number): number =>
   Math.max(min, Math.min(value, max));
 
+/**
+ * Переполнение для диапазона [min, max]
+ */
+export function overflow(value: number, min: number, max: number) {
+  const range = max - min + 1;
+  return ((((value - min) % range) + range) % range) + min;
+}
+
 export function precisionRound(number: number, precision = 1): number {
   let factor = Math.pow(10, precision);
   return Math.round(number * factor) / factor;

package/src/hoc/withPlatform.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import type * as React from 'react';
-import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
+import * as React from 'react';
+import { PlatformContext } from '../components/ConfigProvider/ConfigProviderSubContexts';
 import type { HasPlatform } from '../types';
 
 export function withPlatform<T extends HasPlatform>(
   Component: React.ComponentType<T>,
 ): React.FC<Omit<T, keyof HasPlatform>> {
   function WithPlatform(props: Omit<T, keyof HasPlatform>) {
-    const { platform } = useConfigProvider();
+    const platform = React.useContext(PlatformContext);
 
     return <Component {...(props as T)} platform={platform} />;
   }

package/src/hooks/useAdaptivityConditionalRender/types.ts

@@ -36,11 +36,11 @@ export type AdaptiveDeviceType = Record<
 
 export interface UseAdaptivityConditionalRender {
   /**
-   * @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).
    */
   sizeX: AdaptiveDensityType; // 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: AdaptiveDensityType; // TODO [>=10]: #9015 Удалить свойство.
   density: AdaptiveDensityType;

package/src/hooks/useAnimationFrame.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useStableCallback } from './useStableCallback';
+
+/**
+ * Обертка над `requestAnimationFrame`
+ *
+ * ```ts
+ * const animate = React.useCallback((delta: number) => {
+ *   console.log('Delta:', delta);
+ * }, []);
+ *
+ * useAnimationFrame(animate);
+ * ```
+ *
+ * @param callback Функция, которая будет вызываться каждый раз при обновлении анимации.
+ * Принимает параметр `delta` - время в миллисекундах, прошедшее с первого кадра анимации.
+ */
+export function useAnimationFrame(callback: (delta: number) => void, disableAnimation = false) {
+  const handleRef = React.useRef<number>(undefined);
+  const startTimestampRef = React.useRef<number>(undefined);
+  const stableCallback = useStableCallback(callback);
+
+  React.useEffect(() => {
+    if (disableAnimation) {
+      return;
+    }
+
+    const animate = (timestamp: number) => {
+      if (startTimestampRef.current === undefined) {
+        startTimestampRef.current = timestamp;
+      }
+
+      const delta = timestamp - startTimestampRef.current;
+      stableCallback(delta);
+
+      handleRef.current = requestAnimationFrame(animate);
+    };
+
+    handleRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(handleRef.current!);
+  }, [disableAnimation, stableCallback]);
+}

package/src/hooks/useAutoFocus.ts

@@ -11,5 +11,5 @@ export function useAutoFocus(
     }
 
     ref.current.focus();
-  }, []);
+  }, [autoFocus, ref]);
 }

package/src/hooks/useColorScheme.ts

@@ -1,8 +1,7 @@
-import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
+import * as React from 'react';
+import { ColorSchemeContext } from '../components/ConfigProvider/ConfigProviderSubContexts';
 import { type ColorSchemeType, DEFAULT_COLOR_SCHEME } from '../lib/colorScheme';
 
 export function useColorScheme(): ColorSchemeType {
-  const { colorScheme } = useConfigProvider();
-
-  return colorScheme ?? DEFAULT_COLOR_SCHEME;
+  return React.useContext(ColorSchemeContext) ?? DEFAULT_COLOR_SCHEME;
 }

package/src/hooks/useConfigDirection.ts

@@ -1,8 +1,7 @@
-import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
+import * as React from 'react';
+import { DirectionContext } from '../components/ConfigProvider/ConfigProviderSubContexts';
 import type { Direction } from '../lib/direction';
 
 export function useConfigDirection(): Direction {
-  const { direction } = useConfigProvider();
-
-  return direction || 'ltr';
+  return React.useContext(DirectionContext) || 'ltr';
 }

package/src/hooks/useDateInput.ts

@@ -49,14 +49,13 @@ export function useDateInput<T extends HTMLElement, D>({
   removeFocusFromField: () => void;
   handleRestoreFocus: () => boolean;
 } {
-  const { document } = useDOM();
+  const { document, window } = useDOM();
   const [open, openCalendar, closeCalendar] = useBooleanState(false);
   const rootRef = React.useRef<HTMLDivElement | null>(null);
   const calendarRef = React.useRef<HTMLDivElement | null>(null);
   const [internalValue, setInternalValue] = React.useState<string[]>([]);
   const [focusedElement, setFocusedElement] = React.useState<number | null>(null);
   const isClickedOutsideRef = React.useRef(false);
-  const { window } = useDOM();
 
   const handleRestoreFocus = React.useCallback(() => {
     // если календарь был закрыт кликом вне календаря

package/src/hooks/useFocusTrap/useAutoFocus.ts

@@ -39,6 +39,6 @@ export const useAutoFocus = (
 
       return () => clearTimeout(timeoutId);
     },
-    [autoFocus, autoFocusDelay, disabled, mount, focusFirst],
+    [ref, autoFocus, autoFocusDelay, disabled, mount, focusFirst],
   );
 };

package/src/hooks/useFocusTrap/useFocusTrap.tsx

@@ -99,6 +99,7 @@ export const useFocusTrap = (
 
   const createFocusFn = (getFocusElement: (root: HTMLElement | null) => HTMLElement | null) => {
     return () => {
+      // eslint-disable-next-line react-hooks/refs
       const node = getFocusElement(ref.current);
       if (node) {
         node.focus({ preventScroll: true });
@@ -166,6 +167,7 @@ export const useFocusTrap = (
 
   const createGuardFocusHandler = (focusFn: () => void, focusFromOutside: () => void) => {
     return (event: React.FocusEvent<HTMLSpanElement>) => {
+      // eslint-disable-next-line react-hooks/refs
       if (!mount || disabled || !ref.current) {
         return;
       }

package/src/hooks/useFocusVisible.ts

@@ -1,5 +1,5 @@
-import { type FocusEvent, useCallback, useContext, useState } from 'react';
-import { AppRootContext } from '../components/AppRoot/AppRootContext';
+import { type FocusEvent, useCallback, useState } from 'react';
+import { useKeyboardInputTracker } from './useKeyboardInputTracker';
 
 /**
  * Определяет фокус элемента, когда его наличие необходимо обозначить визуально.
@@ -14,29 +14,21 @@ export function useFocusVisible(): {
   onFocus: (event: FocusEvent<HTMLElement>) => void;
   onBlur: (event: FocusEvent<HTMLElement>) => void;
 } {
-  const [isFocused, setIsFocused] = useState(false);
-
-  // FIXME: Избавиться от чека контекста, так как без AppRoot не работает фокус
-  const withKeyboardInputCheck = true;
-  const { keyboardInput } = useContext(AppRootContext);
+  const [focusVisible, setFocusVisible] = useState(false);
+  const keyboardInputRef = useKeyboardInputTracker();
 
   const onFocus = useCallback(
     (event: FocusEvent<HTMLElement>) => {
       event.stopPropagation();
-      setIsFocused(true);
-    },
-    [setIsFocused],
-  );
-
-  const onBlur = useCallback(
-    (event: FocusEvent<HTMLElement>) => {
-      event.stopPropagation();
-      setIsFocused(false);
+      setFocusVisible(Boolean(keyboardInputRef.current));
     },
-    [setIsFocused],
+    [keyboardInputRef],
   );
 
-  const focusVisible = withKeyboardInputCheck ? keyboardInput && isFocused : isFocused;
+  const onBlur = useCallback((event: FocusEvent<HTMLElement>) => {
+    event.stopPropagation();
+    setFocusVisible(false);
+  }, []);
 
   return {
     focusVisible,