chili-ui 0.3.1 → 0.5.0

package/chili/components/DatePicker/handlers.ts

@@ -0,0 +1,17 @@
+import { isFunction } from 'lodash';
+import type { SetState } from '../../commonTypes';
+import type { DatePickerProps } from './types';
+import type { ChangeEvent } from '../../src/DateTimeInput/types';
+
+export const createChangeHandler = (
+  props: DatePickerProps,
+  setUncontrolledValue: SetState<string | Date | null>,
+) => (ev: ChangeEvent): void => {
+  const { onChange, value } = props;
+
+  if (value === undefined) {
+    setUncontrolledValue(ev.component.date ?? ev.component.value);
+  }
+
+  if (isFunction(onChange)) onChange(ev);
+};

package/chili/components/DatePicker/index.tsx

@@ -4,14 +4,33 @@ import * as React from 'react';
 import { DateTimeInput } from '../../src/DateTimeInput';
 import { COMPONENT_TYPES } from '../../src/DateTimeInput/constants';
 import type { DatePickerProps } from './types';
+import { useValue, useProps } from '../../utils';
+import { createChangeHandler } from './handlers';
 
-export const DatePicker = React.forwardRef((props: DatePickerProps, ref: React.Ref<HTMLElement>) => (
-  <DateTimeInput
-    {...props}
-    format={props.format || 'dd.MM.yyyy'}
-    type={COMPONENT_TYPES.DATE_ONLY}
-    ref={ref}
-  />
-)) as React.FC<DatePickerProps>;
+export const DatePicker = React.forwardRef((rawProps: DatePickerProps, ref: React.Ref<HTMLElement>) => {
+  const props = useProps(rawProps);
+
+  const {
+    defaultValue = null,
+    value: valueProp,
+    ...restProps
+  } = props;
+
+  const [value, setUncontrolledValue] = useValue<string | Date | null>(valueProp, defaultValue);
+
+  const handleChange = createChangeHandler(props, setUncontrolledValue);
+
+  return (
+    <DateTimeInput
+      {...restProps}
+      defaultValue={defaultValue}
+      value={value}
+      onChange={handleChange}
+      format={props.format || 'dd.MM.yyyy'}
+      type={COMPONENT_TYPES.DATE_ONLY}
+      ref={ref}
+    />
+  );
+}) as React.FC<DatePickerProps>;
 
 DatePicker.displayName = 'DatePicker';

package/chili/components/DatePicker/types.ts

