@wix/patterns-fields 1.76.0 → 1.78.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.76.0",
+  "version": "1.78.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -124,7 +124,7 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.57.0",
+    "@wix/patterns-fields-utils": "1.59.0",
     "@wix/rich-content": "1.0.37",
     "@wix/sdk": "^1.17.2",
     "@wix/wix-ui-icons-common": "^3.189.0",
@@ -152,7 +152,7 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
     "@wix/babel-cli": "^1.11.0",
-    "@wix/bex-core": "2.354.0",
+    "@wix/bex-core": "2.356.0",
     "@wix/design-system": "^1.314.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
@@ -164,7 +164,7 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "ts-node": "^10.9.1",
-    "typescript": "~4.9.5"
+    "typescript": "~5.8.3"
   },
   "peerDependencies": {
     "@wix/bex-core": "^2.284.0",
@@ -212,5 +212,5 @@
       "optional": true
     }
   },
-  "falconPackageHash": "d709f6c2c5302fb87de397c8242f3372e69693a3b189b70c2d3c84f0"
+  "falconPackageHash": "8d496681bc9a5031fabb76921c129751144212e027949113cedc791d"
 }

package/src/__tests__/components/rich-content-editor.spec.tsx

@@ -30,12 +30,14 @@ jest.mock(
 );
 
 // Mock variables with 'mock' prefix to satisfy Jest's out-of-scope variable rules
