chili-ui 0.7.3 → 0.9.0

package/chili/components/AutoComplete/handlers.ts

@@ -345,3 +345,29 @@ export const createResetHandler = ({
     },
   });
 };
+
+export const createSetValueHandler = ({
+  props,
+  setStateValue,
+}: {
+  props: AutoCompleteProps,
+  setStateValue: SetState<string>,
+}) => (value: unknown) => {
+  const newValue = value as string;
+  const suggestion = getSuggestionFromValue({
+    data: props.data || [],
+    value: newValue,
+    textField: props.textField,
+  });
+
+  setStateValue(newValue);
+
+  props.onChange?.({
+    component: {
+      value: newValue,
+      method: ChangeMethod.reset,
+      name: props.name,
+      suggestion,
+    },
+  });
+};

package/chili/components/AutoComplete/index.tsx

@@ -27,6 +27,7 @@ import {
   suggestionClickHandlerCreator,
   clearButtonClickHandlerCreator,
   createResetHandler,
+  createSetValueHandler,
 } from './handlers';
 
 import type {
@@ -141,6 +142,7 @@ export const AutoComplete = React.forwardRef((props: AutoCompleteProps, ref: Rea
     reset: createResetHandler({
       props, setStateValue, value: defaultValue ?? '',
     }),
+    setValue: createSetValueHandler({ props, setStateValue }),
   });
 
   const value = isValueControlled ? propValue : stateValue;

package/chili/components/ButtonGroup/handlers.ts

@@ -63,3 +63,23 @@ export const createResetHandler = ({
     props.onChange(customEvent);
   }
 };
+
+export const createSetValueHandler = ({
+  props,
+  setUncontrolledValue,
+}: {
+  props: ButtonGroupProps,
+  setUncontrolledValue: SetState<Value | Value[] | undefined>,
+}) => (value: unknown) => {
+  const newValue = value as Value | Value[] | undefined;
+  setUncontrolledValue(newValue);
+  if (isFunction(props.onChange)) {
+    const customEvent = {
+      component: {
+        name: props.name,
+        value: newValue,
+      },
+    };
+    props.onChange(customEvent);
+  }
+};

package/chili/components/ButtonGroup/index.tsx

@@ -5,7 +5,7 @@ import {
   getClassNames, useTheme, useValue, useElement, useProps, getIsEmptyAndRequired,
 } from '../../utils';
 import { COMPONENTS_NAMESPACES } from '../../constants';
-import { createChangeHandler, createResetHandler } from './handlers';
+import { createChangeHandler, createResetHandler, createSetValueHandler } from './handlers';
 import { compareItems } from './helpers';
 import type {
   ButtonGroupProps, Value,
@@ -47,6 +47,7 @@ export const ButtonGroup = React.forwardRef((props: ButtonGroupProps, ref?: Reac
     reset: createResetHandler({
       props, setUncontrolledValue, value: defaultValue,
     }),
+    setValue: createSetValueHandler({ props, setUncontrolledValue }),
   });
 
   const handleChange = createChangeHandler(props, {

package/chili/components/Calendar/handlers.ts

@@ -161,3 +161,34 @@ export const createResetHandler = ({
     },
   });
 };
+
+export const createSetValueHandler = ({
+  props,
+  dispatch,
+}: {
+  props: StandaloneCalendarProps,
+  dispatch: React.Dispatch<StandaloneCalendarActionTypes>,
+}) => (value: unknown) => {
+  const newValue = (() => {
+    if (typeof value === 'string') {
+      const parsed = new Date(value);
+      const dateValue = Number.isNaN(parsed.getTime()) ? null : parsed;
+      return dateValue;
+    }
+
+    return value as Date | null;
+  })();
+
+  if (!(newValue instanceof Date) && value !== null) {
+    console.error('setValue unsupported date format');
+  }
+
+  dispatch(setDate(newValue));
+
+  props.onChange({
+    component: {
+      value: newValue,
+      name: props.name,
+    },
+  });
+};

package/chili/components/Calendar/index.tsx

@@ -10,7 +10,7 @@ import { CALENDAR_CLICK_ACTION, DEFAULT_DATE_FORMAT, VIEW_TYPES } from '../../sr
 import { TodayButton } from '../../src/CalendarBase/TodayButton';
 import { useCustomElements } from './hooks';
 import { getCalendarConditions } from '../../src/CalendarBase/helpers';
-import { createClickHandler, createResetHandler } from './handlers';
+import { createClickHandler, createResetHandler, createSetValueHandler } from './handlers';
 import { stateReducer } from './reducer';
 import { useValidation } from '../Validation';
 
@@ -58,6 +58,7 @@ export const Calendar = React.forwardRef((props: StandaloneCalendarProps, ref?:
     reset: createResetHandler({
       props, dispatch, value: null,
     }),
+    setValue: createSetValueHandler({ props, dispatch }),
   });
 
   // these flags are used to switch off header buttons in min-max case

package/chili/components/Calendar/types.ts

@@ -16,7 +16,7 @@ import type { ValidationProps } from '../Validation/types';
 
 export interface ResetChangeEvent {
   component: {
-    value: null,
+    value: null | Date,
     name?: string,
   },
 }

package/chili/components/CheckBox/handlers.ts

@@ -45,3 +45,18 @@ export const createResetHandler = (
     },
   });
 };
