cx 26.0.14 → 26.1.1

package/src/widgets/ReactElementWrapper.spec.tsx

@@ -1,8 +1,7 @@
 import { Store } from "../data/Store";
 import assert from "assert";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
 import { VDOM } from "../ui/Widget";
-import { act } from "react-test-renderer";
 import {
    ReactFunctionComponent,
    ReactCounterComponent,
@@ -17,7 +16,7 @@ import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
 import { ReactElementWrapper } from "./ReactElementWrapper";
 
 describe("ReactElementWrapper", () => {
-   it("renders React components as tag", () => {
+   it("renders React components as tag", async () => {
       class MyReactComponent extends VDOM.Component<any> {
          render() {
             return VDOM.createElement("div", { className: "my-component" }, this.props.children);
@@ -26,7 +25,7 @@ describe("ReactElementWrapper", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <MyReactComponent>
@@ -42,10 +41,10 @@ describe("ReactElementWrapper", () => {
       assert(tree.children && tree.children.length === 1, "Expected one child");
    });
 
-   it("renders React function components with props", () => {
+   it("renders React function components with props", async () => {
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <ReactFunctionComponent title="Test Title">
@@ -69,10 +68,10 @@ describe("ReactElementWrapper", () => {
       assert.equal(contentDiv.props.className, "content");
    });
 
-   it("renders React function components with hooks", () => {
+   it("renders React function components with hooks", async () => {
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <ReactCounterComponent initialCount={5} />
@@ -94,10 +93,10 @@ describe("ReactElementWrapper", () => {
       assert.equal(button.type, "button");
    });
 
-   it("renders React class components with props", () => {
+   it("renders React class components with props", async () => {
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <ReactClassComponent label="Test Label">
@@ -122,10 +121,10 @@ describe("ReactElementWrapper", () => {
       assert.equal(bodyDiv.props.className, "body");
    });
 
-   it("renders React PureComponent", () => {
+   it("renders React PureComponent", async () => {
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <ReactPureComponent value="Pure Value" />
@@ -139,11 +138,11 @@ describe("ReactElementWrapper", () => {
       assert.deepEqual(tree.children, ["Pure Value"]);
    });
 
-   it("renders React function component with useRef and useEffect", () => {
+   it("renders React function component with useRef and useEffect", async () => {
       let store = new Store();
       let mountedElement: HTMLDivElement | null = null;
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <ReactRefEffectComponent
@@ -161,20 +160,17 @@ describe("ReactElementWrapper", () => {
       assert.deepEqual(tree.children, ["Component with ref and effect"]);
    });
 
-   it("renders React function component with useEffect that updates state", () => {
+   it("renders React function component with useEffect that updates state", async () => {
       let store = new Store();
-      let component: ReturnType<typeof createTestRenderer>;
 
-      act(() => {
-         component = createTestRenderer(
-            store,
-            <cx>
-               <ReactEffectStateComponent value="Test" />
-            </cx>,
-         );
-      });
+      const component = await createTestRenderer(
+         store,
+         <cx>
+            <ReactEffectStateComponent value="Test" />
+         </cx>,
+      );
 
-      let tree = component!.toJSON();
+      let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");
       assert.equal(tree.type, "div");
       assert.equal(tree.props.className, "react-effect-state-component");
@@ -187,7 +183,7 @@ describe("ReactElementWrapper", () => {
       assert.deepEqual(processedSpan.children, ["Processed: Test"]);
    });
 
-   it("translates CxJS accessor bindings to React component props", () => {
+   it("translates CxJS accessor bindings to React component props", async () => {
       interface StoreModel {
          text: string;
          count: number;
@@ -219,7 +215,7 @@ describe("ReactElementWrapper", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");
@@ -238,7 +234,7 @@ describe("ReactElementWrapper", () => {
       assert.deepEqual(tagsSpan.children, ["a, b, c"]);
    });
 
-   it("supports visible prop on React components", () => {
+   it("supports visible prop on React components", async () => {
       interface StoreModel {
          show: boolean;
       }
@@ -251,7 +247,7 @@ describe("ReactElementWrapper", () => {
          },
       });
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <div>
@@ -268,13 +264,15 @@ describe("ReactElementWrapper", () => {
       assert.equal((tree.children![0] as any).type, "span");
 
       // Update store to make component visible
-      store.set("show", true);
+      await act(async () => {
+         store.set("show", true);
+      });
       let tree2 = component.toJSON();
       assert(tree2 && !Array.isArray(tree2), "Expected single element");
       assert.equal(tree2.children!.length, 2, "Expected both children to be visible");
    });
 
-   it("supports controller prop on React components", () => {
+   it("supports controller prop on React components", async () => {
       let controllerInitialized = false;
 
       class TestController extends Controller {
@@ -295,7 +293,7 @@ describe("ReactElementWrapper", () => {
          },
       });
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <ReactPropsComponent text={$store.text} count={10} enabled={true} controller={TestController} />
@@ -310,7 +308,7 @@ describe("ReactElementWrapper", () => {
       assert.deepEqual(textSpan.children, ["Controller Test"]);
    });
 
-   it("updates React component when bound store data changes", () => {
+   it("updates React component when bound store data changes", async () => {
       interface StoreModel {
          text: string;
          count: number;
@@ -327,7 +325,7 @@ describe("ReactElementWrapper", () => {
          },
       });
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <ReactPropsComponent text={$store.text} count={$store.count} enabled={$store.enabled} />
@@ -340,9 +338,11 @@ describe("ReactElementWrapper", () => {
       assert.deepEqual(tree1.children[2].children, ["no"]);
 
       // Update store
-      store.set("text", "Updated");
-      store.set("count", 99);
-      store.set("enabled", true);
+      await act(async () => {
+         store.set("text", "Updated");
+         store.set("count", 99);
+         store.set("enabled", true);
+      });
 
       let tree2 = component.toJSON() as any;
       assert.deepEqual(tree2.children[0].children, ["Updated"]);

package/src/widgets/autoFocus.ts

@@ -1,9 +1,9 @@
-import { FocusManager } from "../ui/FocusManager";
-import { isTouchEvent } from "../util/isTouchEvent";
-
-export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
-   let data = component.props.data || component.props.instance.data;
-   let autoFocusValue = el && data.autoFocus;
-   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
-   component.autoFocusValue = autoFocusValue;
-}
+import { FocusManager } from "../ui/FocusManager";
+import { isTouchEvent } from "../util/isTouchEvent";
+
+export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
+   let data = component.props.data || component.props.instance.data;
+   let autoFocusValue = el && data.autoFocus;
+   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
+   component.autoFocusValue = autoFocusValue;
+}

package/src/widgets/cx.ts

@@ -1,63 +1,63 @@
-import { HtmlElement } from "./HtmlElement";
-import { VDOM } from "../ui/Widget";
-import { createComponentFactory, isComponentFactory } from "../util/Component";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { isString } from "../util/isString";
-import { isNumber } from "../util/isNumber";
-import { isFunction } from "../util/isFunction";
-import { isUndefined } from "../util/isUndefined";
-import { isArray } from "../util/isArray";
-
-import { flattenProps } from "../ui/flattenProps";
-
-let htmlFactoryCache: Record<string, any> = {};
-
-function getHtmlElementFactory(tagName: string): any {
-   let factory = htmlFactoryCache[tagName];
-   if (factory) return factory;
-   return (htmlFactoryCache[tagName] = createComponentFactory(
-      () => {},
-      (config: any) => HtmlElement.create(HtmlElement, { tag: tagName }, flattenProps(config)),
-      { tag: tagName },
-   ));
-}
-
-export function cx(typeName: any, props?: any, ...children: any[]): any {
-   if (isArray(typeName)) return typeName;
-
-   if (isFunction(typeName) && isUndefined(props))
-      return createFunctionalComponent((config: any) => typeName(flattenProps(config)));
-
-   if (typeName.type || typeName.$type) return typeName;
-
-   if (children && children.length == 0) children = [];
-
-   if (children && children.length == 1) children = children[0];
-
-   if (typeName == "cx") return children;
-
-   if (typeName == "react") return react(children);
-
-   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) typeName = getHtmlElementFactory(typeName);
-
-   return {
-      $type: typeName,
-      $props: props,
-      jsxAttributes: props && Object.keys(props),
-      children,
-   };
-}
-
-export function react(config: any): any {
-   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config)) return config;
-
-   if (isArray(config)) return config.map(react);
-
-   let type = config.$type;
-
-   if (isComponentFactory(type) && type.$meta && type.$meta.tag) type = type.$meta.tag;
-
-   if (isArray(config.children)) return VDOM.createElement(type, config.$props, ...config.children.map(react));
-
-   return VDOM.createElement(type, config.$props, react(config.children));
-}
+import { HtmlElement } from "./HtmlElement";
+import { VDOM } from "../ui/Widget";
+import { createComponentFactory, isComponentFactory } from "../util/Component";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { isString } from "../util/isString";
+import { isNumber } from "../util/isNumber";
+import { isFunction } from "../util/isFunction";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+
+import { flattenProps } from "../ui/flattenProps";
+
+let htmlFactoryCache: Record<string, any> = {};
+
+function getHtmlElementFactory(tagName: string): any {
+   let factory = htmlFactoryCache[tagName];
+   if (factory) return factory;
+   return (htmlFactoryCache[tagName] = createComponentFactory(
+      () => {},
+      (config: any) => HtmlElement.create(HtmlElement, { tag: tagName }, flattenProps(config)),
+      { tag: tagName },
+   ));
+}
+
+export function cx(typeName: any, props?: any, ...children: any[]): any {
+   if (isArray(typeName)) return typeName;
+
+   if (isFunction(typeName) && isUndefined(props))
+      return createFunctionalComponent((config: any) => typeName(flattenProps(config)));
+
+   if (typeName.type || typeName.$type) return typeName;
+
+   if (children && children.length == 0) children = [];
+
+   if (children && children.length == 1) children = children[0];
+
+   if (typeName == "cx") return children;
+
+   if (typeName == "react") return react(children);
+
+   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) typeName = getHtmlElementFactory(typeName);
+
+   return {
+      $type: typeName,
+      $props: props,
+      jsxAttributes: props && Object.keys(props),
+      children,
+   };
+}
+
+export function react(config: any): any {
+   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config)) return config;
+
+   if (isArray(config)) return config.map(react);
+
+   let type = config.$type;
+
+   if (isComponentFactory(type) && type.$meta && type.$meta.tag) type = type.$meta.tag;
+
+   if (isArray(config.children)) return VDOM.createElement(type, config.$props, ...config.children.map(react));
+
+   return VDOM.createElement(type, config.$props, react(config.children));
+}

package/src/widgets/form/Checkbox.tsx

@@ -1,6 +1,5 @@
 /** @jsxImportSource react */
 
-import * as React from "react";
 import { VDOM } from "../../ui/VDOM";
 import type { Instance } from "../../ui/Instance";
 import type { RenderingContext } from "../../ui/RenderingContext";

package/src/widgets/form/ColorField.tsx

@@ -1,6 +1,5 @@
 /** @jsxImportSource react */
 
-import * as React from "react";
 import { Cx } from "../../ui/Cx";
 import { DropdownInstance, DropdownWidgetProps, Instance } from "../../ui/Instance";
 import type { RenderingContext } from "../../ui/RenderingContext";
@@ -49,7 +48,10 @@ export interface ColorFieldConfig extends FieldConfig {
    onValidate?: string | ((value: string, instance: Instance, validationParams: Record<string, unknown>) => unknown);
 }
 
-export class ColorFieldInstance<F extends ColorField = ColorField> extends FieldInstance<F> implements DropdownWidgetProps {
+export class ColorFieldInstance<F extends ColorField = ColorField>
+   extends FieldInstance<F>
+   implements DropdownWidgetProps
+{
    lastDropdown?: Instance;
    dropdownOpen?: boolean;
    selectedIndex?: number;
@@ -231,10 +233,7 @@ class ColorInput extends VDOM.Component<ColorInputProps, ColorInputState> {
 
       let insideButton;
       if (!data.readOnly && !data.disabled) {
-         if (
-            showClear &&
-            (((!data.required || alwaysShowClear) && !data.empty) || instance.state?.inputError)
-         )
+         if (showClear && (((!data.required || alwaysShowClear) && !data.empty) || instance.state?.inputError))
             insideButton = (
                <div
                   className={CSS.element(baseClass, "clear")}
@@ -301,14 +300,18 @@ class ColorInput extends VDOM.Component<ColorInputProps, ColorInputState> {
                type="text"
                className={CSS.expand(CSS.element(baseClass, "input"), data.inputClass)}
                style={data.inputStyle as React.CSSProperties}
-               defaultValue={this.trim(data.value as string || "")}
+               defaultValue={this.trim((data.value as string) || "")}
                disabled={data.disabled as boolean}
                readOnly={data.readOnly as boolean}
                tabIndex={data.tabIndex as number}
                placeholder={data.placeholder as string}
-               {...data.inputAttrs as Record<string, any>}
-               onInput={(e: React.ChangeEvent<HTMLInputElement>) => this.onChange((e.target as HTMLInputElement).value, "input")}
-               onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.onChange((e.target as HTMLInputElement).value, "change")}
+               {...(data.inputAttrs as Record<string, any>)}
+               onInput={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  this.onChange((e.target as HTMLInputElement).value, "input")
+               }
+               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  this.onChange((e.target as HTMLInputElement).value, "change")
+               }
                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => this.onKeyDown(e)}
                onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
                   this.onBlur(e);
@@ -355,7 +358,7 @@ class ColorInput extends VDOM.Component<ColorInputProps, ColorInputState> {
       let { instance } = this.props;
       let { widget } = instance;
       const colorFieldWidget = widget as ColorField;
-      
+
       if (colorFieldWidget.trackFocus) {
          this.setState({
             focus: true,
@@ -430,7 +433,7 @@ class ColorInput extends VDOM.Component<ColorInputProps, ColorInputState> {
    UNSAFE_componentWillReceiveProps(props: ColorInputProps): void {
       let { data, instance } = props;
       let { state } = instance;
-      let nv = this.trim(data.value as string || "");
+      let nv = this.trim((data.value as string) || "");
       if (nv != this.input.value && (this.data.value != data.value || !state?.inputError)) {
          this.input.value = nv;
          instance.setState({

package/src/widgets/form/DateTimeField.tsx

@@ -1,6 +1,4 @@
 /** @jsxImportSource react */
-
-import * as React from "react";
 import { StringTemplate } from "../../data/StringTemplate";
 import { Culture } from "../../ui/Culture";
 import { Cx } from "../../ui/Cx";

package/src/widgets/form/DateTimePicker.tsx

@@ -1,6 +1,4 @@
 /** @jsxImportSource react */
-
-import * as React from "react";
 import { Culture } from "../../ui/Culture";
 import { offFocusOut, oneFocusOut } from "../../ui/FocusManager";
 import { enableCultureSensitiveFormatting } from "../../ui/Format";

package/src/widgets/form/Radio.tsx

@@ -7,7 +7,6 @@ import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
 import { stopPropagation } from "../../util/eventCallbacks";
 import { KeyCode } from "../../util/KeyCode";
 import { isUndefined } from "../../util/isUndefined";
-import * as React from "react";
 import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
 
 export interface RadioConfig extends FieldConfig {

package/src/widgets/form/Slider.tsx

@@ -247,7 +247,9 @@ class SliderComponent extends VDOM.Component<SliderComponentProps, SliderCompone
             style={data.style}
             id={data.id}
             onClick={(e: React.MouseEvent) => this.onClick(e)}
-            ref={(el: HTMLDivElement | null) => (this.dom.el = el || undefined)}
+            ref={(el: HTMLDivElement | null) => {
+               this.dom.el = el || undefined;
+            }}
             onMouseMove={(e: React.MouseEvent) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
             onMouseLeave={(e: React.MouseEvent) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
          >
@@ -257,7 +259,9 @@ class SliderComponent extends VDOM.Component<SliderComponentProps, SliderCompone
                <div
                   key="space"
                   className={CSS.element(baseClass, "space")}
-                  ref={(c: HTMLDivElement | null) => (this.dom.range = c || undefined)}
+                  ref={(c: HTMLDivElement | null) => {
+                     this.dom.range = c || undefined;
+                  }}
                >
                   {widget.showFrom && (
                      <div
@@ -271,7 +275,9 @@ class SliderComponent extends VDOM.Component<SliderComponentProps, SliderCompone
                         }
                         onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "from")}
                         onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "from")}
-                        ref={(c: HTMLDivElement | null) => (this.dom.from = c || undefined)}
+                        ref={(c: HTMLDivElement | null) => {
+                           this.dom.from = c || undefined;
+                        }}
                      />
                   )}
                   {widget.showTo && (
@@ -286,7 +292,9 @@ class SliderComponent extends VDOM.Component<SliderComponentProps, SliderCompone
                         }
                         onMouseLeave={(e: React.MouseEvent) => this.onHandleMouseLeave(e, "to")}
                         onTouchStart={(e: React.TouchEvent) => this.onHandleMouseDown(e, "to")}
-                        ref={(c: HTMLDivElement | null) => (this.dom.to = c || undefined)}
+                        ref={(c: HTMLDivElement | null) => {
+                           this.dom.to = c || undefined;
+                        }}
                      />
                   )}
                </div>

package/src/widgets/form/Switch.tsx

@@ -8,7 +8,6 @@ import { Field, FieldConfig, getFieldTooltip, FieldInstance } from "./Field";
 import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
 import { preventFocus } from "../../ui/FocusManager";
 import { isDefined } from "../../util/isDefined";
-import * as React from "react";
 import { BooleanProp, StringProp, StyleProp } from "../../ui/Prop";
 
 export interface SwitchConfig extends FieldConfig {
@@ -72,7 +71,7 @@ export class Switch extends Field<SwitchConfig> {
                structured: true,
             },
          },
-         ...args
+         ...args,
       );
    }
 
@@ -116,7 +115,7 @@ export class Switch extends Field<SwitchConfig> {
             className={data.classNames}
             style={data.style}
             id={data.id}
-            tabIndex={data.disabled ? undefined : ((data.tabIndex as number) || 0)}
+            tabIndex={data.disabled ? undefined : (data.tabIndex as number) || 0}
             onMouseDown={(e: React.MouseEvent) => {
                e.stopPropagation();
                if (!this.focusOnMouseDown) preventFocus(e);

package/src/widgets/form/ValidationGroup.spec.tsx

@@ -7,7 +7,7 @@ import { createTestRenderer } from "../../util/test/createTestRenderer";
 import assert from "assert";
 
 describe("ValidationGroup", () => {
-   it("performs validation and sets the flags", () => {
+   it("performs validation and sets the flags", async () => {
       let widget = (
          <cx>
             <ValidationGroup invalid={bind("invalid")} valid={bind("valid")}>
@@ -19,7 +19,7 @@ describe("ValidationGroup", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree));
@@ -28,7 +28,7 @@ describe("ValidationGroup", () => {
       assert.equal(store.get("valid"), false);
    });
 
-   it("nested validation works", () => {
+   it("nested validation works", async () => {
       let widget = (
          <cx>
             <div>
@@ -46,7 +46,7 @@ describe("ValidationGroup", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.equal(store.get("invalid"), true);
@@ -54,7 +54,7 @@ describe("ValidationGroup", () => {
       assert.equal(store.get("invalid2"), false);
    });
 
-   it("isolated validation group does not affect the parent", () => {
+   it("isolated validation group does not affect the parent", async () => {
       let widget = (
          <cx>
             <div>
@@ -72,7 +72,7 @@ describe("ValidationGroup", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.equal(store.get("invalid"), false);
@@ -80,7 +80,7 @@ describe("ValidationGroup", () => {
       assert.equal(store.get("invalid2"), false);
    });
 
-   it("visited flag is propagated into nested validation groups", () => {
+   it("visited flag is propagated into nested validation groups", async () => {
       let visited = false;
 
       let widget = (
@@ -101,13 +101,13 @@ describe("ValidationGroup", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(visited);
    });
 
-   it("disabled flag can be overruled by the field props", () => {
+   it("disabled flag can be overruled by the field props", async () => {
       let widget = (
          <cx>
             <div>
@@ -120,13 +120,13 @@ describe("ValidationGroup", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.equal(store.get("invalid"), true);
    });
 
-   it("strict flag is used to enforce disabled flag", () => {
+   it("strict flag is used to enforce disabled flag", async () => {
       let widget = (
          <cx>
             <div>
@@ -139,7 +139,7 @@ describe("ValidationGroup", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.equal(store.get("invalid"), false);

package/src/widgets/form/Wheel.tsx

@@ -8,7 +8,6 @@ import { addEventListenerWithOptions } from "../../util";
 import type { RenderingContext } from "../../ui/RenderingContext";
 import type { Instance } from "../../ui/Instance";
 import type { CSS } from "../../ui/CSS";
-import * as React from "react";
 import { Prop, StructuredProp } from "../../ui/Prop";
 
 export interface WheelConfig extends PureContainerConfig {

package/src/widgets/grid/Grid.tsx

@@ -1,5 +1,4 @@
 /** @jsxImportSource react */
-import * as React from "react";
 import { View } from "../../data";
 import { Binding } from "../../data/Binding";
 import { getAccessor } from "../../data/getAccessor";