@@ -9,6 +9,8 @@ import type {
 import type { PartialGlobalDefaultTheme } from '../../utils/useTheme';
 
 export interface DatePickerProps extends DateTimeInputProps {
+  /** Default value */
+  defaultValue?: string | Date | null,
   /** Date format, dd.MM.yyyy by default */
   format?: string,
   /** Control opened state */

package/chili/components/DateRange/handlers.ts

@@ -0,0 +1,19 @@
+import { isFunction } from 'lodash';
+import type { SetState } from '../../commonTypes';
+import type { DateRangeProps } from './types';
+import type {
+  CustomRangeEvent,
+} from '../../src/DateTimeInputRange/types';
+
+export const createChangeHandler = (
+  props: DateRangeProps,
+  setUncontrolledValue: SetState<DateRangeProps['value']>,
+) => (ev: CustomRangeEvent): void => {
+  const { onChange, value } = props;
+
+  if (value === undefined) {
+    setUncontrolledValue(ev.component.date);
+  }
+
+  if (isFunction(onChange)) onChange(ev);
+};

package/chili/components/DateRange/index.tsx

@@ -3,15 +3,34 @@
 import * as React from 'react';
 import { COMPONENT_TYPES } from '../../src/DateTimeInput/constants';
 import { DateTimeInputRange } from '../../src/DateTimeInputRange';
+import { useProps, useValue } from '../../utils';
 import type { DateRangeProps } from './types';
+import { createChangeHandler } from './handlers';
 
-export const DateRange = React.forwardRef((props: DateRangeProps, ref: React.Ref<HTMLElement>) => (
-  <DateTimeInputRange
-    {...props}
-    type={COMPONENT_TYPES.DATE_ONLY}
-    format={props.format || 'dd.MM.yyyy'}
-    ref={ref}
-  />
-)) as React.FC<DateRangeProps>;
+export const DateRange = React.forwardRef((rawProps: DateRangeProps, ref: React.Ref<HTMLElement>) => {
+  const props = useProps(rawProps);
+
+  const {
+    defaultValue = [null, null],
+    value: valueProp,
+    ...restProps
+  } = props;
+
+  const [value, setUncontrolledValue] = useValue<DateRangeProps['value']>(valueProp, defaultValue);
+
+  const handleChange = createChangeHandler(props, setUncontrolledValue);
+
+  return (
+    <DateTimeInputRange
+      {...restProps}
+      type={COMPONENT_TYPES.DATE_ONLY}
+      format={props.format || 'dd.MM.yyyy'}
+      defaultValue={defaultValue}
+      value={value}
+      onChange={handleChange}
+      ref={ref}
+    />
+  );
+}) as React.FC<DateRangeProps>;
 
 DateRange.displayName = 'DateRange';

package/chili/components/DateRange/types.ts

@@ -7,6 +7,8 @@ import type {
 } from '../../src/DateTimeInputRange/types';
 
 export interface DateRangeProps extends DateTimeInputRangeProps {
+  /** Default value */
+  defaultValue?: [string, string] | [Date | null, Date | null],
   /** Date format, dd.MM.yyyy by default */
   format?: string,
   /** Disabled input state */

package/chili/components/DateTimePicker/handlers.ts

@@ -0,0 +1,19 @@
+import { isFunction } from 'lodash';
+import type { SetState } from '../../commonTypes';
+import type { DateTimePickerProps } from './types';
+import type {
+  ChangeEvent,
+} from '../../src/DateTimeInput/types';
+
+export const createChangeHandler = (
+  props: DateTimePickerProps,
+  setUncontrolledValue: SetState<string | Date | null>,
+) => (ev: ChangeEvent): void => {
+  const { onChange, value } = props;
+
+  if (value === undefined) {
+    setUncontrolledValue(ev.component.date ?? ev.component.value);
+  }
+
+  if (isFunction(onChange)) onChange(ev);
+};

package/chili/components/DateTimePicker/index.tsx

@@ -3,15 +3,34 @@
 import * as React from 'react';
 import { DateTimeInput } from '../../src/DateTimeInput';
 import { COMPONENT_TYPES } from '../../src/DateTimeInput/constants';
+import { useProps, useValue } from '../../utils';
 import type { DateTimePickerProps } from './types';
+import { createChangeHandler } from './handlers';
 
-export const DateTimePicker = React.forwardRef((props: DateTimePickerProps, ref: React.Ref<HTMLElement>) => (
-  <DateTimeInput
-    {...props}
-    format={props.format || 'dd.MM.yyyy hh:mm'}
-    ref={ref}
-    type={COMPONENT_TYPES.DATE_TIME}
-  />
-)) as React.FC<DateTimePickerProps>;
+export const DateTimePicker = React.forwardRef((rawProps: DateTimePickerProps, ref: React.Ref<HTMLElement>) => {
+  const props = useProps(rawProps);
+
+  const {
+    defaultValue = null,
+    value: valueProp,
+    ...restProps
+  } = props;
+
+  const [value, setUncontrolledValue] = useValue<string | Date | null>(valueProp, defaultValue);
+
+  const handleChange = createChangeHandler(props, setUncontrolledValue);
+
+  return (
+    <DateTimeInput
+      {...restProps}
+      format={props.format || 'dd.MM.yyyy hh:mm'}
+      defaultValue={defaultValue}
+      value={value}
+      onChange={handleChange}
+      ref={ref}
+      type={COMPONENT_TYPES.DATE_TIME}
+    />
+  );
+}) as React.FC<DateTimePickerProps>;
 
 DateTimePicker.displayName = 'DateTimePicker';

package/chili/components/DateTimePicker/types.ts

@@ -4,6 +4,8 @@ import type {
 } from '../../src/DateTimeInput/types';
 
 export interface DateTimePickerProps extends DateTimeInputProps {
+  /** Default value */
+  defaultValue?: string | Date | null,
   /** Date format, dd.MM.yyyy hh:mm by default */
   format?: string,
   /** Control opened state */

package/chili/components/DateTimeRange/handlers.ts

@@ -0,0 +1,19 @@
+import { isFunction } from 'lodash';
+import type { SetState } from '../../commonTypes';
+import type { DateTimeRangeProps } from './types';
+import type {
+  CustomRangeEvent,
+} from '../../src/DateTimeInputRange/types';
+
+export const createChangeHandler = (
+  props: DateTimeRangeProps,
+  setUncontrolledValue: SetState<DateTimeRangeProps['value']>,
+) => (ev: CustomRangeEvent): void => {
+  const { onChange, value } = props;
+
+  if (value === undefined) {
+    setUncontrolledValue(ev.component.date);
+  }
+
+  if (isFunction(onChange)) onChange(ev);
+};

package/chili/components/DateTimeRange/index.tsx

@@ -3,15 +3,34 @@
 import * as React from 'react';
 import { DateTimeInputRange } from '../../src/DateTimeInputRange';
 import { COMPONENT_TYPES } from '../../src/DateTimeInput/constants';
+import { useProps, useValue } from '../../utils';
 import type { DateTimeRangeProps } from './types';
+import { createChangeHandler } from './handlers';
 
-export const DateTimeRange = React.forwardRef((props: DateTimeRangeProps, ref: React.Ref<HTMLElement>) => (
-  <DateTimeInputRange
-    {...props}
-    type={COMPONENT_TYPES.DATE_TIME}
-    format={props.format || 'dd.MM.yyyy hh:mm'}
-    ref={ref}
-  />
-)) as React.FC<DateTimeRangeProps>;
+export const DateTimeRange = React.forwardRef((rawProps: DateTimeRangeProps, ref: React.Ref<HTMLElement>) => {
+  const props = useProps(rawProps);
+
+  const {
+    defaultValue = [null, null],
+    value: valueProp,
+    ...restProps
+  } = props;
+
+  const [value, setUncontrolledValue] = useValue<DateTimeRangeProps['value']>(valueProp, defaultValue);
+
+  const handleChange = createChangeHandler(props, setUncontrolledValue);
+
+  return (
+    <DateTimeInputRange
+      {...restProps}
+      type={COMPONENT_TYPES.DATE_TIME}
+      format={props.format || 'dd.MM.yyyy hh:mm'}
+      defaultValue={defaultValue}
+      value={value}
+      onChange={handleChange}
+      ref={ref}
+    />
+  );
+}) as React.FC<DateTimeRangeProps>;
 
 DateTimeRange.displayName = 'DateTimeRange';

package/chili/components/DateTimeRange/types.ts

@@ -7,6 +7,8 @@ import type {
 } from '../../src/DateTimeInputRange/types';
 
 export interface DateTimeRangeProps extends DateTimeInputRangeProps {
+  /** Default value */
+  defaultValue?: [string, string] | [Date | null, Date | null],
   /** Date format, dd.MM.yyyy hh:mm by default */
   format?: string,
   /** Disabled input state */

package/chili/components/DropDownSelect/types.ts

@@ -57,6 +57,7 @@ export interface FocusEvent<T extends Value = Value> extends React.FocusEvent<HT
 }
 
 export interface DropDownSelectProps<T extends Value = Value> extends ValidationProps {
+  /** Browser autofill, off is the default value. Works as HTML autoComplete attribute */
   autoComplete?: string,
   boundingContainerRef?: React.RefObject<HTMLElement>,
   compareObjectsBy?: T extends object ? ((suggestionListItem: T) => unknown) | string : never,

package/chili/components/Icon/icons.tsx

@@ -71,6 +71,11 @@ export const ICON_PATHS: Record<Icons, React.ReactNode[]> = {
   [Icons.Star]: [
     <polygon key="0" points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />,
   ],
+  [Icons.Menu]: [
+    <line key="0" x1="3" y1="12" x2="21" y2="12" />,
+    <line key="1" x1="3" y1="6" x2="21" y2="6" />,
+    <line key="2" x1="3" y1="18" x2="21" y2="18" />,
+  ],
   [Icons.X]: [
     <line key="0" x1="18" y1="6" x2="6" y2="18" />,
     <line key="1" x1="6" y1="6" x2="18" y2="18" />,

package/chili/components/Icon/types.ts

@@ -31,5 +31,6 @@ export enum Icons {
   PlusSquare = 'plus-square',
   Square = 'square',
   Star = 'star',
+  Menu = 'menu',
   X = 'x',
 }

package/chili/components/MaskedInput/__snapshots__/MaskedInput.test.tsx.snap

@@ -23,6 +23,7 @@ exports[`MaskedInput SNAPSHOTS should render different component states should r
           >
             <Input
               aria-invalid={false}
+              autoComplete="off"
               className="masked-input-element"
               disabled={true}
               mask="+# (###) ###-##-##"
@@ -45,6 +46,7 @@ exports[`MaskedInput SNAPSHOTS should render different component states should r
               >
                 <input
                   aria-invalid={false}
+                  autoComplete="off"
                   className="masked-input-element"
                   disabled={true}
                   maxLength={19}
@@ -99,6 +101,7 @@ exports[`MaskedInput SNAPSHOTS should render different component states should r
           >
             <Input
               aria-invalid={false}
+              autoComplete="off"
               className="masked-input-element"
               mask="+# (###) ###-##-##"
               onBlur={[Function]}
@@ -119,6 +122,7 @@ exports[`MaskedInput SNAPSHOTS should render different component states should r
               >
                 <input
                   aria-invalid={false}
+                  autoComplete="off"
                   className="masked-input-element"
                   disabled={false}
                   maxLength={19}

package/chili/components/MaskedInput/index.tsx

@@ -14,6 +14,7 @@ import { getValue, getValueToValidate } from './helpers';
 
 export const MaskedInput = React.forwardRef((props: MaskedInputProps, ref: React.Ref<HTMLElement>) => {
   const {
+    autoComplete = 'off',
     className,
     defaultValue,
     inputRender,
@@ -138,6 +139,7 @@ export const MaskedInput = React.forwardRef((props: MaskedInputProps, ref: React
           {...restProps}
           aria-invalid={!isValid}
           aria-required={isRequired}
+          autoComplete={autoComplete}
           className={theme.input}
           isDisabled={isDisabled}
           mask={mask}

package/chili/components/MaskedInput/types.ts

@@ -23,6 +23,8 @@ export interface ResetEvent {
 export type ChangeEvent = BaseChangeEvent | ResetEvent;
 
 export interface MaskedInputProps extends ValidationProps {
+  /** Browser autofill, off is the default value. Works as HTML autoComplete attribute */
+  autoComplete?: string,
   /** Default value */
   defaultValue?: string,
   /** Input customizator. It replaces MaskedInputBase! */

package/chili/components/NumericTextBox/types.ts

@@ -115,6 +115,8 @@ export interface NumericTextBoxProps extends ValidationProps {
   onEnterPress?: (event: EnterPressEvent) => void,
   /** Focus handler */
   onFocus?: (event: FocusEvent) => void,
+  /** Placeholder */
+  placeholder?: string,
   /** Ref */
   ref?: React.Ref<HTMLElement>,
   /** To trim or not to trim */

package/chili/src/DateTimeInput/DateTimeInput.tsx

@@ -121,7 +121,7 @@ export const DateTimeInput = React.forwardRef((props: DateTimeInputProps, ref: R
   const handleBlur = createBlurHandler(handlersData);
   const handleCalendarIconMouseDown = createCalendarIconMouseDownHandler(handlersData);
   const handleCalendarKeyDown = createKeyDownHandler(handlersData);
-  const handleCalendarMouseDown = createCalendarMouseDownHandler(handlersData);
+  const handleCalendarMouseDown = createCalendarMouseDownHandler();
   const handleCalendarClick = createCalendarClickHandler(handlersData);
   const handleChange = createChangeHandler(handlersData);
   const handleFocus = createFocusHandler(handlersData);
@@ -167,6 +167,7 @@ export const DateTimeInput = React.forwardRef((props: DateTimeInputProps, ref: R
           placeholder={placeholder}
           ref={maskedInputRef}
           value={inputValue}
+          inputMode="numeric"
         />
         {type !== COMPONENT_TYPES.TIME_ONLY && (
         <Icon

package/chili/src/DateTimeInput/handlers/handleCalendarClick.ts

@@ -97,6 +97,8 @@ export const handleDatesSelect = (payload: DatesSelectPayload): void => {
 
     dispatch(setOpen(false));
 
+    if (maskedInputRef && maskedInputRef.current) maskedInputRef.current.focus();
+
     if (type === COMPONENT_TYPES.DATE_TIME) {
       updateInputSelection(maskedInputRef, format);
     }

package/chili/src/DateTimeInput/handlers/handleMouseDown.ts

@@ -24,14 +24,8 @@ export const createCalendarIconMouseDownHandler = ({
 
     dispatch(setOpen(true));
   } else dispatch(setOpen(false));
-
-  setTimeout(() => {
-    if (maskedInputRef.current) maskedInputRef.current.focus();
-  }, 0);
 };
 
-export const createCalendarMouseDownHandler = ({ maskedInputRef }: HandlersData) => (ev: React.MouseEvent<HTMLDivElement>): void => {
+export const createCalendarMouseDownHandler = () => (ev: React.MouseEvent<HTMLDivElement>): void => {
   ev.preventDefault();
-
-  if (maskedInputRef.current) maskedInputRef.current.focus();
 };

package/chili/src/DateTimeInput/handlers/handleReset.ts

@@ -1,7 +1,8 @@
 import type * as React from 'react';
-import { isFunction } from 'lodash';
+import { isFunction, isDate } from 'lodash';
 import type { DateTimeInputProps, AllActions } from '../types';
 import { setDate, setValue } from '../actions';
+import { stringToDate, formatDateTime } from '../helpers';
 
 export const createResetHandler = ({
   props,
@@ -10,14 +11,25 @@ export const createResetHandler = ({
   props: DateTimeInputProps,
   dispatch: React.Dispatch<AllActions>,
 }) => () => {
-  const date = null;
-  const value = '';
+  const { defaultValue, format = 'dd.MM.yyyy', name, onChange } = props;
+
+  const date = (() => {
+    if (isDate(defaultValue)) return defaultValue;
+    if (typeof defaultValue === 'string') return stringToDate(defaultValue, format);
+    return null;
+  })();
+
+  const value = (() => {
+    if (isDate(defaultValue)) return formatDateTime(defaultValue, format);
+    if (typeof defaultValue === 'string') return defaultValue;
+    return '';
+  })();
   dispatch(setValue(value));
   dispatch(setDate(date));
-  if (isFunction(props.onChange)) {
-    props.onChange({
+  if (isFunction(onChange)) {
+    onChange({
       component: {
-        name: props.name,
+        name,
         date,
         value,
       },

package/chili/src/DateTimeInput/hooks.ts

@@ -7,7 +7,7 @@ import { VIEW_TYPES } from '../CalendarBase/constants';
 import { MaskedInputBase } from '../MaskedInputBase';
 import { setDate, setViewDate } from './actions';
 import {
-  stringToDate,
+  stringToDate, formatDateTime,
 } from './helpers';
 import { stateReducer } from './reducer';
 import type {
@@ -59,7 +59,7 @@ export const useDateTimeInputEffects = ({
 
 export const useDateTimeInputState = (props: DateTimeInputProps): [DateTimeInputState, React.Dispatch<AllActions>] => {
   const {
-    value: valueProp, format, min, max,
+    value: valueProp, defaultValue, format = 'dd.MM.yyyy', min, max,
   } = props;
 
   // if today's date is out of min/max range - open the calendar with the min/max date instead
@@ -69,11 +69,25 @@ export const useDateTimeInputState = (props: DateTimeInputProps): [DateTimeInput
   // today's date, the time is 00:00
   const today = new Date();
 
-  const stringValue = isDate(valueProp) || valueProp === null ? '' : valueProp;
+  const initialPropValue = valueProp === undefined ? defaultValue : valueProp;
+
+  const initialDate = (() => {
+    if (isDate(initialPropValue)) return initialPropValue;
+    if (typeof initialPropValue === 'string') return stringToDate(initialPropValue, format);
+    return null;
+  })();
+
+  const initialValue = (() => {
+    if (isDate(initialPropValue)) return formatDateTime(initialPropValue, format);
+    if (typeof initialPropValue === 'string') return initialPropValue;
+    return '';
+  })();
+
+  const stringValue = isDate(initialPropValue) || initialPropValue === null || initialPropValue === undefined ? '' : initialPropValue as string;
 
   const initialState = {
-    date: null,
-    value: '',
+    date: initialDate,
+    value: initialValue,
     isValid: true,
     isFocused: false,
     isOpen: false,

package/chili/src/DateTimeInput/types.ts

@@ -105,6 +105,8 @@ export interface DateTimeInputProps extends ValidationProps {
   onFocus?: (ev: FocusEvent) => void,
   /** Placeholder */
   placeholder?: string,
+  /** Default value */
+  defaultValue?: string | Date | null,
   /** Theme */
   theme?: PartialGlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.dateTimeInput],
   /** Component type */

package/chili/src/DateTimeInputRange/helpers.ts

@@ -10,13 +10,15 @@ export const isDateValue = (value: DateTimeInputRangeProps['value']): value is [
   && (isNil(value[1]) || isDate(value[1]));
 
 export const getDateRangeFromValue = (props: DateTimeInputRangeProps): [Date | null, Date | null] => {
-  const { value: valueProp, format } = props;
+  const { value: valueProp, defaultValue, format } = props;
 
-  if (!valueProp) return [null, null];
+  const currentValue = valueProp === undefined ? defaultValue : valueProp;
 
-  if (isDateValue(valueProp)) return valueProp;
+  if (!currentValue) return [null, null];
 
-  return [stringToDate(valueProp[0], format), stringToDate(valueProp[1], format)];
+  if (isDateValue(currentValue)) return currentValue;
+
+  return [stringToDate(currentValue[0], format), stringToDate(currentValue[1], format)];
 };
 
 export const getPlaceholder = (placeholder?: [string | undefined, string | undefined] | string): [string | undefined, string | undefined] => {

package/chili/src/DateTimeInputRange/index.tsx

@@ -41,6 +41,7 @@ export const DateTimeInputRange = React.forwardRef((props: DateTimeInputRangePro
     placeholder: placeholderProp,
     theme: themeProp,
     type,
+    defaultValue,
     value: valueProp,
     weeksRowRender,
     wrapperRangeRender,
@@ -123,6 +124,7 @@ export const DateTimeInputRange = React.forwardRef((props: DateTimeInputRangePro
         onEnterPress={handleEnterPress('from')}
         onFocus={onFocus}
         placeholder={placeholders[0]}
+        defaultValue={defaultValue?.[0] ?? null}
         theme={theme.from}
         type={type}
         value={value[0]}
@@ -155,6 +157,7 @@ export const DateTimeInputRange = React.forwardRef((props: DateTimeInputRangePro
         onFocus={onFocus}
         placeholder={placeholders[1]}
         ref={toDateTimeInputRef}
+        defaultValue={defaultValue?.[1] ?? null}
         theme={theme.to}
         type={type}
         value={value[1]}

package/chili/src/DateTimeInputRange/types.ts

@@ -46,6 +46,8 @@ export interface DelimiterProps {
 }
 
 export interface DateTimeInputRangeProps {
+  /** Default value */
+  defaultValue?: [string, string] | [Date | null, Date | null],
   boundingContainerRef?: React.RefObject<HTMLElement>,
   className?: string,
   max?: Date,

package/chili/src/MaskedInputBase/index.tsx

@@ -19,6 +19,7 @@ export const MaskedInputBase = React.forwardRef((props: MaskedInputBaseProps, re
     className,
     mask,
     value,
+    autoComplete,
     placeholderChar = DEFAULT_PLACEHOLDER_CHAR,
     placeholder,
     isDisabled = false,
@@ -90,6 +91,7 @@ export const MaskedInputBase = React.forwardRef((props: MaskedInputBaseProps, re
     <input
       disabled={isDisabled}
       className={className}
+      autoComplete={autoComplete}
       maxLength={mask.length + 1}
       onBlur={handleBlur}
       onFocus={handleFocus}

package/chili/src/MaskedInputBase/types.ts

@@ -68,6 +68,7 @@ export interface MaskedInputBaseProps {
   isDisabled?: boolean,
   mask: string,
   maxLength?: number,
+  autoComplete?: string,
   name?: string,
   onBlur?: (event: BlurEvent) => void,
   onChange: (event: ChangeEvent) => void,

package/dist/components/DatePicker/handlers.d.ts

@@ -0,0 +1,4 @@
+import type { SetState } from '../../commonTypes';
+import type { DatePickerProps } from './types';
+import type { ChangeEvent } from '../../src/DateTimeInput/types';
+export declare const createChangeHandler: (props: DatePickerProps, setUncontrolledValue: SetState<string | Date | null>) => (ev: ChangeEvent) => void;

package/dist/components/DatePicker/handlers.js

@@ -0,0 +1,11 @@
+import { isFunction } from 'lodash';
+export const createChangeHandler = (props, setUncontrolledValue) => (ev) => {
+    var _a;
+    const { onChange, value } = props;
+    if (value === undefined) {
+        setUncontrolledValue((_a = ev.component.date) !== null && _a !== void 0 ? _a : ev.component.value);
+    }
+    if (isFunction(onChange))
+        onChange(ev);
+};
+//# sourceMappingURL=handlers.js.map

package/dist/components/DatePicker/handlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handlers.js","sourceRoot":"","sources":["../../../chili/components/DatePicker/handlers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAKpC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,KAAsB,EACtB,oBAAoD,EACpD,EAAE,CAAC,CAAC,EAAe,EAAQ,EAAE;;IAC7B,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAElC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,oBAAoB,CAAC,MAAA,EAAE,CAAC,SAAS,CAAC,IAAI,mCAAI,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,UAAU,CAAC,QAAQ,CAAC;QAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;AACzC,CAAC,CAAC"}