+
+export const createSetValueHandler = (
+  props: CheckBoxProps,
+  setValue: SetState<boolean>,
+) => (value: unknown) => {
+  const newValue = value as boolean;
+  setValue(newValue);
+
+  props.onChange?.({
+    component: {
+      name: props.name,
+      value: newValue,
+    },
+  });
+};

package/chili/components/CheckBox/index.tsx

@@ -4,7 +4,7 @@ import {
   useTheme, useElement, generateId, useValue, useProps,
 } from '../../utils';
 import { COMPONENTS_NAMESPACES } from '../../constants';
-import { createChangeHandler, createResetHandler } from './handlers';
+import { createChangeHandler, createResetHandler, createSetValueHandler } from './handlers';
 import type { CheckBoxProps } from './types';
 import { ChiliContext } from '../ChiliProvider';
 import {
@@ -42,6 +42,7 @@ export const CheckBox = React.forwardRef((props: CheckBoxProps, ref?: React.Ref<
     value,
   }, {
     reset: createResetHandler(props, setUncontrolledValue),
+    setValue: createSetValueHandler(props, setUncontrolledValue),
   });
 
   const Wrapper = useElement(

package/chili/components/DatePicker/index.tsx

@@ -24,11 +24,11 @@ export const DatePicker = React.forwardRef((rawProps: DatePickerProps, ref: Reac
     <DateTimeInput
       {...restProps}
       defaultValue={defaultValue}
-      value={value}
       onChange={handleChange}
       format={props.format || 'dd.MM.yyyy'}
       type={COMPONENT_TYPES.DATE_ONLY}
       ref={ref}
+      {...(valueProp !== undefined ? { value } : {})}
     />
   );
 }) as React.FC<DatePickerProps>;

package/chili/components/DateRange/index.tsx

@@ -26,9 +26,9 @@ export const DateRange = React.forwardRef((rawProps: DateRangeProps, ref: React.
       type={COMPONENT_TYPES.DATE_ONLY}
       format={props.format || 'dd.MM.yyyy'}
       defaultValue={defaultValue}
-      value={value}
       onChange={handleChange}
       ref={ref}
+      {...(valueProp !== undefined ? { value } : {})}
     />
   );
 }) as React.FC<DateRangeProps>;

package/chili/components/DateTimePicker/index.tsx

@@ -25,10 +25,10 @@ export const DateTimePicker = React.forwardRef((rawProps: DateTimePickerProps, r
       {...restProps}
       format={props.format || 'dd.MM.yyyy hh:mm'}
       defaultValue={defaultValue}
-      value={value}
       onChange={handleChange}
       ref={ref}
       type={COMPONENT_TYPES.DATE_TIME}
+      {...(valueProp !== undefined ? { value } : {})}
     />
   );
 }) as React.FC<DateTimePickerProps>;

package/chili/components/DateTimeRange/index.tsx

@@ -26,9 +26,9 @@ export const DateTimeRange = React.forwardRef((rawProps: DateTimeRangeProps, ref
       type={COMPONENT_TYPES.DATE_TIME}
       format={props.format || 'dd.MM.yyyy hh:mm'}
       defaultValue={defaultValue}
-      value={value}
       onChange={handleChange}
       ref={ref}
+      {...(valueProp !== undefined ? { value } : {})}
     />
   );
 }) as React.FC<DateTimeRangeProps>;

package/chili/components/DropDownSelect/handlers.ts

@@ -361,3 +361,25 @@ export const createResetHandler = ({
     props.onChange(customEvent);
   }
 };
