chili-ui 0.3.1 → 0.4.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/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"}

package/dist/components/DatePicker/index.js

@@ -1,8 +1,27 @@
 'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { DateTimeInput } from '../../src/DateTimeInput';
 import { COMPONENT_TYPES } from '../../src/DateTimeInput/constants';
-export const DatePicker = React.forwardRef((props, ref) => (_jsx(DateTimeInput, Object.assign({}, props, { format: props.format || 'dd.MM.yyyy', type: COMPONENT_TYPES.DATE_ONLY, ref: ref }))));
+import { useValue, useProps } from '../../utils';
+import { createChangeHandler } from './handlers';
+export const DatePicker = React.forwardRef((rawProps, ref) => {
+    const props = useProps(rawProps);
+    const { defaultValue = null, value: valueProp } = props, restProps = __rest(props, ["defaultValue", "value"]);
+    const [value, setUncontrolledValue] = useValue(valueProp, defaultValue);
+    const handleChange = createChangeHandler(props, setUncontrolledValue);
+    return (_jsx(DateTimeInput, Object.assign({}, restProps, { defaultValue: defaultValue, value: value, onChange: handleChange, format: props.format || 'dd.MM.yyyy', type: COMPONENT_TYPES.DATE_ONLY, ref: ref })));
+});
 DatePicker.displayName = 'DatePicker';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../chili/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAGpE,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAsB,EAAE,GAA2B,EAAE,EAAE,CAAC,CAClG,KAAC,aAAa,oBACR,KAAK,IACT,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,YAAY,EACpC,IAAI,EAAE,eAAe,CAAC,SAAS,EAC/B,GAAG,EAAE,GAAG,IACR,CACH,CAA8B,CAAC;AAEhC,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../chili/components/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,QAAyB,EAAE,GAA2B,EAAE,EAAE;IACpG,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEjC,MAAM,EACJ,YAAY,GAAG,IAAI,EACnB,KAAK,EAAE,SAAS,KAEd,KAAK,EADJ,SAAS,UACV,KAAK,EAJH,yBAIL,CAAQ,CAAC;IAEV,MAAM,CAAC,KAAK,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAuB,SAAS,EAAE,YAAY,CAAC,CAAC;IAE9F,MAAM,YAAY,GAAG,mBAAmB,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC;IAEtE,OAAO,CACL,KAAC,aAAa,oBACR,SAAS,IACb,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,YAAY,EACpC,IAAI,EAAE,eAAe,CAAC,SAAS,EAC/B,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC,CAA8B,CAAC;AAEhC,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

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

@@ -3,6 +3,8 @@ import type { COMPONENTS_NAMESPACES } from '../../constants';
 import type { BlurEvent, ChangeEvent, FocusEvent, DateTimeInputProps } from '../../src/DateTimeInput/types';
 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/dist/components/DateRange/handlers.d.ts

@@ -0,0 +1,4 @@
+import type { SetState } from '../../commonTypes';
+import type { DateRangeProps } from './types';
+import type { CustomRangeEvent } from '../../src/DateTimeInputRange/types';
+export declare const createChangeHandler: (props: DateRangeProps, setUncontrolledValue: SetState<DateRangeProps['value']>) => (ev: CustomRangeEvent) => void;