@vkontakte/vkui 4.24.0 → 4.26.0

package/src/components/View/ViewInfinite.tsx

@@ -32,7 +32,7 @@ enum SwipeBackResults {
 }
 
 interface Scrolls {
-  [index: string]: number[];
+  [index: string]: Array<number | undefined>;
 }
 
 interface ViewsScrolls {
@@ -43,7 +43,7 @@ type TransitionEventHandler = (e?: TransitionEvent) => void;
 
 let scrollsCache: ViewsScrolls = {};
 
-export type TransitionParams = { from: string; to: string };
+export type TransitionParams = { from: string | null; to: string | null };
 
 export interface ViewInfiniteProps
   extends React.HTMLAttributes<HTMLElement>,
@@ -84,18 +84,18 @@ export interface ViewInfiniteProps
 export interface ViewInfiniteState {
   animated: boolean;
 
-  visiblePanels: string[];
-  activePanel: string;
-  isBack: boolean;
-  prevPanel: string;
-  nextPanel: string;
+  visiblePanels: Array<string | null>;
+  activePanel: string | null;
+  isBack?: boolean;
+  prevPanel: string | null;
+  nextPanel: string | null;
 
   swipingBack: boolean;
   swipebackStartX: number;
   swipeBackShift: number;
-  swipeBackNextPanel: string;
-  swipeBackPrevPanel: string;
-  swipeBackResult: SwipeBackResults;
+  swipeBackNextPanel: string | null;
+  swipeBackPrevPanel: string | null;
+  swipeBackResult: SwipeBackResults | null;
 
   browserSwipe: boolean;
 }
@@ -131,9 +131,9 @@ class ViewInfinite extends React.Component<
     history: [],
   };
 
-  private scrolls = scrollsCache[getNavId(this.props, warn)] || {};
-  private transitionFinishTimeout: ReturnType<typeof setTimeout>;
-  private animationFinishTimeout: ReturnType<typeof setTimeout>;
+  private scrolls = scrollsCache[getNavId(this.props, warn) as string] || {};
+  private transitionFinishTimeout: number | undefined = undefined;
+  private animationFinishTimeout: number | undefined = undefined;
 
   get document() {
     return this.props.document;
@@ -147,7 +147,7 @@ class ViewInfinite extends React.Component<
     return React.Children.toArray(this.props.children) as React.ReactElement[];
   }
 
-  panelNodes: { [id: string]: HTMLDivElement } = {};
+  panelNodes: { [id: string]: HTMLDivElement | null } = {};
 
   componentWillUnmount() {
     const id = getNavId(this.props);
@@ -193,7 +193,7 @@ class ViewInfinite extends React.Component<
         ...this.scrolls,
         [prevProps.activePanel]: [
           ...prevScrolls,
-          this.props.scroll.getScroll().y,
+          this.props.scroll?.getScroll().y,
         ],
       };
       this.scrolls = scrolls;