+
+export const createSetValueHandler = ({
+  props,
+  mergeState,
+}: {
+  props: DropDownSelectProps,
+  mergeState: (state: Partial<DropDownSelectState>) => void,
+}) => (value: unknown) => {
+  const newValue = value as Value;
+  mergeState({ value: newValue });
+
+  if (isFunction(props.onChange)) {
+    const customEvent = {
+      component: {
+        name: props.name,
+        value: newValue,
+      },
+    };
+
+    props.onChange(customEvent);
+  }
+};

package/chili/components/DropDownSelect/index.tsx

@@ -19,6 +19,7 @@ import {
   createIconClickHandler,
   createKeyDownHandler,
   createResetHandler,
+  createSetValueHandler,
 } from './handlers';
 import { filterData, getComponentClassNames, getInputValue } from './helpers';
 import { useCorrectSuggestionsInControlledMode, useCustomElements, useSyncedHighlightedValue } from './hooks';
@@ -102,6 +103,7 @@ export const DropDownSelect = React.forwardRef((props: DropDownSelectProps, ref:
     reset: createResetHandler({
       props, mergeState, value: defaultValue,
     }),
+    setValue: createSetValueHandler({ props, mergeState }),
   });
 
   const inputRef = React.useRef<HTMLInputElement | null>(null);

package/chili/components/Input/handlers.ts

@@ -118,3 +118,18 @@ export const createResetHandler = (
     },
   });
 };
+
+export const createSetValueHandler = (
+  props: InputProps,
+  setValue: SetState<string>,
+) => (value: unknown) => {
+  const newValue = value as string;
+  setValue(newValue);
+
+  props.onChange?.({
+    component: {
+      name: props.name,
+      value: newValue,
+    },
+  });
+};

package/chili/components/Input/index.tsx

@@ -15,6 +15,7 @@ import {
   createFocusHandler,
   createKeyDownHandler,
   createResetHandler,
+  createSetValueHandler,
 } from './handlers';
 import { getValue } from './helpers';
 
@@ -61,6 +62,7 @@ export const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLHtm
     value,
   }, {
     reset: createResetHandler(props, setValue),
+    setValue: createSetValueHandler(props, setValue),
   });
 
   const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.input);

