onekijs-ui 1.0.4 → 1.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onekijs-ui",
   "private": false,
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Advanced React Web Components",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -35,7 +35,7 @@
     "@floating-ui/react": "^0.27.20",
     "@popperjs/core": "^2.11.8",
     "@reach/observe-rect": "^1.2.0",
-    "onekijs-framework": "^1.0.3",
+    "onekijs-framework": "^1.0.6",
     "react-virtualized-auto-sizer": "^2.0.3",
     "react-window": "^2.2.7",
     "react-window-infinite-loader": "^2.0.1",
@@ -50,5 +50,5 @@
     "react-dom": "^19.2.7"
   },
   "sideEffects": false,
-  "gitHead": "5445ab48458ab994b8e76660fa897af57e34f51a"
+  "gitHead": "f808b045ca1aa271ae0b80f0257b4bca4321ab98"
 }

package/src/components/button/components/DropdownButtonComponent.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef } from 'react';
+import { FC, useRef } from 'react';
 import Button from '..';
 import { useClickOutside } from '../../../utils/event';
 import { addClassname } from '../../../utils/style';
@@ -34,8 +34,9 @@ const DropdownButtonComponent: FC<DropDownButtonProps> = ({
   const ref = useRef<HTMLSpanElement | null>(null);
 
   const [Dropdown, triggerRef] = useDropdown();
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-  useClickOutside(ref, () => onCollapse && onCollapse());
+  useClickOutside([ref, dropdownRef], () => onCollapse && onCollapse());
 
   return (
     <span ref={ref}>
@@ -76,7 +77,9 @@ const DropdownButtonComponent: FC<DropDownButtonProps> = ({
         placement={placement}
         animationTimeout={animationTimeout}
       >
-        {listElement}
+        <div ref={dropdownRef}>
+          {listElement}
+        </div>
       </Dropdown>
     </span>
   );

package/src/components/datetime/FormDatePicker.tsx

@@ -0,0 +1,79 @@
+import { FormDisplayerProps, FormFieldValueDisplayerProps, isNull, useForm } from 'onekijs-framework';
+import React, { FC } from 'react';
+import { DatePicker } from '.';
+import { titlelize } from '../../utils/misc';
+import FieldDisplayer from '../field/FieldDisplayer';
+import FieldLayout from '../field/FieldLayout';
+import useFieldLayout from '../field/hooks/useFieldLayout';
+import { dateAdapter } from './hooks/useDateAdapter';
+import { timestampMilliSecondAdapter } from './hooks/useTimestampAdapter';
+import { FormDatePickerProps } from './typings';
+
+export const FormDateValueDisplayer: React.FC<FormFieldValueDisplayerProps> = ({ value }) => {
+  return <span className="o-date-picker-displayer-value">{value ?? ''}</span>;
+};
+
+export const formDateDisplayerProps = (props: FormDatePickerProps<any>) => ({
+  defaultValue: props.defaultValue === undefined ? null : props.defaultValue,
+  isUndefined:
+    props.isUndefined === undefined ? (value: any) => value === undefined || value === null : props.isUndefined,
+  Displayer:
+    props.Displayer === undefined
+      ? (displayerProps: FormDisplayerProps) => {
+          const form = useForm();
+          let value = form.getValue(displayerProps.name) ?? null;
+          const ValueDisplayer = props.ValueDisplayer ?? FormDateValueDisplayer;
+          const adapter =
+            props.adapter === 'timestamp'
+              ? timestampMilliSecondAdapter
+              : props.adapter === 'date'
+              ? dateAdapter
+              : props.adapter;
+          if (adapter) {
+            value = adapter.toDate(value);
+          }
+          return (
+            <FieldDisplayer
+              label={displayerProps.label ?? titlelize(displayerProps.name)}
+              help={props.help}
+              first={displayerProps.first}
+              last={displayerProps.last}
+              value={<ValueDisplayer value={value} />}
+              format={displayerProps.format}
+            />
+          );
+        }
+      : props.Displayer,
+});
+
+/**
+ * `<FormDatePicker/>` is a DataPicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+const FormDatePicker: FC<FormDatePickerProps<any>> = React.memo((props) => {
+  const [fieldLayoutProps, fieldComponentProps] = useFieldLayout<FormDatePickerProps<any>>(
+    Object.assign({}, props, formDateDisplayerProps(props)),
+  );
+
+  return (
+    <FieldLayout {...fieldLayoutProps} required={props.required}>
+      <DatePicker {...fieldComponentProps} />
+    </FieldLayout>
+  );
+});
+
+FormDatePicker.displayName = 'FormDatePicker';
+export default FormDatePicker;

package/src/components/datetime/FormDateRangePicker.tsx

@@ -0,0 +1,79 @@
+import { FormDisplayerProps, FormFieldValueDisplayerProps, useForm } from 'onekijs-framework';
+import React, { FC } from 'react';
+import { DateRangePicker } from '.';
+import { titlelize } from '../../utils/misc';
+import FieldDisplayer from '../field/FieldDisplayer';
+import FieldLayout from '../field/FieldLayout';
+import useFieldLayout from '../field/hooks/useFieldLayout';
+import { dateRangeAdapter } from './hooks/useDateRangeAdapter';
+import { timestampMilliSecondRangeAdapter } from './hooks/useTimestampRangeAdapter';
+import { FormDateRangePickerProps } from './typings';
+
+export const FormDateRangeValueDisplayer: React.FC<FormFieldValueDisplayerProps> = ({ value }) => {
+  return <span className="o-date-picker-range-displayer-value">{value ? `${value.from} - ${value.to}` : ''}</span>;
+};
+
+export const formDateRangeDisplayerProps = (props: FormDateRangePickerProps<any>) => ({
+  defaultValue: props.defaultValue === undefined ? null : props.defaultValue,
+  isUndefined:
+    props.isUndefined === undefined ? (value: any) => value === undefined || value === null : props.isUndefined,
+  Displayer:
+    props.Displayer === undefined
+      ? (displayerProps: FormDisplayerProps) => {
+          const form = useForm();
+          let value = form.getValue(displayerProps.name) ?? null;
+          const ValueDisplayer = props.ValueDisplayer ?? FormDateRangeValueDisplayer;
+          const adapter =
+            props.adapter === 'timestamp'
+              ? timestampMilliSecondRangeAdapter
+              : props.adapter === 'date'
+              ? dateRangeAdapter
+              : props.adapter;
+          if (adapter) {
+            value = adapter.toDateRange(value);
+          }
+          return (
+            <FieldDisplayer
+              label={displayerProps.label ?? titlelize(displayerProps.name)}
+              help={props.help}
+              first={displayerProps.first}
+              last={displayerProps.last}
+              value={<ValueDisplayer value={value} />}
+              format={displayerProps.format}
+            />
+          );
+        }
+      : props.Displayer,
+});
+
+/**
+ * `<FormDateRangePicker/>` is a DataPicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+const FormDateRangePicker: FC<FormDateRangePickerProps<any>> = React.memo((props) => {
+  const [fieldLayoutProps, fieldComponentProps] = useFieldLayout<FormDateRangePickerProps<any>>(
+    Object.assign({}, props, formDateRangeDisplayerProps(props)),
+  );
+
+  return (
+    <FieldLayout {...fieldLayoutProps} required={props.required}>
+      <DateRangePicker {...fieldComponentProps} />
+    </FieldLayout>
+  );
+});
+
+FormDateRangePicker.displayName = 'FormDateRangePicker';
+export default FormDateRangePicker;

package/src/components/datetime/FormDateTimePicker.tsx

@@ -0,0 +1,43 @@
+import { FormDisplayerProps, FormFieldValueDisplayerProps, isNull, useForm } from 'onekijs-framework';
+import React, { FC } from 'react';
+import { titlelize } from '../../utils/misc';
+import FieldDisplayer from '../field/FieldDisplayer';
+import FieldLayout from '../field/FieldLayout';
+import useFieldLayout from '../field/hooks/useFieldLayout';
+import { FormDateTimePickerProps } from './typings';
+import { DateTimePicker } from '.';
+import { timestampMilliSecondAdapter } from './hooks/useTimestampAdapter';
+import { dateAdapter } from './hooks/useDateAdapter';
+import { formDateDisplayerProps } from './FormDatePicker';
+
+/**
+ * `<FormDateTimePicker/>` is a DataTimePicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+const FormDateTimePicker: FC<FormDateTimePickerProps<any>> = React.memo((props) => {
+  const [fieldLayoutProps, fieldComponentProps] = useFieldLayout<FormDateTimePickerProps<any>>(
+    Object.assign({}, props, formDateDisplayerProps(props)),
+  );
+
+  return (
+    <FieldLayout {...fieldLayoutProps} required={props.required}>
+      <DateTimePicker {...fieldComponentProps} />
+    </FieldLayout>
+  );
+});
+
+FormDateTimePicker.displayName = 'FormDateTimePicker';
+export default FormDateTimePicker;

package/src/components/datetime/FormDateTimeRangePicker.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import { DateTimeRangePicker } from '.';
+import FieldLayout from '../field/FieldLayout';
+import useFieldLayout from '../field/hooks/useFieldLayout';
+import { formDateRangeDisplayerProps } from './FormDateRangePicker';
+import { FormDateTimeRangePickerProps } from './typings';
+
+/**
+ * `<FormDateTimeRangePicker/>` is a DataTimeRangePicker component designed to be managed by a Form.
+ * It must therefore be a nested component of a Form
+ *
+ * Some properties are handled entirely by a form controller.
+ *   * value
+ *   * onChange
+ *   * onFocus
+ *   * onBlur
+ *   * validations
+ *   * visibility
+ *   * disabled
+ * The value is synchronized in both directions (it can be modified manually by the user or by the controller).
+ *
+ * @group Form
+ * @category Components
+ */
+const FormDateTimeRangePicker: FC<FormDateTimeRangePickerProps<any>> = React.memo((props) => {
+  const [fieldLayoutProps, fieldComponentProps] = useFieldLayout<FormDateTimeRangePickerProps<any>>(
+    Object.assign({}, props, formDateRangeDisplayerProps(props)),
+  );
+
+  return (
+    <FieldLayout {...fieldLayoutProps} required={props.required}>
+      <DateTimeRangePicker {...fieldComponentProps} />
+    </FieldLayout>
+  );
+});
+
+FormDateTimeRangePicker.displayName = 'FormDateTimeRangePicker';
+export default FormDateTimeRangePicker;

package/src/components/datetime/components/DatePickerComponent.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { DatePickerProps, DatePickerType, PickerComponentProps } from '../typings';
 import PickerComponent from './PickerComponent';
+import { timestampMilliSecondAdapter } from '../hooks/useTimestampAdapter';
+import { dateAdapter } from '../hooks/useDateAdapter';
 
 const type: DatePickerType = {
   date: true,
@@ -11,19 +13,21 @@ const type: DatePickerType = {
 const DatePickerComponent: React.FC<DatePickerProps> = (props) => {
   const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
 
+  const _adapter = adapter === 'timestamp' ? timestampMilliSecondAdapter : adapter === 'date' ? dateAdapter : adapter;
+
   const onChange: PickerComponentProps['onChange'] = forwardChange
     ? (value) => {
-        if (value === null || !adapter) {
+        if (value === null || !_adapter) {
           forwardChange(value);
         } else {
-          forwardChange(adapter.fromDate(value));
+          forwardChange(_adapter.fromDate(value));
         }
       }
     : undefined;
 
   let value: PickerComponentProps['value'] = externalValue
-    ? adapter
-      ? adapter.toDate(externalValue)
+    ? _adapter
+      ? _adapter.toDate(externalValue)
       : externalValue
     : null;
 

package/src/components/datetime/components/DateRangePickerComponent.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { DatePickerType, DateRangePickerProps, PickerComponentProps } from '../typings';
 import { toDateRange } from '../util';
 import PickerComponent from './PickerComponent';
+import { timestampMilliSecondRangeAdapter } from '../hooks/useTimestampRangeAdapter';
+import { dateRangeAdapter } from '../hooks/useDateRangeAdapter';
 
 const type: DatePickerType = {
   date: true,
@@ -12,13 +14,15 @@ const type: DatePickerType = {
 const DateRangePickerComponent: React.FC<DateRangePickerProps> = (props) => {
   const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
 
+  const _adapter = adapter === 'timestamp' ? timestampMilliSecondRangeAdapter : adapter === 'date' ? dateRangeAdapter : adapter;
+
   const onChange: PickerComponentProps['onChange'] = forwardChange
     ? (value, label) => {
         const dateRange = toDateRange(value, label);
-        if (dateRange === null || !adapter) {
+        if (dateRange === null || !_adapter) {
           forwardChange(dateRange);
         } else {
-          forwardChange(adapter.fromDateRange(dateRange));
+          forwardChange(_adapter.fromDateRange(dateRange));
         }
       }
     : undefined;
@@ -26,8 +30,8 @@ const DateRangePickerComponent: React.FC<DateRangePickerProps> = (props) => {
   let value: PickerComponentProps['value'] = null;
   let valueLabel: string | null | undefined;
   if (externalValue) {
-    if (adapter) {
-      const { from, to, label } = adapter.toDateRange(externalValue);
+    if (_adapter) {
+      const { from, to, label } = _adapter.toDateRange(externalValue);
       value = `${from || ''} to ${to || ''}`;
       valueLabel = label;
     } else {

package/src/components/datetime/components/DateTimePickerComponent.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { dateAdapter } from '../hooks/useDateAdapter';
+import { timestampMilliSecondAdapter } from '../hooks/useTimestampAdapter';
 import { DatePickerType, DateTimePickerProps, PickerComponentProps } from '../typings';
 import PickerComponent from './PickerComponent';
 
@@ -11,19 +13,21 @@ const type: DatePickerType = {
 const DateTimePickerComponent: React.FC<DateTimePickerProps> = (props) => {
   const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
 
+  const _adapter = adapter === 'timestamp' ? timestampMilliSecondAdapter : adapter === 'date' ? dateAdapter : adapter;
+
   const onChange: PickerComponentProps['onChange'] = forwardChange
     ? (value) => {
-        if (value === null || !adapter) {
+        if (value === null || !_adapter) {
           forwardChange(value);
         } else {
-          forwardChange(adapter.fromDate(value));
+          forwardChange(_adapter.fromDate(value));
         }
       }
     : undefined;
 
   let value: PickerComponentProps['value'] = externalValue
-    ? adapter
-      ? adapter.toDate(externalValue)
+    ? _adapter
+      ? _adapter.toDate(externalValue)
       : externalValue
     : null;
 

package/src/components/datetime/components/DateTimeRangePickerComponent.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { DatePickerType, DateTimeRangePickerProps, PickerComponentProps } from '../typings';
 import { toDateRange } from '../util';
 import PickerComponent from './PickerComponent';
+import { timestampMilliSecondRangeAdapter } from '../hooks/useTimestampRangeAdapter';
+import { dateRangeAdapter } from '../hooks/useDateRangeAdapter';
 
 const type: DatePickerType = {
   date: true,
@@ -12,13 +14,15 @@ const type: DatePickerType = {
 const DateTimeRangePickerComponent: React.FC<DateTimeRangePickerProps> = (props) => {
   const { onChange: forwardChange, value: externalValue, adapter, ...datePickerProps } = props;
 
+  const _adapter = adapter === 'timestamp' ? timestampMilliSecondRangeAdapter : adapter === 'date' ? dateRangeAdapter : adapter;
+
   const onChange: PickerComponentProps['onChange'] = forwardChange
     ? (value, label) => {
         const dateRange = toDateRange(value, label);
-        if (dateRange === null || !adapter) {
+        if (dateRange === null || !_adapter) {
           forwardChange(dateRange);
         } else {
-          forwardChange(adapter.fromDateRange(dateRange));
+          forwardChange(_adapter.fromDateRange(dateRange));
         }
       }
     : undefined;
@@ -26,8 +30,8 @@ const DateTimeRangePickerComponent: React.FC<DateTimeRangePickerProps> = (props)
   let value: PickerComponentProps['value'] = null;
   let valueLabel: string | null | undefined;
   if (externalValue) {
-    if (adapter) {
-      const { from, to, label } = adapter.toDateRange(externalValue);
+    if (_adapter) {
+      const { from, to, label } = _adapter.toDateRange(externalValue);
       value = `${from || ''} to ${to || ''}`;
       valueLabel = label;
     } else {

package/src/components/datetime/components/TimeComponent.tsx

@@ -25,6 +25,7 @@ const TimeComponent: React.FC<TimeComponentProps> = ({
           displayHours={displayHours}
           displayMinutes={displayMinutes}
           displaySeconds={displaySeconds}
+          displayHeaders={false}
         />
         <TimeRangeComponent
           type={type}
@@ -34,6 +35,7 @@ const TimeComponent: React.FC<TimeComponentProps> = ({
           displayHours={displayHours}
           displayMinutes={displayMinutes}
           displaySeconds={displaySeconds}
+          displayHeaders={false}
         />
       </div>
     );
@@ -50,6 +52,7 @@ const TimeComponent: React.FC<TimeComponentProps> = ({
         displayHours={displayHours}
         displayMinutes={displayMinutes}
         displaySeconds={displaySeconds}
+        displayHeaders={true}
       />
     </div>
   );

package/src/components/datetime/components/TimeRangeComponent.tsx

@@ -1,8 +1,8 @@
+import { ucfirst } from 'onekijs-framework';
 import React from 'react';
-import { TimeRangeComponentProps } from '../typings';
 import { isValidDate } from '../../../utils/date';
+import { TimeRangeComponentProps } from '../typings';
 import TimeSelectorComponent from './TimeSelectorComponent';
-import { ucfirst } from 'onekijs-framework';
 
 const TimeRangeComponent: React.FC<TimeRangeComponentProps> = ({
   edge,
@@ -11,6 +11,7 @@ const TimeRangeComponent: React.FC<TimeRangeComponentProps> = ({
   displayHours,
   displayMinutes,
   displaySeconds,
+  displayHeaders,
 }) => {
   const valid = isValidDate(`${value.day}-${value.month}-${value.year}`);
   let d: Date | undefined;
@@ -43,6 +44,7 @@ const TimeRangeComponent: React.FC<TimeRangeComponentProps> = ({
             displayHours={displayHours}
             displayMinutes={displayMinutes}
             displaySeconds={displaySeconds}
+            displayHeaders={displayHeaders}
           />
         </div>
       )}

package/src/components/datetime/components/TimeSelectorComponent.tsx

@@ -12,7 +12,7 @@ const getValue = (candidate: string | number | undefined, max: number, defaultVa
   return candidate;
 };
 
-const TimeSelectorComponent: React.FC<TimeSelectorComponentProps> = ({
+const   TimeSelectorComponent: React.FC<TimeSelectorComponentProps> = ({
   value,
   onChange,
   size,
@@ -20,6 +20,7 @@ const TimeSelectorComponent: React.FC<TimeSelectorComponentProps> = ({
   displayHours,
   displayMinutes,
   displaySeconds,
+  displayHeaders,
 }) => {
   const d = new Date();
   const hourInt = getValue(value.hour, 23, displayHours ? d.getHours() : 0);
@@ -84,7 +85,7 @@ const TimeSelectorComponent: React.FC<TimeSelectorComponentProps> = ({
   return (
     <div className="o-time-selector">
       {displayHours && (
-        <TimeSelectorPartComponent key="hour" type="hour" value={hour} onChange={onChangeHour} size={size} />
+        <TimeSelectorPartComponent key="hour" type="hour" value={hour} onChange={onChangeHour} size={size} displayHeaders={displayHeaders} />
       )}
       {displayHours && (displayMinutes || displaySeconds) && (
         <span key="sep1" className="o-time-separator">
@@ -92,7 +93,7 @@ const TimeSelectorComponent: React.FC<TimeSelectorComponentProps> = ({
         </span>
       )}
       {displayMinutes && (
-        <TimeSelectorPartComponent key="minute" type="minute" value={minute} onChange={onChangeMinute} size={size} />
+        <TimeSelectorPartComponent key="minute" type="minute" value={minute} onChange={onChangeMinute} size={size} displayHeaders={displayHeaders} />
       )}
       {displaySeconds && (displayHours || displayMinutes) && (
         <span key="sep2" className="o-time-separator">
@@ -100,7 +101,7 @@ const TimeSelectorComponent: React.FC<TimeSelectorComponentProps> = ({
         </span>
       )}
       {displaySeconds && (
-        <TimeSelectorPartComponent key="second" type="second" value={second} onChange={onChangeSecond} size={size} />
+        <TimeSelectorPartComponent key="second" type="second" value={second} onChange={onChangeSecond} size={size} displayHeaders={displayHeaders} />
       )}
     </div>
   );

package/src/components/datetime/components/TimeSelectorPartComponent.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { isValidHour, isValidMinuteOrSecond } from '../../../utils/date';
 import TogglerIcon from '../../icon/TogglerIcon';
-import { TimeSelectorPartComponentProps } from '../typings';
 import Input from '../../input';
+import { TimeSelectorPartComponentProps } from '../typings';
 
 const getNextValue = (value: string | number, max: number, type: 'next' | 'previous') => {
   const valueInt = parseInt(`${value}`);
@@ -34,11 +34,25 @@ const isMax = (value: string | number, type: TimeSelectorPartComponentProps['typ
   return type === 'hour' ? parseInt(`${value}`) === 23 : parseInt(`${value}`) === 59;
 };
 
+const headerValue = (type: TimeSelectorPartComponentProps['type']): string => {
+  switch (type) {
+    case 'hour':
+      return 'HH';
+    case 'minute':
+      return 'MM';
+    case 'second':
+      return 'SS';
+    default:
+      return '';
+  }
+};
+
 const TimeSelectorPartComponent: React.FC<TimeSelectorPartComponentProps> = ({
   onChange,
   type,
   value,
   size = 'large',
+  displayHeaders = false,
 }) => {
   const onValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value;
@@ -53,6 +67,7 @@ const TimeSelectorPartComponent: React.FC<TimeSelectorPartComponentProps> = ({
 
   return (
     <div className={`o-time-selector-part o-time-selector-part-${size} o-time-${type}`}>
+      {displayHeaders && <div className="o-time-selector-part-header">{headerValue(type)}</div>}
       <TogglerIcon
         className={isMin(value, type) ? 'o-time-selector-part-icon-disabled' : undefined}
         key="previous"

package/src/components/datetime/hooks/useDateAdapter.ts

@@ -0,0 +1,14 @@
+import { useRef } from 'react';
+import { DateAdapter } from '../typings';
+import { dateToString } from '../util';
+
+export const dateAdapter = {
+    fromDate: (date) => date === null ? null : new Date(date),
+    toDate: (value) => !value ? null : dateToString(value),
+  } as DateAdapter<Date | null>;
+
+const useDateAdapter = () => {
+  return dateAdapter;
+};
+
+export default useDateAdapter;

package/src/components/datetime/hooks/useDateRangeAdapter.ts

@@ -1,25 +1,25 @@
-import { useRef } from 'react';
 import { DateRangeAdapter } from '../typings';
 import { dateToString } from '../util';
 
-const useDateRangeAdapter = () => {
-  const ref = useRef({
+export const dateRangeAdapter = {
     fromDateRange: (range) => {
       return {
-        from: range.from === null ? null : new Date(range.from),
-        to: range.to === null ? null : new Date(range.to),
-        label: range.label,
+        from: range?.from === null ? null : new Date(range.from),
+        to: range?.to === null ? null : new Date(range.to),
+        label: range?.label,
       };
     },
     toDateRange: (value) => {
       return {
-        from: !value.from ? null : dateToString(value.from),
-        to: !value.to ? null : dateToString(value.to),
-        label: value.label,
+        from: !value?.from ? null : dateToString(value.from),
+        to: !value?.to ? null : dateToString(value.to),
+        label: value?.label,
       };
     },
-  } as DateRangeAdapter<{ from: Date | null; to: Date | null; label?: string | null }>);
-  return ref.current;
+  } as DateRangeAdapter<{ from: Date | null; to: Date | null; label?: string | null }>
+
+const useDateRangeAdapter = () => {
+  return dateRangeAdapter;
 };
 
 export default useDateRangeAdapter;

package/src/components/datetime/hooks/useTimestampAdapter.ts

@@ -0,0 +1,37 @@
+import { useRef } from 'react';
+import { DateAdapter, TimestampFormat } from '../typings';
+import { dateToString } from '../util';
+
+export const toTimestamp = (date: string | undefined | null, format: TimestampFormat): number | null => {
+  if (!date) return null;
+  const d = new Date(date);
+  if (isNaN(d as any)) return null;
+  const timestamp = d.getTime();
+  return format === 'milliseconds' ? timestamp : Math.floor(timestamp / 1000);
+};
+
+export const fromTimestamp = (timestamp: number | undefined | null, format: TimestampFormat) => {
+  if (timestamp === null || timestamp === undefined) return null;
+  if (format === 'seconds') {
+    timestamp = timestamp * 1000;
+  }
+  const d = new Date(timestamp);
+  if (isNaN(d as any)) return null;
+  return dateToString(d);
+};
+
+export const timestampAdapter = (format: TimestampFormat = 'milliseconds') => ({
+    fromDate: (date) => toTimestamp(date, format),
+    toDate: (value) => fromTimestamp(value, format),
+  } as DateAdapter<number | null>
+)
+
+export const timestampSecondAdapter = timestampAdapter('seconds');
+export const timestampMilliSecondAdapter = timestampAdapter('milliseconds');
+
+const useTimestampAdapter = (format: TimestampFormat = 'milliseconds') => {
+  const ref = useRef(timestampAdapter(format));
+  return ref.current;
+};
+
+export default useTimestampAdapter;