@vkontakte/vkui 6.0.1 → 6.0.3

package/src/components/Tabs/__image_snapshots__/tabs-layout-fill-mode-vkcom-webkit-light-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:175b28c7ed96f957b897e9078a4f139d9c04a94abb7a88d51752a8d5b8d4fc1e
-size 119808
+oid sha256:901b2554fcfb26052048f728cb40d61a19d4ed0b165342ed5633135141b5160e
+size 119831

package/src/components/Tabs/__image_snapshots__/tabs-vkcom-chromium-dark-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1733d8048b428c6f0f728727b88f74397675931a294b9b80c0b6c2f92eccbaf1
-size 248556
+oid sha256:b59062f26bc9ebc1a46fb6203c69d0739b3d2fd755c579ce7ed087ceb1e056c9
+size 249243

package/src/components/Tabs/__image_snapshots__/tabs-vkcom-chromium-light-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:91ecc33980a52af5fb194a46e18045a32ae8864cc9009d312d17eadb4fe3bc6c
-size 250956
+oid sha256:04c6214ec0a7c8255ddb5847e1c11fa9dd4aba8c64c979784cd9fc051371674c
+size 251224

package/src/components/Tabs/__image_snapshots__/tabs-vkcom-firefox-dark-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:39bf34a07b350385ba6a29fd188feba409746e8be7a521c3bc687db38013b58b
-size 272144
+oid sha256:aea4e1f18ea39b700d6f6effca66012f16c6366f78671364c25a472429478b5d
+size 272134

package/src/components/Tabs/__image_snapshots__/tabs-vkcom-firefox-light-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:332953c34a6c154a92e7ebeb7791c1f6bbac03d711117a255f17281930bfb473
-size 289833
+oid sha256:2eb17946d080432705c2fd807e124edb1bb6cec2200d25a14e993868c33a7468
+size 291305

package/src/components/Tabs/__image_snapshots__/tabs-vkcom-webkit-dark-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e4b402f7d536733a9ddd50745670d7a54d9ddaeafcf740b94f15604b455b5041
-size 227251
+oid sha256:1b01a142706acfcd98c1d99a003cc7042554f9b98d609e8765df83dc109fd21e
+size 227856

package/src/components/Tabs/__image_snapshots__/tabs-vkcom-webkit-light-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2f29a337ec8d348ebd822317b1e96a895c7cfe543b067f787df92090c1a160ef
-size 233361
+oid sha256:9da9e5d44f5b55e6cac4f0d5710449e1555f4bee38d98f3f18dfea323d73e8e5
+size 233830

package/src/components/TabsItem/TabsItem.module.css

@@ -113,11 +113,6 @@
 .TabsItem--selected.TabsItem--mode-accent .TabsItem__before {
   color: var(--vkui--color_icon_accent_themed);
 }
-
-.TabsItem--selected.TabsItem--mode-secondary .TabsItem__before {
-  opacity: 0.72;
-}
-
 /* Элемент */
 .TabsItem__label {
   max-inline-size: 100%;
@@ -137,10 +132,6 @@
   color: var(--vkui--color_text_accent_themed);
 }
 