package/chili/components/MaskedInput/MaskedInput.persistence.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MaskedInput } from './index';
+import { Persistence } from '../Validation/types';
+
+describe('MaskedInput PERSISTENCE', () => {
+  it('should restore persisted value without console error', async () => {
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    window.sessionStorage.clear();
+
+    const { unmount } = render(
+      <MaskedInput
+        mask="###"
+        form="form"
+        name="field"
+        persistence={Persistence.sessionStorage}
+        onChange={jest.fn()}
+      />,
+    );
+
+    userEvent.type(screen.getByRole('textbox'), '123');
+
+    expect(window.sessionStorage.getItem('chili-form-form')).toBe(JSON.stringify({ field: '123' }));
+
+    unmount();
+
+    render(
+      <MaskedInput
+        mask="###"
+        form="form"
+        name="field"
+        persistence={Persistence.sessionStorage}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(await screen.findByDisplayValue('123')).toBeTruthy();
+
+    expect(consoleErrorSpy.mock.calls.flat()).not.toContain('Persistence prop is for uncontrolled state only');
+
+    consoleErrorSpy.mockRestore();
+  });
+});

package/chili/components/MaskedInput/handlers.ts

@@ -134,3 +134,24 @@ export const createResetHandler = ({
     props.onChange(customEvent);
   }
 };
+
+export const createSetValueHandler = ({
+  props,
+  setValue,
+}: {
+  props: MaskedInputProps,
+  setValue: SetState<string>,
+}) => (value: unknown) => {
+  const newValue = value as string;
+  setValue(newValue);
+  if (isFunction(props.onChange)) {
+    const customEvent = {
+      component: {
+        name: props.name,
+        value: newValue,
+        inputValue: maskValue(newValue, props.mask, props.placeholderChar),
+      },
+    };
+    props.onChange(customEvent);
+  }
+};

package/chili/components/MaskedInput/index.tsx

@@ -7,7 +7,7 @@ import type { MaskedInputProps } from './types';
 import { COMPONENTS_NAMESPACES } from '../../constants';
 import { useValidation } from '../Validation';
 import {
-  createBlurHandler, createChangeHandler, createFocusHandler, createKeyDownHandler, createResetHandler,
+  createBlurHandler, createChangeHandler, createFocusHandler, createKeyDownHandler, createResetHandler, createSetValueHandler,
 } from './handlers';
 import { useCustomElements } from './hooks';
 import { getValue, getValueToValidate } from './helpers';
@@ -59,15 +59,16 @@ export const MaskedInput = React.forwardRef((props: MaskedInputProps, ref: React
 
   const {
     isValid, validateCurrent, InvalidMessage,
-  } = useValidation({
-    ...props, value: valueToValidate,
-  }, {
-    value: valueState,
-  }, {
-    reset: createResetHandler({
-      props, setValue, value: toStringOrEmpty(defaultValue || ''),
-    }),
-  });
+  } = useValidation(
+    props,
+    { value: valueToValidate },
+    {
+      reset: createResetHandler({
+        props, setValue, value: toStringOrEmpty(defaultValue || ''),
+      }),
+      setValue: createSetValueHandler({ props, setValue }),
+    },
+  );
 
   const state = { value: valueState, isFocused, isValid };
 

package/chili/components/MultiSelect/handlers.ts

@@ -264,3 +264,25 @@ export const createResetHandler = ({
     props.onChange(customEvent);
   }
 };
+
+export const createSetValueHandler = ({
+  props,
+  setValue,
+}: {
+  props: MultiSelectProps,
+  setValue: SetState<Value[]>,
+}) => (value: unknown) => {
+  const newValue = value as Value[];
+  setValue(newValue);
+  if (isFunction(props.onChange)) {
+    const customEvent = {
+      component: {
+        name: props.name,
+        value: newValue,
+        deselectedValues: undefined,
+        selectedValue: undefined,
+      },
+    };
+    props.onChange(customEvent);
+  }
+};

package/chili/components/MultiSelect/index.tsx

@@ -19,6 +19,7 @@ import {
   createMouseDownHandler,
   createResetHandler,
   createSelectHandler,
+  createSetValueHandler,
 } from './handlers';
 import { TagsContainer } from './TagsContainer';
 import { Div } from '../Div';
@@ -110,6 +111,7 @@ export const MultiSelect = React.forwardRef((props: MultiSelectProps, ref: React
     reset: createResetHandler({
       props, setValue, value: defaultValue || [],
     }),
+    setValue: createSetValueHandler({ props, setValue }),
   });
 
   const [isFocused, setFocused] = React.useState<boolean>(false);

package/chili/components/NumericTextBox/handlers.ts

@@ -297,3 +297,26 @@ export const createResetHandler = ({
     },
   });
 };
+
+export const createSetValueHandler = ({
+  props,
+  setUncontrolledValue,
+  format,
+  thousandsSeparator,
+}: {
+  props: NumericTextBoxProps,
+  setUncontrolledValue: SetState<number | null>,
+  format: string,
+  thousandsSeparator: string,
+}) => (value: unknown) => {
+  const newValue = value as number | null;
+  setUncontrolledValue(newValue);
+
+  props.onChange?.({
+    component: {
+      formattedValue: formatValue({ value: newValue, format, thousandsSeparator }),
+      name: props.name,
+      value: newValue,
+    },
+  });
+};

package/chili/components/NumericTextBox/index.tsx

@@ -15,6 +15,7 @@ import {
   createKeyDownHandler,
   createPasteHandler,
   createResetHandler,
+  createSetValueHandler,
 } from './handlers';
 import {
   formatInputValue, formatValue, getRestProps, getValue, normalizeValue,
@@ -72,6 +73,9 @@ export const NumericTextBox = React.forwardRef((props: NumericTextBoxProps, ref:
     reset: createResetHandler({
       props, setUncontrolledValue, format, thousandsSeparator, value: normalizeValue(normalizeValueParams),
     }),
+    setValue: createSetValueHandler({
+      props, setUncontrolledValue, format, thousandsSeparator,
+    }),
   });
 
   const wrapperClassNames = getClassNames(

package/chili/components/Password/handlers.ts

@@ -119,3 +119,18 @@ export const createResetHandler = (
     },
   });
 };
+
+export const createSetValueHandler = (
+  props: PasswordProps,
+  setValue: SetState<string>,
+) => (value: unknown) => {
+  const newValue = value as string;
+  setValue(newValue);
+
+  props.onChange?.({
+    component: {
+      name: props.name,
+      value: newValue,
+    },
+  });
+};

package/chili/components/Password/index.tsx

@@ -13,6 +13,7 @@ import {
   createFocusHandler,
   createKeyDownHandler,
   createResetHandler,
+  createSetValueHandler,
 } from './handlers';
 import { getValue, rulesToValidators } from './helpers';
 import { PasswordVisibilityIcon } from './PasswordVisibilityIcon';
