@axinom/mosaic-ui 0.34.0-rc.12 → 0.34.0-rc.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.34.0-rc.12",
+  "version": "0.34.0-rc.14",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.7-rc.12",
+    "@axinom/mosaic-core": "^0.4.7-rc.14",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1983c112d033b5205764344529b14a937977152a"
+  "gitHead": "2751ae062b2c342c8534242fff6a61909a1b8598"
 }

package/src/components/FormElements/Checkbox/Checkbox.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import {
+  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
-  ConfirmDialog,
 } from '../../ConfirmDialog';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';

package/src/components/FormElements/Checkbox/CheckboxField.tsx

@@ -2,12 +2,11 @@ import { useField } from 'formik';
 import React from 'react';
 import { useFormikError } from '../useFormikError';
 import { Checkbox, CheckboxProps } from './Checkbox';
-export const CheckboxField: React.FC<Omit<CheckboxProps, 'error'>> = (
-  props,
-) => {
-  const { name } = props;
+export const CheckboxField: React.FC<
+  Omit<CheckboxProps, 'error' | 'onChange'>
+> = (props) => {
   const error = useFormikError(props.name);
-  const [field, , helpers] = useField(name);
+  const [field, , helpers] = useField(props.name);
 
   return (
     <Checkbox

package/src/components/FormElements/CustomTags/CustomTags.spec.tsx

@@ -70,7 +70,7 @@ describe('CustomTags', () => {
 
   it('displays a tag for each currently selected tag', () => {
     const mockCurrentTags = ['1', '2', '3'];
-    const wrapper = shallow(
+    const wrapper = mount(
       <CustomTags name={'test-name'} value={mockCurrentTags} />,
     );
 
@@ -361,7 +361,7 @@ describe('CustomTags', () => {
     const onChangeSpy = jest.fn();
     const mockCurrentTags = ['1', '2', '3'];
     const mockTag = '';
-    const wrapper = shallow(
+    const wrapper = mount(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}
@@ -394,7 +394,7 @@ describe('CustomTags', () => {
     const onChangeSpy = jest.fn();
     const mockCurrentTags = ['1', '2', '3'];
     const mockTag = '2';
-    const wrapper = shallow(
+    const wrapper = mount(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}

package/src/components/FormElements/CustomTags/CustomTags.tsx

@@ -56,7 +56,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
   id,
   name,
   type = 'text',
-  value = [],
+  value,
   disabled = false,
   placeholder,
   error = undefined,
@@ -70,12 +70,12 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
   className = '',
   ...rest
 }) => {
-  const [currentTags, setCurrentTags] = useState<string[]>(value); // Current tags the user has selected
+  const [currentTags, setCurrentTags] = useState<string[]>([]); // Current tags the user has selected
   const [shouldAnimate, setShouldAnimate] = useState<boolean>(false);
   const ref = useRef<FormEvent<HTMLInputElement>>();
 
   useEffect(() => {
-    setCurrentTags((current) => (current === value ? current : value));
+    setCurrentTags(value ?? []);
   }, [value]);
 
   const styles = {

package/src/components/FormElements/CustomTags/CustomTagsField.tsx

@@ -6,9 +6,8 @@ import { CustomTags, CustomTagsProps } from './CustomTags';
 export const CustomTagsField: React.FC<
   Omit<CustomTagsProps, 'error' | 'onChange'>
 > = (props) => {
-  const { name } = props;
   const error = useFormikError(props.name);
-  const [field, , helpers] = useField(name);
+  const [field, , helpers] = useField(props.name);
 
   return (
     <CustomTags

package/src/components/FormElements/DateTimeField/DateTimeTextField.tsx

@@ -8,9 +8,9 @@ import { DateTimeText, DateTimeTextProps } from './DateTimeText';
  * @example
  * <Field name="title" label="Title" as={DateTimeTextField} />
  */
-export const DateTimeTextField: React.FC<Omit<DateTimeTextProps, 'error'>> = (
-  props,
-) => {
+export const DateTimeTextField: React.FC<
+  Omit<DateTimeTextProps, 'error' | 'onChange'>
+> = (props) => {
   const error = useFormikError(props.name);
   const [, meta, helpers] = useField(props.name);
 

package/src/components/FormElements/DynamicDataListControl/DynamicDataListField.tsx

@@ -24,9 +24,8 @@ export const DynamicDataListField = <T extends Data>(
     Omit<DynamicDataListControlProps<T>, 'error' | 'onChange'>
   >,
 ): JSX.Element => {
-  const { name } = props;
   const error = useFormikError(props.name);
-  const [field, , helpers] = useField(name);
+  const [field, , helpers] = useField(props.name);
 
   return (
     <DynamicDataListControl

package/src/components/FormElements/FileUploadControl/FileUploadField.tsx

@@ -6,9 +6,8 @@ import { FileUploadControl, FileUploadProps } from './FileUploadControl';
 export const FileUploadField: React.FC<
   Omit<FileUploadProps, 'onFileSelected' | 'error'>
 > = (props) => {
-  const { name } = props;
   const error = useFormikError(props.name);
-  const [field, , helpers] = useField(name);
+  const [field, , helpers] = useField(props.name);
 
   return (
     <FileUploadControl

package/src/components/FormElements/MaskedSingleLineText/MaskedSingleLineTextField.tsx

@@ -17,7 +17,7 @@ import {
     placeholderChar={'0'}, />
  */
 export const MaskedSingleLineTextField: React.FC<
-  Omit<MaskedSingleLineTextProps, 'error'>
+  Omit<MaskedSingleLineTextProps, 'error' | 'onChange'>
 > = (props) => {
   const error = useFormikError(props.name);
 

package/src/components/FormElements/Radio/RadioField.tsx

@@ -9,9 +9,9 @@ export const RadioField: React.FC<
     transform?: (value: unknown) => unknown;
   }
 > = (props) => {
-  const { name, transform = (value: unknown) => value } = props;
+  const { transform = (value: unknown) => value } = props;
   const error = useFormikError(props.name);
-  const [field, , helpers] = useField(name);
+  const [field, , helpers] = useField(props.name);
 
   return (
     <Radio