-.TabsItem--selected.TabsItem--mode-secondary .TabsItem__label {
-  opacity: 0.72;
-}
-
 /* Элемент */
 .TabsItem__status {
   margin-inline-start: 6px;

package/src/components/Tappable/Tappable.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<TappableProps>;
 export const Playground: Story = {
   render: (args) => (
     <Tappable {...args} onClick={noop}>
-      <div style={{ padding: 16 }}>Tappable</div>
+      <div style={{ padding: 16 }}>Кнопка</div>
     </Tappable>
   ),
 };

package/src/components/Textarea/Textarea.tsx

@@ -20,7 +20,7 @@ export interface TextareaProps
     Pick<React.CSSProperties, 'maxHeight'>,
     Pick<FormFieldProps, 'status'> {
   grow?: boolean;
-  onResize?(el: HTMLTextAreaElement): void;
+  onResize?: (el: HTMLTextAreaElement) => void;
   defaultValue?: string;
 }
 

package/src/components/Touch/Readme.md

@@ -30,7 +30,7 @@ const Example = () => {
   const [limitX, setLimitX] = React.useState(0);
   const [limitY, setLimitY] = React.useState(0);
 
-  const circleRef = React.useRef();
+  const circleRef = React.useRef(null);
   const startX = React.useRef(0);
   const startY = React.useRef(0);
 

package/src/components/View/View.stories.tsx

@@ -130,7 +130,7 @@ export const SwipeBlockExample: Story = {
       React.useState<React.ReactNode | null>(null);
 
     const handleSwipeBackStartForPreventIfNeeded = React.useCallback(
-      (activePanel: string) => {
+      (activePanel: string | null) => {
         if (activePanel === 'settings') {
           if (userName !== '') {
             return;

package/src/components/View/View.tsx

@@ -36,21 +36,21 @@ export let scrollsCache: ViewsScrolls = {};
 
 export interface ViewProps extends HTMLAttributesWithRootRef<HTMLElement>, NavIdProps {
   activePanel: string;
-  onTransition?(params: { isBack: boolean; from: string; to: string }): void;
+  onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;
   /**
    * callback свайпа назад
    */
-  onSwipeBack?(): void;
+  onSwipeBack?: () => void;
   /**
    * callback начала анимации свайпа назад.
    *
    * Чтобы остановить свайп назад, возвращайте `"prevent"`.
    */
-  onSwipeBackStart?(activePanel: string | null): void | 'prevent';
+  onSwipeBackStart?: (activePanel: string | null) => void | 'prevent';
   /**
    * callback завершения анимации отмененного пользователем свайпа
    */
-  onSwipeBackCancel?(): void;
+  onSwipeBackCancel?: () => void;
   history?: string[];
 
   children: React.ReactElement | Iterable<React.ReactElement>;

package/src/components/View/ViewInfinite.tsx

@@ -45,21 +45,21 @@ export interface ViewInfiniteProps
     HasPlatform,
     NavIdProps {
   activePanel: string;
-  onTransition?(params: TransitionParams & { isBack: boolean }): void;
+  onTransition?: (params: TransitionParams & { isBack: boolean }) => void;
   /**
    * callback свайпа назад
    */
-  onSwipeBack?(): void;
+  onSwipeBack?: () => void;
   /**
    * callback начала анимации свайпа назад.
    */
-  onSwipeBackStart?(activePanel: string | null): void | 'prevent';
+  onSwipeBackStart?: (activePanel: string | null) => void | 'prevent';
   /**
    * callback завершения анимации отмененного пользователем свайпа
    */
-  onSwipeBackCancel?(): void;
+  onSwipeBackCancel?: () => void;
   history?: string[];
-  isBackCheck?(params: TransitionParams): boolean;
+  isBackCheck?: (params: TransitionParams) => boolean;
   /**
    * @ignore
    */

package/src/components/WriteBar/Readme.md

@@ -12,7 +12,7 @@ const WriteBarExample = (props) => {
   const [text4, setText4] = React.useState('Да.');
 
   const attachmentsCount = 5;
-  const fixedLayoutInnerElRef = React.useRef();
+  const fixedLayoutInnerElRef = React.useRef(null);
   const [bottomPadding, setBottomPadding] = React.useState(0);
   const [isAttachmentsShown, setIsAttachmentsShown] = React.useState(false);
   const [text, setText] = React.useState('');

package/src/hooks/useDateInput.ts

@@ -9,14 +9,14 @@ export interface UseDateInputDependencies<T, D> {
   autoFocus?: boolean;
   disabled?: boolean;
   value?: D;
-  elementsConfig(index: number): {
+  elementsConfig: (index: number) => {
     length: number;
     min: number;
     max: number;
   };
-  onInternalValueChange(value: string[]): void;
-  getInternalValue(value?: D | undefined): string[];
-  onChange?(value?: D | undefined): void;
+  onInternalValueChange: (value: string[]) => void;
+  getInternalValue: (value?: D | undefined) => string[];
+  onChange?: (value?: D | undefined) => void;
 }
 
 export function useDateInput<T extends HTMLElement, D>({

package/src/hooks/useDraggableWithDomApi/types.ts

@@ -26,13 +26,13 @@ export type SwappedItemRange = { from: number; to: number };
 
 export interface UseDraggableProps<T extends HTMLElement = HTMLElement> {
   elRef: React.MutableRefObject<T | null>;
-  onDragFinish?(value: SwappedItemRange): void;
+  onDragFinish?: (value: SwappedItemRange) => void;
 }
 
 export interface DraggableProps {
-  onDragStart(this: void, event: TouchEvent): void;
-  onDragEnd(this: void, event: TouchEvent): void;
-  onDragMove(this: void, event: TouchEvent): void;
+  onDragStart: (this: void, event: TouchEvent) => void;
+  onDragEnd: (this: void, event: TouchEvent) => void;
+  onDragMove: (this: void, event: TouchEvent) => void;
 }
 
 export interface UseDraggable extends DraggableProps {

package/src/hooks/useEnsuredControl.ts

@@ -6,7 +6,7 @@ export interface UseEnsuredControlProps<V, E extends React.ChangeEvent<any>> {
   value?: V;
   defaultValue: V;
   disabled?: boolean | undefined;
-  onChange?(this: void, e: E): any;
+  onChange?: (this: void, e: E) => any;
 }
 
 export function useEnsuredControl<V, E extends React.ChangeEvent<any>>({
@@ -35,7 +35,7 @@ export interface UseCustomEnsuredControlProps<V> {
   value?: V;
   defaultValue: V;
   disabled?: boolean | undefined;
-  onChange?(this: void, v: V): any;
+  onChange?: (this: void, v: V) => any;
 }
 
 export function useCustomEnsuredControl<V = any>({

package/src/hooks/useGlobalOnClickOutside.test.tsx

@@ -5,7 +5,7 @@ import { useGlobalOnClickOutside } from './useGlobalOnClickOutside';
 interface WrapperUseGlobalOnClickOutsideProps {
   disableTarget?: 'target-1' | 'target-2';
   disableAllTarget?: boolean;
-  globalClickHandler(): void;
+  globalClickHandler: () => void;
 }
 
 const WrapperUseGlobalOnClickOutside = ({

package/src/lib/floating/useFloatingWithInteractions/types.ts

@@ -104,7 +104,7 @@ export interface UseFloatingWithInteractionsReturn<T extends HTMLElement = HTMLE
   referenceProps: ReferenceProps<T>;
   floatingProps: FloatingProps<T>;
   middlewareData: UseFloatingData['middlewareData'];
-  onClose(this: void): void;
-  onEscapeKeyDown?(this: void): void;
-  onRestoreFocus(this: void): boolean;
+  onClose: (this: void) => void;
+  onEscapeKeyDown?: (this: void) => void;
+  onRestoreFocus: (this: void) => boolean;
 }

package/src/lib/rafSchd.ts

@@ -11,7 +11,7 @@ type AnyFn = (...args: any[]) => void;
 
 export interface RafSchedule<T extends AnyFn> {
   (...args: Parameters<T>): void;
-  cancel(): void;
+  cancel: () => void;
 }
 
 export const rafSchd = <T extends AnyFn>(fn: T): RafSchedule<T> => {

package/src/lib/react/simulateReactInput.ts

@@ -2,9 +2,9 @@
 
 export interface SimulateReactInputTargetState {
   _valueTracker?: {
-    getValue(): string;
-    setValue(value: string): void;
-    stopTracking(): void;
+    getValue: () => string;
+    setValue: (value: string) => void;
+    stopTracking: () => void;
   };
 }
 

package/src/storybook/VKUIDecorators.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-import { UPDATE_GLOBALS } from '@storybook/core-events';
-import { addons } from '@storybook/preview-api';
 import { Decorator } from '@storybook/react';
-import { SET_STORYBOOK_THEME } from '../../.storybook/addons/storybook-theme/constants';
 import { AdaptivityProvider } from '../components/AdaptivityProvider/AdaptivityProvider';
 import { AppRoot } from '../components/AppRoot/AppRoot';
 import { ConfigProvider } from '../components/ConfigProvider/ConfigProvider';
@@ -20,24 +17,23 @@ const CenteredStyle: React.CSSProperties = {
   flexDirection: 'column',
 };
 
-const channel = addons.getChannel();
-
 export const withVKUIWrapper: Decorator = (Component, context) => {
-  const { platform, appearance, hasPointer = false, hasCustomPanelHeaderAfter } = context.globals;
-
-  // eslint-disable-next-line no-restricted-properties, react-hooks/rules-of-hooks
-  React.useLayoutEffect(() => {
-    const updateGlobals = (theme: 'light' | 'dark') => {
-      channel.emit(UPDATE_GLOBALS, { globals: { appearance: theme } });
-    };
-    channel.on(SET_STORYBOOK_THEME, updateGlobals);
-    return () => {
-      channel.off(SET_STORYBOOK_THEME, updateGlobals);
-    };
-  }, []);
+  const {
+    platform,
+    appearance,
+    hasPointer = false,
+    hasCustomPanelHeaderAfter,
+    direction,
+    writingMode,
+  } = context.globals;
 
   const { centered } = context.parameters;
 
+  const style: React.CSSProperties = {
+    writingMode,
+    ...(centered ? CenteredStyle : {}),
+  };
+
   return (
     <ConfigProvider
       platform={platform}
@@ -45,7 +41,7 @@ export const withVKUIWrapper: Decorator = (Component, context) => {
       hasCustomPanelHeaderAfter={hasCustomPanelHeaderAfter}
     >
       <AdaptivityProvider hasPointer={hasPointer}>
-        <AppRoot style={centered ? CenteredStyle : undefined}>
+        <AppRoot style={style} dir={direction}>
           <Component />
         </AppRoot>
       </AdaptivityProvider>

package/src/testing/e2e/ComponentPlayground.tsx

@@ -14,7 +14,7 @@ export interface InternalComponentPlaygroundProps<Props = React.ComponentProps<'
   appearance: AppearanceType;
   adaptivityProviderProps?: Partial<AdaptivityProps>;
   propSets?: Parameters<typeof multiCartesian<Props>>[0];
-  children(props: Props): React.ReactElement;
+  children: (props: Props) => React.ReactElement;
   AppWrapper?: React.ComponentType<AppWrapperProps>;
 }
 

package/src/testing/e2e/types.ts

@@ -25,7 +25,7 @@ export interface ScreenshotWithClipToContentOptions {
 
 export interface VKUITestHelpers {
   componentPlaygroundProps: ComponentPlaygroundProps;
-  expectScreenshotClippedToContent(options?: ScreenshotWithClipToContentOptions): Promise<void>;
+  expectScreenshotClippedToContent: (options?: ScreenshotWithClipToContentOptions) => Promise<void>;
   /** @private  */
   _skipByOnlyForProps: void;
 }

package/src/types.ts

@@ -89,3 +89,40 @@ export type GetPropsWithFunctionKeys<T> = {
 }[keyof T];
 
 export type PickOnlyFunctionProps<T> = Pick<T, GetPropsWithFunctionKeys<T>>;
+
+/**
+ * Даёт возможность поймать ошибку, если в компонент передаются лишние свойства.
+ *
+ * @example
+ * // пример использования
+ * const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;
+ *
+ * @example
+ * // расширенный пример
+ * type SelectProps {
+ *   mode: string,
+ *   multiline: boolean;
+ *   selectType?: SelectType;
+ * }
+ *
+ * type NativeSelectProps {
+ *   selectType?: SelectType;
+ * }
+ *
+ * const selectProps: SelectProps = {
+ *   mode: "card",
+ *   multiline: true,
+ *   selectType: "default",
+ * }
+ *
+ * // будет ошибка, так как multiline в NativeSelectProps нет
+ * const {mode, ...restProps} = selectProps;
+ * const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;
+ *
+ * // а вот так ошибки не будет, так как restProps больше не содержит multiline
+ * const {mode, multiline, ...restProps} = selectProps;
+ * const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;
+ */
+export type HasOnlyExpectedProps<Props, ExpectedProps> = {
+  [K in keyof Props]: K extends keyof ExpectedProps ? ExpectedProps[K] : never;
+};