@@ -76,6 +77,7 @@ export const Password = React.forwardRef((props: PasswordProps, ref: React.Ref<H
     value,
   }, {
     reset: createResetHandler(props, setValue),
+    setValue: createSetValueHandler(props, setValue),
   });
 
   const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.password);

package/chili/components/Radio/RadioGroup.tsx

@@ -7,9 +7,13 @@ import {
 import { Div } from '../Div';
 import { COMPONENTS_NAMESPACES } from '../../constants';
 import type {
-  ChangeEvent, RadioGroupProps, WrapperProps,
+  ChangeEvent,
+  RadioButtonProps,
+  PropsFromParent,
+  RadioGroupProps,
+  WrapperProps,
 } from './types';
-import { createResetHandler } from './handlers';
+import { createResetHandler, createSetValueHandler } from './handlers';
 import { useValidation } from '../Validation';
 
 export const RadioGroup = React.forwardRef((props: RadioGroupProps, ref?: React.Ref<HTMLElement>): React.ReactElement => {
@@ -35,6 +39,7 @@ export const RadioGroup = React.forwardRef((props: RadioGroupProps, ref?: React.
     value,
   }, {
     reset: createResetHandler(props, setValueState, defaultValue),
+    setValue: createSetValueHandler(props, setValueState),
   });
 
   const combinedClassNames = getClassNames(
@@ -46,7 +51,7 @@ export const RadioGroup = React.forwardRef((props: RadioGroupProps, ref?: React.
     if (isFunction(onChange)) onChange(ev);
 
     return setValueState(ev.component.value);
-  }, [onChange]);
+  }, [onChange, setValueState]);
 
   const Wrapper = useElement<RadioGroupProps, { value?: string | number | null }, WrapperProps>(
     'Wrapper',
@@ -62,19 +67,19 @@ export const RadioGroup = React.forwardRef((props: RadioGroupProps, ref?: React.
       ref={ref}
     >
       {React.Children.toArray(children).map((child) => {
-        if (child
+        if (
+          child
           && React.isValidElement(child)
           && (child.type === RadioButton || (child.type as { name?: string }).name === 'RadioButton')
         ) {
-          return React.cloneElement(child, {
+          const radioButtonChild = child as React.ReactElement<RadioButtonProps & PropsFromParent>;
+          return React.cloneElement(radioButtonChild, {
             name,
             onChange: handleChange,
-            isDisabled: isBoolean(isDisabled) ? isDisabled : child.props.isDisabled,
-            isChecked: child.props.value === value,
-            theme: { ...theme, ...child.props.theme },
-          // todo find a better way to fix TS issue with the name property
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          } as any);
+            isDisabled: isBoolean(isDisabled) ? isDisabled : radioButtonChild.props.isDisabled,
+            isChecked: radioButtonChild.props.value === value,
+            theme: { ...theme, ...radioButtonChild.props.theme },
+          });
         }
         return child;
       })}

package/chili/components/Radio/handlers.ts

@@ -16,3 +16,18 @@ export const createResetHandler = (
     },
   });
 };
+
+export const createSetValueHandler = (
+  props: RadioGroupProps,
+  setValue: SetState<string | number | null | undefined>,
+) => (value: unknown) => {
+  const newValue = value as string | number | null;
+  setValue(newValue);
+
+  props.onChange?.({
+    component: {
+      name: props.name,
+      value: newValue,
+    },
+  });
+};

package/chili/components/Radio/types.ts

@@ -41,7 +41,7 @@ export interface RadioGroupProps extends ValidationProps {
   [x: string]: unknown,
 }
 
-export interface RadioButtonProps extends React.HTMLAttributes<HTMLInputElement> {
+export interface RadioButtonProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
   /** Radio button id */
   id?: string,
   /** Disabled state */

package/chili/components/Rating/handlers.ts

@@ -63,3 +63,19 @@ export const createResetHandler = (
     },
   });
 };
+
+export const createSetValueHandler = (
+  props: RatingProps,
+  setValue: React.Dispatch<React.SetStateAction<RatingValue>>,
+) => (value: unknown) => {
+  const newValue = value as RatingValue;
+  setValue(newValue);
+
+  props.onChange?.({
+    component: {
+      index: isNil(newValue) ? -1 : newValue - 1,
+      name: props.name,
+      value: newValue,
+    },
+  });
+};