Update to master

packages/ant-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/ant-component-mapper",
-  "version": "3.15.3",
+  "version": "3.15.7",
   "description": "Ant Design React component mapper for Data Driven Forms.",
   "main": "index.js",
   "module": "esm/index.js",

packages/ant-component-mapper/src/validation-error/validation-error.d.ts

@@ -1,5 +1,5 @@
 import { Meta } from "@data-driven-forms/react-form-renderer";
 
-export type validationError = (meta: Meta<any>, validateOnMount?: boolean) => boolean | any | undefined
+export function validationError(meta: Meta<any>, validateOnMount?: boolean): boolean | any | undefined
 
 export default validationError;

packages/blueprint-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/blueprint-component-mapper",
-  "version": "3.15.3",
+  "version": "3.15.7",
   "description": "BlueprintJS React component mapper for Data Driven Forms.",
   "main": "index.js",
   "module": "esm/index.js",
@@ -36,7 +36,9 @@
   "peerDependencies": {
     "@blueprintjs/core": "^3.26.1",
     "@blueprintjs/datetime": "^3.17.0",
-    "@blueprintjs/select": "^3.12.3"
+    "@blueprintjs/select": "^3.12.3",
+    "react": "^16.13.1 || ^17.0.2",
+    "react-dom": "^16.13.1 || ^17.0.2"
   },
   "dependencies": {
     "@data-driven-forms/common": "*",

packages/carbon-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/carbon-component-mapper",
-  "version": "3.15.3",
+  "version": "3.15.7",
   "description": "Carbon React component mapper for Data Driven Forms.",
   "main": "index.js",
   "module": "esm/index.js",
@@ -35,7 +35,10 @@
     "carbon-components-react": "^7.46.0",
     "carbon-icons": "^7.0.7"
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.2",
+    "react-dom": "^16.13.1 || ^17.0.2"
+  },
   "dependencies": {
     "@data-driven-forms/common": "*",
     "clsx": "^1.1.1",

packages/carbon-component-mapper/src/tests/time-picker-string.test.js

@@ -193,7 +193,7 @@ describe('TimePicker<String>', () => {
     onSubmit.mockReset();
 
     await act(async () => {
-      wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'UTC' } });
+      wrapper.find('select#time-picker-timezones').simulate('change', { target: { value: 'UTC' } });
     });
     wrapper.update();
 
@@ -203,7 +203,7 @@ describe('TimePicker<String>', () => {
     wrapper.update();
 
     expect(wrapper.find('input').props().value).toEqual('00:35');
-    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 UTC EST' });
+    expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 AM UTC' });
   });
 
   it('handles initial value', async () => {

packages/carbon-component-mapper/src/tests/time-picker.test.js

@@ -194,7 +194,7 @@ describe('TimePicker', () => {
     onSubmit.mockReset();
 
     await act(async () => {
-      wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'UTC' } });
+      wrapper.find('select#time-picker-timezones').simulate('change', { target: { value: 'UTC' } });
     });
     wrapper.update();
 
@@ -203,8 +203,47 @@ describe('TimePicker', () => {
     });
     wrapper.update();
 
-    expect(wrapper.find('input').props().value).toEqual('10:35');
-    expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(10);
+    expect(wrapper.find('input').props().value).toEqual('05:35');
+    expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(5);
     expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(35);
   });
+
+  it('handles initial value', async () => {
+    schema = {
+      fields: [
+        {
+          component: componentTypes.TIME_PICKER,
+          name: 'time-picker',
+          initialValue: new Date('December 17, 1995 16:00:00'),
+          twelveHoursFormat: true,
+        },
+      ],
+    };
+
+    await act(async () => {
+      wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
+    });
+    wrapper.update();
+
+    expect(wrapper.find('input').props().value).toEqual('04:00');
+    expect(wrapper.find('select').props().defaultValue).toEqual('PM');
+
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { value: '03:00' } });
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('input').simulate('blur');
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(15);
+    expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(0);
+  });
 });

packages/carbon-component-mapper/src/time-picker-base/time-picker-base.d.ts

@@ -20,6 +20,8 @@ interface InternalTimePickerBaseProps extends CarbonTimePickerProps, AnyObject {
     warnText?: ReactNode;
     selectFormat: (value: 'AM' | 'PM') => void;
     selectTimezone: (value: string) => void;
+    format?: 'AM' | 'PM';
+    defaultTimezone?: string;
 }
 
 export type TimePickerBaseProps = InternalTimePickerBaseProps & FormGroupProps;

packages/carbon-component-mapper/src/time-picker-base/time-picker-base.js

