chili-ui 0.7.3 → 0.8.1

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,21 @@ export const createResetHandler = ({
     },
   });
 };
+
+export const createSetValueHandler = ({
+  props,
+  dispatch,
+}: {
+  props: StandaloneCalendarProps,
+  dispatch: React.Dispatch<StandaloneCalendarActionTypes>,
+}) => (value: unknown) => {
+  const newValue = value as Date | null;
+  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/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/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';
@@ -67,6 +67,7 @@ export const MaskedInput = React.forwardRef((props: MaskedInputProps, ref: React
     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(
@@ -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,
+    },
+  });
+};

package/chili/components/Rating/index.tsx

@@ -12,6 +12,7 @@ import {
   createMouseOutHandler,
   createMouseOverHandler,
   createResetHandler,
+  createSetValueHandler,
 } from './handlers';
 import { Span } from '../Span';
 import { Icon } from '../Icon';
@@ -43,6 +44,7 @@ export const Rating = React.forwardRef((props: RatingProps, ref?: React.Ref<HTML
     value,
   }, {
     reset: createResetHandler(props, setUncontrolledValue),
+    setValue: createSetValueHandler(props, setUncontrolledValue),
   });
 
   React.useEffect(() => {

package/chili/components/Switcher/index.tsx

@@ -36,7 +36,9 @@ export const Switcher = React.forwardRef((props: SwitcherProps, ref: React.Ref<H
   useValidation(props, {
     value,
   }, {
+    // todo: implement
     reset: () => {},
+    setValue: () => {},
   });
 
   const switcherClassName = getClassNames(

package/chili/components/Textarea/handlers.ts

@@ -105,3 +105,20 @@ export const createResetHandler = ({
     props.onChange(customEvent);
   }
 };
+
+export const createSetValueHandler = (
+  props: TextareaProps,
+  setValue: SetState<string>,
+) => (value: unknown) => {
+  const newValue = value as string;
+  setValue(newValue);
+  if (isFunction(props.onChange)) {
+    const customEvent = {
+      component: {
+        value: newValue,
+        name: props.name,
+      },
+    };
+    props.onChange(customEvent);
+  }
+};

package/chili/components/Textarea/index.tsx

@@ -8,7 +8,7 @@ import { useValidation } from '../Validation';
 import { COMPONENTS_NAMESPACES } from '../../constants';
 import type { TextareaProps } from './types';
 import {
-  createBlurHandler, createChangeHandler, createFocusHandler, createKeyDownHandler, createResetHandler,
+  createBlurHandler, createChangeHandler, createFocusHandler, createKeyDownHandler, createResetHandler, createSetValueHandler,
 } from './handlers';
 import { useCustomElements } from './hooks';
 import { getValue } from './helpers';
@@ -53,6 +53,7 @@ export const Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<H
     reset: createResetHandler({
       props, setValue: setValueState, value: defaultValue || '',
     }),
+    setValue: createSetValueHandler(props, setValueState),
   });
 
   const handleChange = createChangeHandler(props, setValueState);

package/chili/components/Validation/helpers.ts

@@ -131,6 +131,7 @@ export const addField = ({
   isRequired = false,
   requiredMessage,
   reset,
+  setValue,
   suggestion,
 }: AddFieldData): void => {
   const forms: Form[] = getForms();
@@ -151,6 +152,7 @@ export const addField = ({
         isRequired,
         requiredMessage,
         reset,
+        setValue,
         suggestion,
       }],
     }];
@@ -177,6 +179,7 @@ export const addField = ({
         isRequired,
         requiredMessage,
         reset,
+        setValue,
         suggestion,
       }];
 
@@ -195,7 +198,7 @@ export const addField = ({
       const newFields = [...currentForm.fields.map((field) => {
         if (field.name !== fieldName) return field;
 
-        return { ...field, setIsValid };
+        return { ...field, setIsValid, setValue: setValue || field.setValue };
       })];
 
       return { name: formName, fields: newFields };

package/chili/components/Validation/types.ts

@@ -63,6 +63,7 @@ export interface Field {
   name: string,
   requiredMessage?: string,
   reset: () => void,
+  setValue: (value: unknown) => void,
   setIsValid: SetState<boolean>,
   setMessages: SetState<string[] | undefined>,
   shouldValidateUnmounted: boolean,
@@ -114,6 +115,7 @@ export interface AddFieldData {
   isRequired?: boolean,
   requiredMessage?: string,
   reset: () => void,
+  setValue: (value: unknown) => void,
   suggestion?: Suggestion,
 }
 
@@ -131,6 +133,7 @@ export interface UpdateFieldData {
 
 export interface ValidationExtra {
   reset: () => void,
+  setValue: (value: unknown) => void,
 }
 
 export interface RemoveFieldOptions {

package/chili/components/Validation/useValidation.tsx

@@ -51,6 +51,7 @@ export const useValidation = <P extends ValidationProps, S extends ValidationSta
         isRequired,
         requiredMessage,
         reset: extra.reset,
+        setValue: extra.setValue,
         suggestion: state.suggestion,
       });