@@ -212,7 +212,9 @@ class ViewInfinite extends React.Component<
 
         // Фолбек анимации перехода
         if (!animationEvent.supported) {
-          clearTimeout(this.animationFinishTimeout);
+          if (this.animationFinishTimeout) {
+            clearTimeout(this.animationFinishTimeout);
+          }
           this.animationFinishTimeout = setTimeout(
             this.transitionEndHandler,
             this.props.platform === ANDROID || this.props.platform === VKCOM
@@ -230,19 +232,25 @@ class ViewInfinite extends React.Component<
     ) {
       const nextPanel = this.state.swipeBackNextPanel;
       const prevPanel = this.state.swipeBackPrevPanel;
+      let scrollPosition: undefined | number = undefined;
 
-      const prevPanelScrolls = [...(this.scrolls[prevPanel] || [])].slice(
-        0,
-        -1
-      );
-      const newPanelScrolls = [...(this.scrolls[nextPanel] || [])];
-      const scrollPosition = newPanelScrolls.pop();
       this.scrolls = {
         ...this.scrolls,
-        [nextPanel]: newPanelScrolls,
-        [prevPanel]: prevPanelScrolls,
       };
 
+      if (prevPanel !== null) {
+        const prevPanelScrolls = [...(this.scrolls[prevPanel] || [])].slice(
+          0,
+          -1
+        );
+        this.scrolls[prevPanel] = prevPanelScrolls;
+      }
+      if (nextPanel !== null) {
+        const newPanelScrolls = [...(this.scrolls[nextPanel] || [])];
+        scrollPosition = newPanelScrolls.pop();
+        this.scrolls[nextPanel] = newPanelScrolls;
+      }
+
       this.setState(
         {
           swipeBackPrevPanel: null,
@@ -255,7 +263,7 @@ class ViewInfinite extends React.Component<
           visiblePanels: [nextPanel],
         },
         () => {
-          this.props.scroll.scrollTo(0, scrollPosition);
+          this.props.scroll?.scrollTo(0, scrollPosition);
           prevProps.onTransition &&
             prevProps.onTransition({
               isBack: true,
@@ -282,7 +290,8 @@ class ViewInfinite extends React.Component<
     // Если свайп назад отменился (когда пользователь недостаточно сильно свайпнул)
     if (
       prevState.swipeBackResult === SwipeBackResults.fail &&
-      !this.state.swipeBackResult
+      !this.state.swipeBackResult &&
+      this.state.activePanel !== null
     ) {
       const newPanelScrolls = [...(this.scrolls[this.state.activePanel] || [])];
       const scrollPosition = newPanelScrolls.pop();
@@ -291,7 +300,7 @@ class ViewInfinite extends React.Component<
         [this.state.activePanel]: newPanelScrolls,
       };
 
-      this.props.scroll.scrollTo(0, scrollPosition);
+      this.props.scroll?.scrollTo(0, scrollPosition);
     }
 
     // Закончился Safari свайп
@@ -312,20 +321,29 @@ class ViewInfinite extends React.Component<
 
   shouldDisableTransitionMotion(): boolean {
     return (
-      this.props.configProvider.transitionMotionEnabled === false ||
-      !this.props.splitCol.animate
+      this.props.configProvider?.transitionMotionEnabled === false ||
+      !this.props.splitCol?.animate
     );
   }
 
   waitTransitionFinish(
-    elem: HTMLElement,
+    elem: HTMLElement | null | undefined,
     eventHandler: TransitionEventHandler
   ): void {
-    if (transitionEvent.supported) {
-      elem.removeEventListener(transitionEvent.name, eventHandler);
-      elem.addEventListener(transitionEvent.name, eventHandler);
+    if (transitionEvent.supported && transitionEvent.name && elem) {
+      elem.removeEventListener(
+        transitionEvent.name as keyof HTMLElementEventMap,
+        eventHandler as EventListener
+      );
+      elem.addEventListener(
+        transitionEvent.name as keyof HTMLElementEventMap,
+        eventHandler as EventListener
+      );
     } else {
-      clearTimeout(this.transitionFinishTimeout);
+      if (this.transitionFinishTimeout) {
+        clearTimeout(this.transitionFinishTimeout);
+      }
+
       this.transitionFinishTimeout = setTimeout(
         eventHandler,
         this.props.platform === ANDROID || this.props.platform === VKCOM
@@ -336,12 +354,15 @@ class ViewInfinite extends React.Component<
   }
 
   blurActiveElement(): void {
-    if (typeof this.window !== "undefined" && this.document.activeElement) {
+    if (typeof this.window !== "undefined" && this.document?.activeElement) {
       (this.document.activeElement as HTMLElement).blur();
     }
   }
 
-  pickPanel(id: string) {
+  pickPanel(id: string | null) {
+    if (id === null) {
+      return undefined;
+    }
     return this.panelNodes[id];
   }
 
@@ -369,7 +390,7 @@ class ViewInfinite extends React.Component<
         isBack: undefined,
       },
       () => {
-        this.props.scroll.scrollTo(0, isBack ? scrollPosition : 0);
+        this.props.scroll?.scrollTo(0, isBack ? scrollPosition : 0);
         this.props.onTransition &&
           this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
       }
@@ -378,15 +399,16 @@ class ViewInfinite extends React.Component<
 
   transitionEndHandler = (e?: React.AnimationEvent): void => {
     if (
-      !e ||
-      [
-        "vkui-animation-ios-next-forward",
-        "vkui-animation-ios-prev-back",
-        "vkui-animation-view-next-forward",
-        "vkui-animation-view-prev-back",
-      ].includes(e.animationName)
+      (!e ||
+        [
+          "vkui-animation-ios-next-forward",
+          "vkui-animation-ios-prev-back",
+          "vkui-animation-view-next-forward",
+          "vkui-animation-view-prev-back",
+        ].includes(e.animationName)) &&
+      this.state.prevPanel !== null
     ) {
-      this.flushTransition(this.state.prevPanel, this.state.isBack);
+      this.flushTransition(this.state.prevPanel, Boolean(this.state.isBack));
     }
   };
 
@@ -424,7 +446,7 @@ class ViewInfinite extends React.Component<
   }
 
   onMoveX = (e: TouchEvent): void => {
-    if (swipeBackExcluded(e)) {
+    if (swipeBackExcluded(e) || !this.window) {
       return;
     }
 
@@ -432,7 +454,7 @@ class ViewInfinite extends React.Component<
 
     if (
       platform === IOS &&
-      !configProvider.isWebView &&
+      !configProvider?.isWebView &&
       (e.startX <= 70 || e.startX >= this.window.innerWidth - 70) &&
       !this.state.browserSwipe
     ) {
@@ -441,7 +463,7 @@ class ViewInfinite extends React.Component<
 
     if (
       platform === IOS &&
-      configProvider.isWebView &&
+      configProvider?.isWebView &&
       this.props.onSwipeBack
     ) {
       if (this.state.animated && e.startX <= 70) {
@@ -451,22 +473,24 @@ class ViewInfinite extends React.Component<
       if (
         e.startX <= 70 &&
         !this.state.swipingBack &&
-        this.props.history.length > 1
+        (this.props.history?.length ?? 0) > 1
       ) {
-        const prevScrolls = this.scrolls[this.state.activePanel] || [];
-        this.scrolls = {
-          ...this.scrolls,
-          [this.state.activePanel]: [
-            ...prevScrolls,
-            this.props.scroll.getScroll().y,
-          ],
-        };
+        if (this.state.activePanel !== null) {
+          const prevScrolls = this.scrolls[this.state.activePanel] || [];
+          this.scrolls = {
+            ...this.scrolls,
+            [this.state.activePanel]: [
+              ...prevScrolls,
+              this.props.scroll?.getScroll().y,
+            ],
+          };
+        }
 
         this.setState({
           swipingBack: true,
           swipebackStartX: e.startX,
           swipeBackPrevPanel: this.state.activePanel,
-          swipeBackNextPanel: this.props.history.slice(-2)[0],
+          swipeBackNextPanel: this.props.history!.slice(-2)[0],
         });
       }
       if (this.state.swipingBack) {
@@ -487,7 +511,7 @@ class ViewInfinite extends React.Component<
   };
 
   onEnd = (e: TouchEvent): void => {
-    if (this.state.swipingBack) {
+    if (this.state.swipingBack && this.window) {
       const speed = (this.state.swipeBackShift / e.duration) * 1000;
       if (this.state.swipeBackShift === 0) {
         this.onSwipeBackCancel();
@@ -505,8 +529,8 @@ class ViewInfinite extends React.Component<
     }
   };
 
-  calcPanelSwipeStyles(panelId: string): React.CSSProperties {
-    if (!canUseDOM) {
+  calcPanelSwipeStyles(panelId: string | undefined): React.CSSProperties {
+    if (!canUseDOM || !this.window) {
       return {};
     }
 
@@ -589,7 +613,8 @@ class ViewInfinite extends React.Component<
         const panelId = getNavId(panel.props, warn);
 
         return (
-          this.state.visiblePanels.includes(panelId) ||
+          (panelId !== undefined &&
+            this.state.visiblePanels.includes(panelId)) ||
           panelId === swipeBackPrevPanel ||
           panelId === swipeBackNextPanel
         );
@@ -639,7 +664,7 @@ class ViewInfinite extends React.Component<
               (panelId === nextPanel && isBack);
             const isTransitionTarget =
               animated && panelId === (isBack ? prevPanel : nextPanel);
-            const scrollList = this.scrolls[panelId] || [];
+            const scrollList = (panelId && this.scrolls[panelId]) || [];
             const scroll = scrollList[scrollList.length - 1] || 0;
 
             return (
@@ -658,15 +683,17 @@ class ViewInfinite extends React.Component<
                     swipeBackResult === SwipeBackResults.fail,
                 })}
                 onAnimationEnd={
-                  isTransitionTarget ? this.transitionEndHandler : null
+                  isTransitionTarget ? this.transitionEndHandler : undefined
+                }
+                ref={(el) =>
+                  panelId !== undefined && (this.panelNodes[panelId] = el)
                 }
-                ref={(el) => (this.panelNodes[panelId] = el)}
                 style={this.calcPanelSwipeStyles(panelId)}
                 key={panelId}
               >
                 <div
                   vkuiClass="View__panel-in"
-                  style={{ marginTop: compensateScroll ? -scroll : null }}
+                  style={{ marginTop: compensateScroll ? -scroll : undefined }}
                 >
                   <NavTransitionProvider
                     entering={
@@ -689,6 +716,7 @@ class ViewInfinite extends React.Component<
   }
 }
 
+// eslint-disable-next-line import/no-default-export
 export default withContext(
   withContext(
     withContext(

package/src/components/WriteBar/WriteBar.tsx

@@ -12,7 +12,7 @@ export interface WriteBarProps
     HasRootRef<HTMLDivElement>,
     HasRef<HTMLTextAreaElement> {
   /**
-   * Содержимое, отображаемое слево от поля ввода.
+   * Содержимое, отображаемое слева от поля ввода.
    */
   before?: React.ReactNode;
   /**
@@ -56,14 +56,14 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
   const textareaRef = useExternRef(getRef);
   const textareaMinHeightRef = React.useRef<number | null>(null);
 
-  const resize = () => {
+  const resize = React.useCallback(() => {
     const textareaEl = textareaRef.current;
     if (!textareaEl) {
       return;
     }
 
     const { offsetHeight, scrollHeight } = textareaEl;
-    const style = window.getComputedStyle(textareaEl);
+    const style = window!.getComputedStyle(textareaEl);
     const paddingTop = parseInt(style.paddingTop);
     const paddingBottom = parseInt(style.paddingBottom);
 
@@ -86,7 +86,7 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
     if (isFunction(onHeightChange)) {
       onHeightChange();
     }
-  };
+  }, [onHeightChange, textareaRef, window]);
 
   const onTextareaChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
     event
@@ -102,7 +102,7 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
 
   React.useEffect(() => {
     resize();
-  }, [value]);
+  }, [resize, value]);
 
   return (
     <div

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -46,7 +46,7 @@ export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
   const platform = usePlatform();
 
   let icon: React.ReactNode;
-  let ariaLabel: string;
+  let ariaLabel: string | undefined = undefined;
 
   switch (mode) {
     case "attach":

package/src/helpers/getScheme.ts

@@ -0,0 +1,27 @@
+import { AppearanceType } from "@vkontakte/vk-bridge";
+import { PlatformType, VKCOM } from "../lib/platform";
+import { Scheme } from "./scheme";
+
+export interface GetSchemeProps {
+  platform?: PlatformType;
+  appearance: AppearanceType;
+}
+
+export function getScheme({ platform, appearance }: GetSchemeProps): Scheme {
+  switch (appearance) {
+    case "dark":
+      switch (platform) {
+        case VKCOM:
+          return Scheme.VKCOM_DARK;
+        default:
+          return Scheme.SPACE_GRAY;
+      }
+    case "light":
+      switch (platform) {
+        case VKCOM:
+          return Scheme.VKCOM_LIGHT;
+        default:
+          return Scheme.BRIGHT_LIGHT;
+      }
+  }
+}

package/src/helpers/scheme.ts

@@ -0,0 +1,86 @@
+import { AppearanceSchemeType, AppearanceType } from "@vkontakte/vk-bridge";
+import { PlatformType, VKCOM } from "../lib/platform";
+import { warnOnce } from "../lib/warnOnce";
+import { getScheme } from "./getScheme";
+
+export enum Scheme {
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости со старыми версиями клиентов
+   */
+  DEPRECATED_CLIENT_LIGHT = "client_light",
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости со старыми версиями клиентов
+   */
+  DEPRECATED_CLIENT_DARK = "client_dark",
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости с vkcom, когда там была только одна схема
+   */
+  VKCOM = "vkcom",
+
+  BRIGHT_LIGHT = "bright_light",
+  SPACE_GRAY = "space_gray",
+  VKCOM_LIGHT = "vkcom_light",
+  VKCOM_DARK = "vkcom_dark",
+}
+
+export type AppearanceScheme =
+  | AppearanceSchemeType
+  | Scheme.VKCOM
+  | Scheme.VKCOM_DARK
+  | Scheme.VKCOM_LIGHT
+  | "inherit";
+
+export enum Appearance {
+  DARK = "dark",
+  LIGHT = "light",
+}
+
+const warn = warnOnce("scheme");
+
+export interface NormalizeSchemeProps {
+  platform: PlatformType;
+  scheme?: AppearanceScheme;
+  appearance?: AppearanceType;
+}
+
+export function normalizeScheme({
+  platform,
+  scheme,
+  appearance,
+}: NormalizeSchemeProps): Scheme | "inherit" {
+  if (appearance) {
+    return getScheme({ platform, appearance });
+  }
+
+  if (scheme === "inherit") {
+    return scheme;
+  }
+  if (scheme === Scheme.VKCOM) {
+    process.env.NODE_ENV === "development" &&
+      warn(
+        `Схема "${Scheme.VKCOM}" устарела и будет удалена 5.0.0. Вместо неё используйте "${Scheme.VKCOM_LIGHT}"`
+      );
+    return Scheme.VKCOM_LIGHT;
+  }
+  if (
+    platform === VKCOM &&
+    (scheme === Scheme.BRIGHT_LIGHT || scheme === Scheme.SPACE_GRAY)
+  ) {
+    process.env.NODE_ENV === "development" &&
+      warn(
+        `Платформа "vkcom" и схема "${scheme}" несовместимы. С этой платформой можно использовать схемы "${Scheme.VKCOM_LIGHT}" или "${Scheme.VKCOM_DARK}"`
+      );
+    return Scheme.VKCOM_LIGHT;
+  }
+  switch (scheme) {
+    case Scheme.DEPRECATED_CLIENT_LIGHT:
+      return Scheme.BRIGHT_LIGHT;
+    case Scheme.DEPRECATED_CLIENT_DARK:
+      return Scheme.SPACE_GRAY;
+    default:
+      return scheme as Scheme;
+  }
+}

package/src/hoc/withAdaptivity.tsx

@@ -4,7 +4,9 @@ import {
   SizeType,
   ViewHeight,
   ViewWidth,
+  AdaptivityContextInterface,
   AdaptivityProps,
+  SizeProps,
 } from "../components/AdaptivityProvider/AdaptivityContext";
 
 export { SizeType, ViewWidth, ViewHeight };
@@ -19,8 +21,13 @@ interface Config {
   deviceHasHover?: boolean;
 }
 
-export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
-  function AdaptivityConsumer(props: AdaptivityProps) {
+export function withAdaptivity<T extends AdaptivityProps>(
+  TargetComponent: React.ComponentType<T>,
+  config: Config
+): React.FC<Omit<T, keyof AdaptivityContextInterface> & SizeProps> {
+  const AdaptivityConsumer: React.ComponentType<
+    Omit<T, keyof AdaptivityContextInterface> & SizeProps
+  > = (props: Omit<T, keyof AdaptivityContextInterface> & SizeProps) => {
     const context = React.useContext(AdaptivityContext);
     let update = false;
 
@@ -43,6 +50,7 @@ export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
       hasMouse?: boolean;
       deviceHasHover?: boolean;
     } = {};
+
     config.sizeX ? (adaptivityProps.sizeX = sizeX) : undefined;
     config.sizeY ? (adaptivityProps.sizeY = sizeY) : undefined;
     config.viewWidth ? (adaptivityProps.viewWidth = viewWidth) : undefined;
@@ -52,8 +60,7 @@ export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
       ? (adaptivityProps.deviceHasHover = deviceHasHover)
       : undefined;
 
-    // @ts-ignore
-    const target = <TargetComponent {...props} {...adaptivityProps} />;
+    const target = <TargetComponent {...(props as T)} {...adaptivityProps} />;
 
     if (update) {
       return (
@@ -73,7 +80,7 @@ export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
     }
 
     return target;
-  }
+  };
 
-  return AdaptivityConsumer as unknown as T;
+  return AdaptivityConsumer;
 }

package/src/hoc/withContext.tsx

@@ -1,15 +1,14 @@
 import * as React from "react";
 
 export function withContext<T, X>(
-  Component: T,
+  Component: React.ComponentType<T>,
   Ctx: React.Context<X>,
   prop: string
-): T {
-  function WithContext(props: {}) {
+): React.FC<T> {
+  function WithContext(props: T) {
     const context = React.useContext<X>(Ctx);
 
-    // @ts-ignore
     return <Component {...props} {...{ [prop]: context }} />;
   }
-  return WithContext as unknown as T;
+  return WithContext;
 }

package/src/hoc/withInsets.tsx

@@ -1,10 +1,12 @@
 import { useInsets } from "../hooks/useInsets";
+import { HasInsets } from "../types";
 
-export function withInsets<T>(Component: T): T {
-  function WithInsets(props: {}) {
+export function withInsets<T extends HasInsets>(
+  Component: React.ComponentType<T>
+): React.FC<Omit<T, keyof HasInsets>> {
+  function WithInsets(props: Omit<T, keyof HasInsets>) {
     const insets = useInsets();
-    // @ts-ignore
-    return <Component {...props} insets={insets} />;
+    return <Component {...(props as T)} insets={insets} />;
   }
-  return WithInsets as unknown as T;
+  return WithInsets;
 }

package/src/hoc/withPlatform.tsx

@@ -1,13 +1,17 @@
 import * as React from "react";
 import { SSRContext } from "../lib/SSR";
+import { HasPlatform } from "../types";
 import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
 
-export function withPlatform<T>(Component: T): T {
-  function WithPlatform(props: {}) {
+export function withPlatform<T extends HasPlatform>(
+  Component: React.ComponentType<T>
+): React.FC<Omit<T, keyof HasPlatform>> {
+  function WithPlatform(props: Omit<T, keyof HasPlatform>) {
     const ssrContext = React.useContext(SSRContext);
     const { platform } = React.useContext(ConfigProviderContext);
-    // @ts-ignore
-    return <Component {...props} platform={ssrContext.platform || platform} />;
+    return (
+      <Component {...(props as T)} platform={ssrContext.platform || platform} />
+    );
   }
-  return WithPlatform as unknown as T;
+  return WithPlatform;
 }

package/src/hooks/useAdaptivity.ts

@@ -2,10 +2,11 @@ import * as React from "react";
 import {
   AdaptivityContext,
   AdaptivityProps,
+  AdaptivityContextInterface,
 } from "../components/AdaptivityProvider/AdaptivityContext";
 
 export type { AdaptivityProps };
 
-export const useAdaptivity = (): AdaptivityProps => {
+export const useAdaptivity = (): AdaptivityContextInterface => {
   return React.useContext(AdaptivityContext);
 };

package/src/hooks/useEnsuredControl.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 export function useEnsuredControl<V, E>(
   props: { value?: V; onChange?: (e: E) => any },
   options: { defaultValue: V }
-): [V, (e: E) => any] {
+): [V | undefined, (e: E) => any] {
   const isControlled = props.hasOwnProperty("value");
   const [localValue, setLocalValue] = React.useState(options.defaultValue);
   const onChange = React.useCallback(
@@ -11,7 +11,7 @@ export function useEnsuredControl<V, E>(
       !isControlled && setLocalValue(e.target.value);
       props.onChange && props.onChange(e);
     },
-    [props.onChange]
+    [isControlled, props]
   );
   return [isControlled ? props.value : localValue, onChange];
 }