+const mockSetContent = jest.fn();
+
 const mockEditorRefObject = {
   focus: jest.fn(),
   prePublish: jest.fn(),
   getContentTraits: jest.fn(() => ({ isContentChanged: false })),
   getEditorCommands: jest.fn(() => ({
-    setContent: jest.fn(),
+    setContent: mockSetContent,
   })),
   useToolbarProps: jest.fn(() => ({
     buttons: [
@@ -203,6 +205,7 @@ describe('<RichContentEditor/>', () => {
     onPublish = jest.fn();
     mockPublishFn.mockClear();
     mockEditorRefObject.focus.mockClear();
+    mockSetContent.mockClear();
     mockEditorRefObject.prePublish
       .mockClear()
       .mockImplementation(mockPublishFn);
@@ -293,6 +296,16 @@ describe('<RichContentEditor/>', () => {
       });
     });
 
+    it('applies externally cleared content to the mounted editor', async () => {
+      const clearedContent = fromPlainText('');
+
+      renderWithProps({ injectedContent: clearedContent });
+
+      await waitFor(() =>
+        expect(mockSetContent).toHaveBeenCalledWith(clearedContent),
+      );
+    });
+
     it('should not render in fullscreen mode by default', async () => {
       renderWithProps();
 
@@ -481,7 +494,9 @@ describe('<RichContentEditor/>', () => {
   });
 
   describe('onChange handling', () => {
-    it('should call onPublish when content changes and blur occurs', async () => {
+    it('publishes changed content when blur occurs', async () => {
+      const publishedContent = fromPlainText('Published content');
+      mockPublishFn.mockResolvedValue(publishedContent);
       mockEditorRefObject.getContentTraits.mockReturnValue({
         isContentChanged: true,
       });
@@ -504,8 +519,11 @@ describe('<RichContentEditor/>', () => {
       fireEvent.blur(editorContainer!, { relatedTarget: document.body });
 
       await waitFor(() => {
-        expect(onPublish).toHaveBeenCalled();
+        expect(onPublish).toHaveBeenCalledTimes(1);
       });
+      await expect(onPublish.mock.calls[0][0]).resolves.toEqual(
+        publishedContent,
+      );
     });
 
     it('should not call onPublish when content has not changed', async () => {

package/src/__tests__/exports/controlled-inputs.spec.tsx

@@ -5,10 +5,14 @@ import { render } from '@testing-library/react';
 import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
 
 import { FormCheckboxInput } from '../../components/boolean';
-import { ControlledInputUniDriver } from '../../components/controlled-input.driver';
+import { ControlledColorInput } from '../../components/color-view';
+import { ControlledInputUniDriver } from '../../components/controlled-input.uni.driver';
+import { DateInput } from '../../components/date-input';
+import { DateTimeInput } from '../../components/datetime-input';
 import { FormNumberInput } from '../../components/number-input';
 import { FormShortTextInput } from '../../components/text';
 import { FormUrlInput } from '../../components/url';
+import { PatternsFieldsTestProvider } from '../../testkit/patterns-fields-test-provider';
 
 const controlledInputTestkitFactory = uniTestkitFactoryCreator(
   ControlledInputUniDriver,
@@ -135,4 +139,116 @@ describe('controlled inputs', () => {
 
     expect(await input.inputDriver.getValue()).toBe('First');
   });
+
+  it('follows date prop changes and reports user edits', async () => {
+    const onChange = jest.fn();
+    const { container, rerender } = render(
+      <DateInput data="2026-08-10" onChange={onChange} dataHook="date" />,
+    );
+    const input = getInput(container, 'date').datePicker;
+
+    await input.driver.open();
+    expect(await input.calendarDriver.getSelectedDay()).toBe('10');
+    await input.driver.clickOutside();
+
+    rerender(
+      <DateInput data="2026-08-12" onChange={onChange} dataHook="date" />,
+    );
+    await input.driver.open();
+    expect(await input.calendarDriver.getSelectedDay()).toBe('12');
+
+    await input.calendarDriver.clickDay(new Date(2026, 7, 14));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('2026-08-14');
+  });
+
+  it('follows date-time prop changes and reports user edits', async () => {
+    const onChange = jest.fn();
+    const before = new Date(2026, 0, 30, 10, 30).toISOString();
+    const after = new Date(2026, 0, 31, 11, 45).toISOString();
+    const { container, rerender } = render(
+      <DateTimeInput data={before} onChange={onChange} dataHook="date-time" />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'date-time').dateTime;
+
+    expect((await input.timeInput.getValue()).toISOString()).toBe(before);
+    rerender(
+      <DateTimeInput data={after} onChange={onChange} dataHook="date-time" />,
+    );
+    expect((await input.timeInput.getValue()).toISOString()).toBe(after);
+
+    await input.datePicker.driver.open();
+    const selectedDate = new Date(2026, 1, 15);
+    await input.datePicker.calendarDriver.clickOnNextMonthButton();
+    await input.datePicker.calendarDriver.clickDay(selectedDate);
+    const expected = new Date(after);
+    expected.setFullYear(
+      selectedDate.getFullYear(),
+      selectedDate.getMonth(),
+      selectedDate.getDate(),
+    );
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(expected.toISOString());
+  });
+
+  it('clears both date-time controls when the controlled value is cleared', async () => {
+    const { container, rerender } = render(
+      <DateTimeInput
+        data={new Date(2026, 0, 30, 10, 30).toISOString()}
+        onChange={jest.fn()}
+        dataHook="date-time-clear"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'date-time-clear').dateTime;
+
+    expect(await input.datePicker.inputDriver.getValue()).not.toBe('');
+    expect(await input.timeInput.getValue()).not.toBeNull();
+
+    rerender(
+      <DateTimeInput
+        data={null}
+        onChange={jest.fn()}
+        dataHook="date-time-clear"
+      />,
+    );
+
+    expect(await input.datePicker.inputDriver.getValue()).toBe('');
+    expect(Number.isNaN((await input.timeInput.getValue()).getTime())).toBe(
+      true,
+    );
+  });
+
+  it('follows color prop changes and reports user edits', async () => {
+    const onChange = jest.fn();
+    const { container, rerender } = render(
+      <ControlledColorInput
+        data="#112233"
+        onChange={onChange}
+        dataHook="color"
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+    const input = getInput(container, 'color').color;
+
+    expect(await input.getValue()).toBe('112233');
+    rerender(
+      <ControlledColorInput
+        data="#445566"
+        onChange={onChange}
+        dataHook="color"
+      />,
+    );
+    expect(await input.getValue()).toBe('445566');
+
+    await input.enterText('7');
+    expect(await input.getValue()).toBe('7');
+    expect(onChange).not.toHaveBeenCalled();
+
+    await input.enterText('778899');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('#778899');
+  });
 });

package/src/__tests__/exports/form-rich-content-input.spec.ts

@@ -0,0 +1,131 @@
+import React from 'react';
+import { act, render, waitFor } from '@testing-library/react';
+import {
+  fromPlainText,
+  toPlainTextSync,
+} from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
+import type { RichContent } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
+
+import { RichContentInput } from '../../exports/form-rich-content-input';
+import { PatternsFieldsTestProvider } from '../../testkit/patterns-fields-test-provider';
+
+const mockRichContentEditor = jest.fn((_props: unknown) => null);
+
+jest.mock(
+  '../../components/rich-content/rich-content-input/rich-content-editor',
+  () => ({
+    RichContentEditor: (props: unknown) => mockRichContentEditor(props),
+  }),
+);
+
+const getEditorProps = () => {
+  const lastCall = mockRichContentEditor.mock.calls.length - 1;
+  return mockRichContentEditor.mock.calls[lastCall][0] as {
+    content: RichContent | undefined;
+    injectedContent: RichContent;
+    onChange(value: RichContent, isChanged?: boolean): void;
+    onBlur(): void;
+    onPublish(content: Promise<RichContent>): void;
+  };
+};
+
+describe('form rich content input exports', () => {
+  it('follows prop changes and publishes user edits', async () => {
+    const before = fromPlainText('before');
+    const after = fromPlainText('after');
+    const edited = fromPlainText('edited');
+    const onChange = jest.fn();
+    const { rerender } = render(
+      React.createElement(RichContentInput, {
+        data: before,
+        onChange,
+      }),
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+    expect(getEditorProps().content).toEqual(before);
+
+    rerender(
+      React.createElement(RichContentInput, {
+        data: after,
+        onChange,
+      }),
+    );
+    await waitFor(() =>
+      expect(getEditorProps().injectedContent).toEqual(after),
+    );
+
+    act(() => getEditorProps().onChange(edited, true));
+    expect(onChange).not.toHaveBeenCalled();
+    act(() => getEditorProps().onPublish(Promise.resolve(edited)));
+    act(() => getEditorProps().onBlur());
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(edited);
+  });
+
+  it('clears content when the controlled value is cleared', async () => {
+    const before = fromPlainText('before');
+    const onChange = jest.fn();
+    const { rerender } = render(
+      React.createElement(RichContentInput, {
+        data: before,
+        onChange,
+      }),
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+    rerender(
+      React.createElement(RichContentInput, {
+        data: undefined,
+        onChange,
+      }),
+    );
+
+    await waitFor(() => {
+      const clearedContent = getEditorProps().injectedContent;
+      expect(toPlainTextSync(clearedContent)).toBe('');
+      expect(clearedContent).not.toEqual({ nodes: [] });
+    });
+  });
+
+  it('reports blur without publishing unchanged content', () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    render(
+      React.createElement(RichContentInput, {
+        data: fromPlainText('unchanged'),
+        onChange,
+        onBlur,
+      }),
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+    act(() => getEditorProps().onBlur());
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('publishes edited content before reporting blur', () => {
+    const edited = fromPlainText('edited');
+    const onChange = jest.fn();
+    const onBlur = jest.fn(() => {
+      expect(onChange).toHaveBeenCalledWith(edited);
+    });
+    render(
+      React.createElement(RichContentInput, {
+        data: fromPlainText('before'),
+        onChange,
+        onBlur,
+      }),
+      { wrapper: PatternsFieldsTestProvider },
+    );
+
+    act(() => getEditorProps().onChange(edited, true));
+    act(() => getEditorProps().onBlur());
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput2239312152";
+var _namespace_ = "addressinput2949340741";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"addressinput2239312152__root","tableAddressInput":"addressinput2239312152__tableAddressInput"};
+export var classes = {"root":"addressinput2949340741__root","tableAddressInput":"addressinput2949340741__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu2074632395";
+var _namespace_ = "actionsmenu3262876470";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"actionsmenu2074632395__root","action":"actionsmenu2074632395__action"};
+export var classes = {"root":"actionsmenu3262876470__root","action":"actionsmenu3262876470__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/form-audio-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield222574846";
+var _namespace_ = "formaudiofield951134224";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formaudiofield222574846__root","addItem":"formaudiofield222574846__addItem","mediaTitle":"formaudiofield222574846__mediaTitle"};
+export var classes = {"root":"formaudiofield951134224__root","addItem":"formaudiofield951134224__addItem","mediaTitle":"formaudiofield951134224__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "audioplayer3352893636";
+var _namespace_ = "audioplayer3281850868";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"audioplayer3352893636__root"};
+export var classes = {"root":"audioplayer3281850868__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/boolean/form-checkbox-input.tsx

@@ -8,7 +8,7 @@ export interface FormCheckboxInputProps extends ControlledInputProps<boolean> {
   label: React.ReactNode;
 }
 
-export const FormCheckboxInput: React.FC<FormCheckboxInputProps> = ({
+export const ControlledCheckboxInput: React.FC<FormCheckboxInputProps> = ({
   data,
   onChange,
   onBlur,
@@ -37,4 +37,6 @@ export const FormCheckboxInput: React.FC<FormCheckboxInputProps> = ({
   );
 };
 
-FormCheckboxInput.displayName = 'FormCheckboxInput';
+ControlledCheckboxInput.displayName = 'ControlledCheckboxInput';
+
+export const FormCheckboxInput = ControlledCheckboxInput;

package/src/components/color-view/cell-color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview1007321183";
+var _namespace_ = "cellcolorview3776260267";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellcolorview1007321183__root","hashPrefix":"cellcolorview1007321183__hashPrefix"};
+export var classes = {"root":"cellcolorview3776260267__root","hashPrefix":"cellcolorview3776260267__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/color-input.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import type {
   ColorPickerProps,
   InputImperativeActions,
@@ -44,6 +44,11 @@ export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
       colorValue ? safeColorLib(colorValue) : undefined,
     );
 
+    useEffect(() => {
+      setInputValue(colorValue ? omitHash(colorValue) : '');
+      setPickerColor(colorValue ? safeColorLib(colorValue) : undefined);
+    }, [colorValue]);
+
     const onInputChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
         const raw = e.target.value;

package/src/components/color-view/color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview2769305819";
+var _namespace_ = "colorview2929713812";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"colorview2769305819__root","view":"colorview2769305819__view","fillPreview":"colorview2769305819__fillPreview"};
+export var classes = {"root":"colorview2929713812__root","view":"colorview2929713812__view","fillPreview":"colorview2929713812__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/form-color-input.tsx

@@ -1,31 +1,77 @@
-import React, { useRef, useImperativeHandle } from 'react';
-
+import React from 'react';
 import type { InputImperativeActions } from '@wix/design-system';
 
-import { ColorInput, ColorInputProps } from './color-input';
-import { FormInputProps } from '../../types';
-import { useAutoFocus } from '../../hooks';
+import type { ControlledInputProps } from '../../types/controlled-input';
+import type { FormInputProps } from '../../types/form-input';
+import { ColorInput } from './color-input';
+import type { ColorInputProps } from './color-input';
 
-export type FormColorInputProps = FormInputProps<string> & ColorInputProps;
+export type ControlledColorInputProps = ControlledInputProps<
+  string | undefined
+> &
+  Omit<
+    ColorInputProps,
+    | 'value'
+    | 'onChange'
+    | 'onBlur'
+    | 'readOnly'
+    | 'autoFocus'
+    | 'status'
+    | 'dataHook'
+  >;
 
-export const FormColorInput = React.forwardRef<
+export const ControlledColorInput = React.forwardRef<
   InputImperativeActions,
-  FormColorInputProps
->(({ data, onChange, autoFocus, readOnly, dataHook }, ref) => {
-  const inputRef = useRef<InputImperativeActions | null>(null);
-  useAutoFocus(inputRef, autoFocus);
-
-  useImperativeHandle(ref, () => inputRef.current as InputImperativeActions);
-
-  return (
+  ControlledColorInputProps
+>(
+  (
+    {
+      data,
+      onChange,
+      onBlur,
+      readOnly,
+      autoFocus,
+      invalid,
+      dataHook,
+      ...props
+    },
+    ref,
+  ) => (
     <ColorInput
-      dataHook={dataHook}
-      ref={inputRef}
+      {...props}
+      ref={ref}
       value={data}
       onChange={onChange}
+      onBlur={onBlur}
       readOnly={readOnly}
+      autoFocus={autoFocus}
+      status={invalid ? 'error' : undefined}
+      dataHook={dataHook}
     />
-  );
-});
+  ),
+);
+
+ControlledColorInput.displayName = 'ControlledColorInput';
+
+export type FormColorInputProps = FormInputProps<string> &
+  Omit<
+    ColorInputProps,
+    'value' | 'onChange' | 'readOnly' | 'autoFocus' | 'status' | 'dataHook'
+  > & {
+    onBlur?: () => void;
+  };
+
+export const FormColorInput = React.forwardRef<
+  InputImperativeActions,
+  FormColorInputProps
+>(({ field: _field, data, onBlur, autoFocus, ...props }, ref) => (
+  <ControlledColorInput
+    {...props}
+    data={data ?? ''}
+    autoFocus={autoFocus ?? true}
+    onBlur={onBlur}
+    ref={ref}
+  />
+));
 
 FormColorInput.displayName = 'FormColorInput';

package/src/components/color-view/form-color.tsx

@@ -25,7 +25,7 @@ const _FormColor = (props: FormColorProps) => {
     >
       <FormColorInput
         autoFocus={false}
-        data={controller.field.value as string | undefined}
+        data={controller.field.value ?? ''}
         onChange={(hex) => controller.field.onChange(hex)}
         onBlur={controller.field.onBlur}
         ref={controller.field.ref}

package/src/components/{controlled-input.driver.ts → controlled-input.uni.driver.ts}

@@ -2,11 +2,13 @@ import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
   AutoCompleteUniDriver,
   CheckboxUniDriver,
+  DatePickerUniDriver,
   InputUniDriver,
   NumberInputUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
 import { baseUniDriverFactory } from '../testkit/base-driver';
+import { DateTimeInputUniDriver } from './datetime-input/controlled-date-time-input.uni.driver';
 
 export function ControlledInputUniDriver(base: UniDriver, body: UniDriver) {
   return {
@@ -15,5 +17,8 @@ export function ControlledInputUniDriver(base: UniDriver, body: UniDriver) {
     number: NumberInputUniDriver(base, body),
     text: InputUniDriver(base, body),
     autocomplete: AutoCompleteUniDriver(base, body),
+    datePicker: DatePickerUniDriver(base, body),
+    dateTime: DateTimeInputUniDriver(base, body),
+    color: InputUniDriver(base, body),
   };
 }