@@ -18,6 +18,8 @@ const TimePickerBase = ({
   warnText,
   selectFormat,
   selectTimezone,
+  format,
+  timezone,
   ...rest
 }) => (
   <div {...WrapperProps}>
@@ -34,13 +36,23 @@ const TimePickerBase = ({
       {...rest}
     >
       {twelveHoursFormat && (
-        <TimePickerSelect labelText="Period" id={`${rest.id || input.name}-12h`} onChange={({ target: { value } }) => selectFormat(value)}>
+        <TimePickerSelect
+          defaultValue={format}
+          labelText="Period"
+          id={`${rest.id || input.name}-12h`}
+          onChange={({ target: { value } }) => selectFormat(value)}
+        >
           <SelectItem value="AM" text="AM" />
           <SelectItem value="PM" text="PM" />
         </TimePickerSelect>
       )}
       {timezones && (
-        <TimePickerSelect labelText="Timezone" id={`${rest.id || input.name}-timezones`} onChange={({ target: { value } }) => selectTimezone(value)}>
+        <TimePickerSelect
+          defaultValue={timezone}
+          labelText="Timezone"
+          id={`${rest.id || input.name}-timezones`}
+          onChange={({ target: { value } }) => selectTimezone(value)}
+        >
           {timezones.map(({ showAs, ...tz }) => (
             <SelectItem key={tz.value} text={tz.label} {...tz} />
           ))}
@@ -78,6 +90,8 @@ TimePickerBase.propTypes = {
   warnText: PropTypes.node,
   selectFormat: PropTypes.func.isRequired,
   selectTimezone: PropTypes.func.isRequired,
+  format: PropTypes.oneOf(['AM', 'PM']),
+  timezone: PropTypes.string,
 };
 
 export default TimePickerBase;

packages/carbon-component-mapper/src/time-picker-date/time-picker-date.d.ts

@@ -12,6 +12,7 @@ export interface Timezone extends SelectItemProps {
 interface InternalTimePickerProps extends CarbonTimePickerProps {
     twelveHoursFormat?: boolean;
     timezones?: Timezone[];
+    defaultTimezone?: string;
 }
 
 export type TimePickerDateProps = InternalTimePickerProps & FormGroupProps & UseFieldApiComponentConfig;

packages/carbon-component-mapper/src/time-picker-date/time-picker-date.js

@@ -6,10 +6,12 @@ import prepareProps from '../prepare-props';
 import TimePickerBase from '../time-picker-base';
 
 const TimePickerDate = (props) => {
-  const { input, meta, twelveHoursFormat, timezones, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, twelveHoursFormat, timezones, validateOnMount, helperText, WrapperProps, defaultTimezone, ...rest } = useFieldApi(
+    prepareProps(props)
+  );
 
-  const [timezone, selectTimezone] = useState(timezones ? timezones[0]?.value : '');
-  const [format, selectFormat] = useState('AM');
+  const [timezone, selectTimezone] = useState(defaultTimezone || timezones ? timezones[0]?.value : '');
+  const [format, selectFormat] = useState(() => (input.value?.getHours?.() >= 12 ? 'PM' : 'AM'));
   const isMounted = useRef(false);
 
   const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
@@ -75,6 +77,8 @@ const TimePickerDate = (props) => {
       warnText={warnText}
       selectFormat={selectFormat}
       selectTimezone={selectTimezone}
+      format={format}
+      timezone={timezone}
       {...rest}
     />
   );
@@ -96,6 +100,7 @@ TimePickerDate.propTypes = {
     })
   ),
   WrapperProps: PropTypes.object,
+  defaultTimezone: PropTypes.string,
 };
 
 export default TimePickerDate;

packages/carbon-component-mapper/src/time-picker-string/time-picker-string.js

@@ -42,6 +42,8 @@ const TimePickerString = (props) => {
       warnText={warnText}
       selectFormat={selectFormat}
       selectTimezone={selectTimezone}
+      format={format}
+      timezone={timezone}
       {...rest}
     />
   );

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/common",
-  "version": "3.15.3",
+  "version": "3.15.7",
   "description": "Common components, helpers and other pieces of code for Data Driven Forms",
   "license": "Apache-2.0",
   "main": "index.js",

packages/mui-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/mui-component-mapper",
-  "version": "3.15.6",
+  "version": "3.15.7",
   "description": "Component mapper for Material ui component mapper form data-driven-forms.",
   "main": "index.js",
   "module": "esm/index.js",

packages/mui-component-mapper/src/validation-error/validation-error.d.ts

@@ -1,5 +1,5 @@
 import { Meta } from "@data-driven-forms/react-form-renderer";
 
-export type validationError = (meta: Meta<any>, validateOnMount?: boolean) => boolean | any | undefined;
+export function validationError(meta: Meta<any>, validateOnMount?: boolean): boolean | any | undefined;
 
 export default validationError;

packages/parsers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/parsers",
-  "version": "3.15.3",
+  "version": "3.15.7",
   "description": "Parsers for Data Driven Forms.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/pf4-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/pf4-component-mapper",
-  "version": "3.15.3",
+  "version": "3.15.7",
   "description": "Patternfly 4 React component mapper for Data Driven Forms.",
   "main": "index.js",
   "module": "esm/index.js",
@@ -36,7 +36,9 @@
   "peerDependencies": {
     "@data-driven-forms/react-form-renderer": ">=3.2.1",
     "@patternfly/react-core": "^4.157.3",
-    "@patternfly/react-icons": "^4.11.7"
+    "@patternfly/react-icons": "^4.11.7",
+    "react": "^16.13.1 || ^17.0.2",
+    "react-dom": "^16.13.1 || ^17.0.2"
   },
   "dependencies": {
     "@data-driven-forms/common": "*",

packages/pf4-component-mapper/src/radio/radio.js

@@ -30,12 +30,12 @@ RadioOption.propTypes = {
   radioGroupValue: PropTypes.any,
 };
 
-const Radio = ({ name, options, type, ...props }) => {
+const Radio = ({ name, type, ...props }) => {
   /**
    * You cannot assign type radio to PF4 radio buttons input. It will break and will not set input value, only checked property
    * It has to be reqular input and we have change the radio value manully to the option value
    */
-  const { label, isRequired, helperText, meta, validateOnMount, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps } =
+  const { label, isRequired, helperText, meta, validateOnMount, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps, options } =
     useFieldApi({
       name,
       ...props,

packages/react-form-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/react-form-renderer",
-  "version": "3.15.3",
+  "version": "3.15.7",
   "description": "React Form Renderer. Data Driven Forms converts JSON form definitions into fully functional React forms.",
   "main": "index.js",
   "module": "esm/index.js",

packages/react-form-renderer/src/component-types/component-types.d.ts

@@ -1,6 +1,6 @@
 export type ComponentType = 'text-field'|'field-array'|'checkbox'|'sub-form'|'radio'|'tabs'|'tab-item'|'date-picker'|'time-picker'|'wizard'|'switch'|'textarea'|'select'|'plain-text'|'button'|'input-addon-group'|'input-addon-button-group'|'dual-list-select'|'slider';
 
-interface componentTypes {
+interface IcomponentTypes {
   TEXT_FIELD: 'text-field';
   FIELD_ARRAY: 'field-array';
   CHECKBOX: 'checkbox';
@@ -22,6 +22,6 @@ interface componentTypes {
   SLIDER: 'slider';
 }
 
-declare const componentTypes: componentTypes;
+declare const componentTypes: IcomponentTypes;
 
 export default componentTypes;

packages/react-form-renderer/src/data-types/data-types.d.ts

@@ -1,13 +1,13 @@
 export type DataType = 'integer'|'float'|'number'|'boolean'|'string';
 
-interface dataTypes {
+interface IdataTypes {
   INTEGER: 'integer';
   FLOAT: 'float';
   NUMBER: 'number';
   BOOLEAN: 'boolean';
   STRING: 'string';
 }
 
-declare const dataTypes: dataTypes;
+declare const dataTypes: IdataTypes;
 
 export default dataTypes;

packages/react-form-renderer/src/validator-types/validator-types.d.ts

@@ -1,4 +1,4 @@
-interface validatorTypes {
+interface IvalidatorTypes {
   REQUIRED: 'required';
   MIN_LENGTH: 'min-length';
   MAX_LENGTH: 'max-length';
@@ -10,6 +10,6 @@ interface validatorTypes {
   URL: 'url';
 }
 
-declare const validatorTypes: validatorTypes;
+declare const validatorTypes: IvalidatorTypes;
 
 export default validatorTypes;

packages/react-renderer-demo/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@data-driven-forms/react-renderer-demo",
-    "version": "3.15.3",
+    "version": "3.15.7",
     "main": "firebaseFunctions.js",
     "description": "Documentation page for Data Driven Forms.",
     "homepage": "https://data-driven-forms.org/",

packages/react-renderer-demo/src/doc-components/examples-texts/carbon/time-picker.md

@@ -4,6 +4,7 @@ This component also accepts all other original props, please see [here](https://
 
 |Props|Description|default|
 |-----|-----------|-------|
+|defaultTimezone|string - a value of default timezone, use only in Date varian|undefined|
 |useStringFormat|boolean - save value as string|false|
 |twelveHoursFormat|boolean - if true an AM/PM selector is shown|false|
 |timezones|array of timezones - if not empty, an timezone selector is shown|undefined|

packages/react-renderer-demo/src/pages/_document.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Document, { Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@mui/styles';
-import theme from '../theme';
 
 class MyDocument extends Document {
   render() {
@@ -15,7 +14,7 @@ class MyDocument extends Document {
           <link rel="apple-touch-icon" href="/192x192.png"></link>
           <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
           {/* PWA primary color */}
-          <meta name="theme-color" content={theme.palette.primary.main} />
+          <meta name="theme-color" content="#430f8f" />
           <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
           <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" />
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />