@kenos-ui/react-datepicker 0.4.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +114 -5
  2. package/dist/index.cjs +25 -0
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +21 -19
  5. package/dist/index.d.ts +21 -19
  6. package/dist/index.js +25 -0
  7. package/dist/index.js.map +1 -1
  8. package/package.json +3 -2
package/dist/index.d.cts CHANGED
@@ -1,4 +1,3 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import React, { Dispatch } from 'react';
3
2
 
4
3
  type ViewMode = "day" | "month" | "year";
@@ -81,10 +80,10 @@ interface DatePickerConfig {
81
80
  type RootProps = DatePickerRootProps & {
82
81
  children: React.ReactNode;
83
82
  };
84
- declare function Root(props: RootProps): react_jsx_runtime.JSX.Element;
83
+ declare function Root(props: RootProps): React.JSX.Element;
85
84
 
86
85
  type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
87
- declare function Label({ children, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
86
+ declare function Label({ children, ...props }: LabelProps): React.JSX.Element;
88
87
 
89
88
  interface InputProps {
90
89
  index?: 0 | 1;
@@ -96,10 +95,10 @@ interface InputProps {
96
95
  className?: string;
97
96
  style?: React.CSSProperties;
98
97
  }
99
- declare function Input({ index, segmentLabels, className, style }: InputProps): react_jsx_runtime.JSX.Element;
98
+ declare function Input({ index, segmentLabels, className, style }: InputProps): React.JSX.Element;
100
99
 
101
100
  type TriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-haspopup" | "aria-expanded" | "aria-controls">;
102
- declare function Trigger({ children, onClick, disabled, ...props }: TriggerProps): react_jsx_runtime.JSX.Element;
101
+ declare function Trigger({ children, onClick, disabled, ...props }: TriggerProps): React.JSX.Element;
103
102
 
104
103
  interface ContentProps extends React.HTMLAttributes<HTMLDivElement> {
105
104
  forceMount?: boolean;
@@ -111,36 +110,36 @@ interface ContentProps extends React.HTMLAttributes<HTMLDivElement> {
111
110
  collisionPadding?: number;
112
111
  portal?: boolean;
113
112
  }
114
- declare function Content({ children, forceMount, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, portal, style, onKeyDown, ...props }: ContentProps): react_jsx_runtime.JSX.Element | null;
113
+ declare function Content({ children, forceMount, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, portal, style, onKeyDown, ...props }: ContentProps): React.JSX.Element | null;
115
114
 
116
115
  interface CalendarProps {
117
116
  className?: string;
118
117
  }
119
- declare function Calendar({ className }: CalendarProps): react_jsx_runtime.JSX.Element;
118
+ declare function Calendar({ className }: CalendarProps): React.JSX.Element;
120
119
 
121
120
  interface ViewProps {
122
121
  view: ViewMode;
123
122
  children: React.ReactNode;
124
123
  }
125
- declare function View({ view, children }: ViewProps): react_jsx_runtime.JSX.Element | null;
124
+ declare function View({ view, children }: ViewProps): React.JSX.Element | null;
126
125
 
127
126
  type ViewControlProps = React.HTMLAttributes<HTMLDivElement>;
128
- declare function ViewControl({ children, ...props }: ViewControlProps): react_jsx_runtime.JSX.Element;
127
+ declare function ViewControl({ children, ...props }: ViewControlProps): React.JSX.Element;
129
128
 
130
129
  type PrevTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label">;
131
- declare function PrevTrigger({ children, onClick, ...props }: PrevTriggerProps): react_jsx_runtime.JSX.Element;
130
+ declare function PrevTrigger({ children, onClick, ...props }: PrevTriggerProps): React.JSX.Element;
132
131
 
133
132
  type NextTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label">;
134
- declare function NextTrigger({ children, onClick, ...props }: NextTriggerProps): react_jsx_runtime.JSX.Element;
133
+ declare function NextTrigger({ children, onClick, ...props }: NextTriggerProps): React.JSX.Element;
135
134
 
136
135
  type ViewTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label">;
137
- declare function ViewTrigger({ children, onClick, ...props }: ViewTriggerProps): react_jsx_runtime.JSX.Element;
136
+ declare function ViewTrigger({ children, onClick, ...props }: ViewTriggerProps): React.JSX.Element;
138
137
 
139
138
  interface WeekDaysProps {
140
139
  format?: "long" | "short" | "narrow";
141
140
  className?: string;
142
141
  }
143
- declare function WeekDays({ format, className }: WeekDaysProps): react_jsx_runtime.JSX.Element;
142
+ declare function WeekDays({ format, className }: WeekDaysProps): React.JSX.Element;
144
143
 
145
144
  interface GridProps {
146
145
  children?: (ctx: {
@@ -149,7 +148,7 @@ interface GridProps {
149
148
  header?: React.ReactNode;
150
149
  className?: string;
151
150
  }
152
- declare function Grid({ children, header, className }: GridProps): react_jsx_runtime.JSX.Element;
151
+ declare function Grid({ children, header, className }: GridProps): React.JSX.Element;
153
152
 
154
153
  interface DayProps {
155
154
  date: Date;
@@ -157,7 +156,7 @@ interface DayProps {
157
156
  className?: string;
158
157
  style?: React.CSSProperties;
159
158
  }
160
- declare function Day({ date, children, className, style }: DayProps): react_jsx_runtime.JSX.Element;
159
+ declare function Day({ date, children, className, style }: DayProps): React.JSX.Element;
161
160
 
162
161
  interface MonthGridProps {
163
162
  children: (ctx: {
@@ -165,12 +164,12 @@ interface MonthGridProps {
165
164
  }) => React.ReactNode;
166
165
  className?: string;
167
166
  }
168
- declare function MonthGrid({ children, className }: MonthGridProps): react_jsx_runtime.JSX.Element;
167
+ declare function MonthGrid({ children, className }: MonthGridProps): React.JSX.Element;
169
168
 
170
169
  interface MonthCellProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-selected" | "aria-disabled"> {
171
170
  value: number;
172
171
  }
173
- declare function MonthCell({ value, children, onClick, ...props }: MonthCellProps): react_jsx_runtime.JSX.Element;
172
+ declare function MonthCell({ value, children, onClick, ...props }: MonthCellProps): React.JSX.Element;
174
173
 
175
174
  interface YearItem {
176
175
  value: number;
@@ -183,12 +182,12 @@ interface YearGridProps {
183
182
  }) => React.ReactNode;
184
183
  className?: string;
185
184
  }
186
- declare function YearGrid({ children, className }: YearGridProps): react_jsx_runtime.JSX.Element;
185
+ declare function YearGrid({ children, className }: YearGridProps): React.JSX.Element;
187
186
 
188
187
  interface YearCellProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-selected" | "aria-disabled"> {
189
188
  value: number;
190
189
  }
191
- declare function YearCell({ value, children, onClick, ...props }: YearCellProps): react_jsx_runtime.JSX.Element;
190
+ declare function YearCell({ value, children, onClick, ...props }: YearCellProps): React.JSX.Element;
192
191
 
193
192
  declare const index_Calendar: typeof Calendar;
194
193
  declare const index_Content: typeof Content;
@@ -269,6 +268,9 @@ type DatePickerAction = {
269
268
  type: "SET_RANGE";
270
269
  start: Date | null;
271
270
  end: Date | null;
271
+ } | {
272
+ type: "SET_SELECTED_DATE";
273
+ date: Date | null;
272
274
  } | {
273
275
  type: "SET_INPUT";
274
276
  value: string;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import React, { Dispatch } from 'react';
3
2
 
4
3
  type ViewMode = "day" | "month" | "year";
@@ -81,10 +80,10 @@ interface DatePickerConfig {
81
80
  type RootProps = DatePickerRootProps & {
82
81
  children: React.ReactNode;
83
82
  };
84
- declare function Root(props: RootProps): react_jsx_runtime.JSX.Element;
83
+ declare function Root(props: RootProps): React.JSX.Element;
85
84
 
86
85
  type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
87
- declare function Label({ children, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
86
+ declare function Label({ children, ...props }: LabelProps): React.JSX.Element;
88
87
 
89
88
  interface InputProps {
90
89
  index?: 0 | 1;
@@ -96,10 +95,10 @@ interface InputProps {
96
95
  className?: string;
97
96
  style?: React.CSSProperties;
98
97
  }
99
- declare function Input({ index, segmentLabels, className, style }: InputProps): react_jsx_runtime.JSX.Element;
98
+ declare function Input({ index, segmentLabels, className, style }: InputProps): React.JSX.Element;
100
99
 
101
100
  type TriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-haspopup" | "aria-expanded" | "aria-controls">;
102
- declare function Trigger({ children, onClick, disabled, ...props }: TriggerProps): react_jsx_runtime.JSX.Element;
101
+ declare function Trigger({ children, onClick, disabled, ...props }: TriggerProps): React.JSX.Element;
103
102
 
104
103
  interface ContentProps extends React.HTMLAttributes<HTMLDivElement> {
105
104
  forceMount?: boolean;
@@ -111,36 +110,36 @@ interface ContentProps extends React.HTMLAttributes<HTMLDivElement> {
111
110
  collisionPadding?: number;
112
111
  portal?: boolean;
113
112
  }
114
- declare function Content({ children, forceMount, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, portal, style, onKeyDown, ...props }: ContentProps): react_jsx_runtime.JSX.Element | null;
113
+ declare function Content({ children, forceMount, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, portal, style, onKeyDown, ...props }: ContentProps): React.JSX.Element | null;
115
114
 
116
115
  interface CalendarProps {
117
116
  className?: string;
118
117
  }
119
- declare function Calendar({ className }: CalendarProps): react_jsx_runtime.JSX.Element;
118
+ declare function Calendar({ className }: CalendarProps): React.JSX.Element;
120
119
 
121
120
  interface ViewProps {
122
121
  view: ViewMode;
123
122
  children: React.ReactNode;
124
123
  }
125
- declare function View({ view, children }: ViewProps): react_jsx_runtime.JSX.Element | null;
124
+ declare function View({ view, children }: ViewProps): React.JSX.Element | null;
126
125
 
127
126
  type ViewControlProps = React.HTMLAttributes<HTMLDivElement>;
128
- declare function ViewControl({ children, ...props }: ViewControlProps): react_jsx_runtime.JSX.Element;
127
+ declare function ViewControl({ children, ...props }: ViewControlProps): React.JSX.Element;
129
128
 
130
129
  type PrevTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label">;
131
- declare function PrevTrigger({ children, onClick, ...props }: PrevTriggerProps): react_jsx_runtime.JSX.Element;
130
+ declare function PrevTrigger({ children, onClick, ...props }: PrevTriggerProps): React.JSX.Element;
132
131
 
133
132
  type NextTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label">;
134
- declare function NextTrigger({ children, onClick, ...props }: NextTriggerProps): react_jsx_runtime.JSX.Element;
133
+ declare function NextTrigger({ children, onClick, ...props }: NextTriggerProps): React.JSX.Element;
135
134
 
136
135
  type ViewTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label">;
137
- declare function ViewTrigger({ children, onClick, ...props }: ViewTriggerProps): react_jsx_runtime.JSX.Element;
136
+ declare function ViewTrigger({ children, onClick, ...props }: ViewTriggerProps): React.JSX.Element;
138
137
 
139
138
  interface WeekDaysProps {
140
139
  format?: "long" | "short" | "narrow";
141
140
  className?: string;
142
141
  }
143
- declare function WeekDays({ format, className }: WeekDaysProps): react_jsx_runtime.JSX.Element;
142
+ declare function WeekDays({ format, className }: WeekDaysProps): React.JSX.Element;
144
143
 
145
144
  interface GridProps {
146
145
  children?: (ctx: {
@@ -149,7 +148,7 @@ interface GridProps {
149
148
  header?: React.ReactNode;
150
149
  className?: string;
151
150
  }
152
- declare function Grid({ children, header, className }: GridProps): react_jsx_runtime.JSX.Element;
151
+ declare function Grid({ children, header, className }: GridProps): React.JSX.Element;
153
152
 
154
153
  interface DayProps {
155
154
  date: Date;
@@ -157,7 +156,7 @@ interface DayProps {
157
156
  className?: string;
158
157
  style?: React.CSSProperties;
159
158
  }
160
- declare function Day({ date, children, className, style }: DayProps): react_jsx_runtime.JSX.Element;
159
+ declare function Day({ date, children, className, style }: DayProps): React.JSX.Element;
161
160
 
162
161
  interface MonthGridProps {
163
162
  children: (ctx: {
@@ -165,12 +164,12 @@ interface MonthGridProps {
165
164
  }) => React.ReactNode;
166
165
  className?: string;
167
166
  }
168
- declare function MonthGrid({ children, className }: MonthGridProps): react_jsx_runtime.JSX.Element;
167
+ declare function MonthGrid({ children, className }: MonthGridProps): React.JSX.Element;
169
168
 
170
169
  interface MonthCellProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-selected" | "aria-disabled"> {
171
170
  value: number;
172
171
  }
173
- declare function MonthCell({ value, children, onClick, ...props }: MonthCellProps): react_jsx_runtime.JSX.Element;
172
+ declare function MonthCell({ value, children, onClick, ...props }: MonthCellProps): React.JSX.Element;
174
173
 
175
174
  interface YearItem {
176
175
  value: number;
@@ -183,12 +182,12 @@ interface YearGridProps {
183
182
  }) => React.ReactNode;
184
183
  className?: string;
185
184
  }
186
- declare function YearGrid({ children, className }: YearGridProps): react_jsx_runtime.JSX.Element;
185
+ declare function YearGrid({ children, className }: YearGridProps): React.JSX.Element;
187
186
 
188
187
  interface YearCellProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-selected" | "aria-disabled"> {
189
188
  value: number;
190
189
  }
191
- declare function YearCell({ value, children, onClick, ...props }: YearCellProps): react_jsx_runtime.JSX.Element;
190
+ declare function YearCell({ value, children, onClick, ...props }: YearCellProps): React.JSX.Element;
192
191
 
193
192
  declare const index_Calendar: typeof Calendar;
194
193
  declare const index_Content: typeof Content;
@@ -269,6 +268,9 @@ type DatePickerAction = {
269
268
  type: "SET_RANGE";
270
269
  start: Date | null;
271
270
  end: Date | null;
271
+ } | {
272
+ type: "SET_SELECTED_DATE";
273
+ date: Date | null;
272
274
  } | {
273
275
  type: "SET_INPUT";
274
276
  value: string;
package/dist/index.js CHANGED
@@ -356,6 +356,20 @@ function datePickerReducer(state, action, config) {
356
356
  } : {}
357
357
  };
358
358
  }
359
+ case "SET_SELECTED_DATE": {
360
+ const d = action.date ? startOfDay(action.date) : null;
361
+ return {
362
+ ...state,
363
+ selectedDate: d,
364
+ inputValue: d ? formatDate(d, config.locale) : "",
365
+ ...d ? {
366
+ focusedDate: d,
367
+ focusedMonth: d.getMonth(),
368
+ focusedYear: d.getFullYear(),
369
+ yearPageStart: yearPageStart(d.getFullYear())
370
+ } : {}
371
+ };
372
+ }
359
373
  case "SET_INPUT":
360
374
  return { ...state, inputValue: action.value };
361
375
  case "COMMIT_INPUT": {
@@ -482,6 +496,17 @@ function useDatePicker(props) {
482
496
  prevSelectedRef.current = state.selectedDate;
483
497
  }
484
498
  }, [state.selectedDate]);
499
+ const controlledSingleValue = (!props.mode || props.mode === "single") && "value" in props && props.value !== void 0 ? props.value : void 0;
500
+ const propSelectedT = controlledSingleValue?.getTime() ?? null;
501
+ const lastSyncedPropSelectedRef = useRef(null);
502
+ useEffect(() => {
503
+ if (controlledSingleValue === void 0) return;
504
+ if (lastSyncedPropSelectedRef.current === propSelectedT) return;
505
+ lastSyncedPropSelectedRef.current = propSelectedT;
506
+ const stateT = state.selectedDate?.getTime() ?? null;
507
+ if (propSelectedT === stateT) return;
508
+ dispatch({ type: "SET_SELECTED_DATE", date: controlledSingleValue });
509
+ }, [propSelectedT, dispatch]);
485
510
  const controlledRangeValue = props.mode === "range" && "value" in props && props.value !== void 0 ? props.value : void 0;
486
511
  const lastSyncedPropRangeRef = useRef(
487
512
  null