@uxf/datepicker 11.124.0 → 11.126.0

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 (5) hide show
  1. package/README.md +101 -108
  2. package/jest.dst.config.js +5 -2
  3. package/package.json +5 -5
  4. package/utils/get-months.d.ts +1 -1
  5. package/utils/get-years.d.ts +1 -1
package/README.md CHANGED
@@ -1,4 +1,5 @@
1
1
  # @uxf/datepicker
2
+
2
3
  ![npm](https://img.shields.io/npm/v/@uxf/datepicker)
3
4
  ![size](https://img.shields.io/bundlephobia/min/@uxf/datepicker)
4
5
  ![quality](https://img.shields.io/npms-io/quality-score/@uxf/datepicker)
@@ -15,10 +16,7 @@ export const DatePicker: FC = () => {
15
16
  // prepare state to handle selected date
16
17
  const [selectedDate, setSelectedDate] = useState<OnDateChangeType>(null);
17
18
 
18
- const {
19
- activeMonths,
20
- firstDayOfWeek,
21
- } = useDatePicker({
19
+ const { activeMonths, firstDayOfWeek } = useDatePicker({
22
20
  selectedDate,
23
21
  minBookingDate: new Date(),
24
22
  onDateChange: setSelectedDate,
@@ -27,14 +25,14 @@ export const DatePicker: FC = () => {
27
25
  // you can use DatePickerContext that helps you avoid passing callbacks throught components
28
26
  return (
29
27
  <DatePickerContext.Provider value={{ addPropsHere }}>
30
- {activeMonths.map(month => (
31
- <DateRangePickerMonth
32
- firstDayOfWeek={firstDayOfWeek}
33
- key={`${month.year}-${month.month}`}
34
- month={month.month}
35
- year={month.year}
36
- />
37
- ))}
28
+ {activeMonths.map((month) => (
29
+ <DateRangePickerMonth
30
+ firstDayOfWeek={firstDayOfWeek}
31
+ key={`${month.year}-${month.month}`}
32
+ month={month.month}
33
+ year={month.year}
34
+ />
35
+ ))}
38
36
  </DatePickerContext.Provider>
39
37
  );
40
38
  };
@@ -43,11 +41,7 @@ export const DatePicker: FC = () => {
43
41
  ### Month component
44
42
 
45
43
  ```tsx
46
- export const DateRangePickerMonth: FC<UseMonthProps> = ({
47
- firstDayOfWeek,
48
- month,
49
- year,
50
- }) => {
44
+ export const DateRangePickerMonth: FC<UseMonthProps> = ({ firstDayOfWeek, month, year }) => {
51
45
  const { days, monthLabel } = useMonth({
52
46
  year,
53
47
  month,
@@ -83,19 +77,18 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
83
77
  onDateHover,
84
78
  } = useContext(DatePickerContext);
85
79
 
86
- const { disabledDate, isSelected, isWithinHoverRange, onClick, isToday } =
87
- useDay<HTMLDivElement>({
88
- date,
89
- dayRef,
90
- focusedDate,
91
- isDateFocused,
92
- isDateSelected,
93
- isDateHovered,
94
- isDateBlocked,
95
- onDateFocus,
96
- onDateSelect,
97
- onDateHover,
98
- });
80
+ const { disabledDate, isSelected, isWithinHoverRange, onClick, isToday } = useDay<HTMLDivElement>({
81
+ date,
82
+ dayRef,
83
+ focusedDate,
84
+ isDateFocused,
85
+ isDateSelected,
86
+ isDateHovered,
87
+ isDateBlocked,
88
+ onDateFocus,
89
+ onDateSelect,
90
+ onDateHover,
91
+ });
99
92
 
100
93
  if (!day) {
101
94
  return <div />;
@@ -106,10 +99,10 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
106
99
  type="button"
107
100
  ref={dayRef}
108
101
  onClick={onClick}
109
- className= {clsx({
110
- "day__disabled": disabledDate,
111
- "day__selected": isSelected,
112
- "day__today": isToday,
102
+ className={clsx({
103
+ day__disabled: disabledDate,
104
+ day__selected: isSelected,
105
+ day__today: isToday,
113
106
  })}
114
107
  >
115
108
  {day}
@@ -125,7 +118,7 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
125
118
  **UseDatePickerProps**
126
119
 
127
120
  | name | type | required | default | description |
128
- |---------------------|----------------------------------|----------|---------------|-------------|
121
+ | ------------------- | -------------------------------- | -------- | ------------- | ----------- |
129
122
  | firstDayOfWeek | `FirstDayOfWeek` | | `0` | |
130
123
  | initialVisibleMonth | `Date` | | | |
131
124
  | isDateBlocked | `(date: Date) => boolean` | | `() => false` | |
@@ -139,41 +132,41 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
139
132
 
140
133
  **UseDatePickerReturnType**
141
134
 
142
- | name | type | description |
143
- |------------------------------|--------------------------------|-------------|
144
- | canGoToMonth | `(month: Date) => boolean` | |
145
- | canGoToNextMonth | `boolean` | |
146
- | canGoToNextYear | `boolean` | |
147
- | canGoToPrevMonth | `boolean` | |
148
- | canGoToPrevYear | `boolean` | |
149
- | canGoToYear | `(month: Date) => boolean` | |
150
- | goToDate | `(date: Date) => void` | |
151
- | goToNextMonths | `() => void` | |
152
- | goToNextMonthsByOneMonth | `() => void` | |
153
- | goToNextYear | `() => void` | |
154
- | goToPrevMonths | `() => void` | |
155
- | goToPrevMonthsByOneMonth | `() => void` | |
156
- | goToPrevYear | `() => void` | |
157
- | activeMonths | `MonthType[]` | |
158
- | firstDayOfWeek | `FirstDayOfWeek` | |
159
- | focusedDate | `Date \| null` | |
160
- | hoveredDate | `Date \| null` | |
161
- | isDateBlocked | `(date: Date) => boolean` | |
162
- | isDateFocused | `(date: Date) => boolean` | |
163
- | isDateHovered | `(date: Date) => boolean` | |
164
- | isDateSelected | `(date: Date) => boolean` | |
165
- | numberOfMonths | `number` | |
166
- | onDateFocus | `(date: Date) => void` | |
167
- | onDateHover | `(date: Date \| null) => void` | |
168
- | onDateSelect | `(date: Date) => void` | |
169
- | onResetDates | `() => void` | |
135
+ | name | type | description |
136
+ | ------------------------ | ------------------------------ | ----------- |
137
+ | canGoToMonth | `(month: Date) => boolean` | |
138
+ | canGoToNextMonth | `boolean` | |
139
+ | canGoToNextYear | `boolean` | |
140
+ | canGoToPrevMonth | `boolean` | |
141
+ | canGoToPrevYear | `boolean` | |
142
+ | canGoToYear | `(month: Date) => boolean` | |
143
+ | goToDate | `(date: Date) => void` | |
144
+ | goToNextMonths | `() => void` | |
145
+ | goToNextMonthsByOneMonth | `() => void` | |
146
+ | goToNextYear | `() => void` | |
147
+ | goToPrevMonths | `() => void` | |
148
+ | goToPrevMonthsByOneMonth | `() => void` | |
149
+ | goToPrevYear | `() => void` | |
150
+ | activeMonths | `MonthType[]` | |
151
+ | firstDayOfWeek | `FirstDayOfWeek` | |
152
+ | focusedDate | `Date \| null` | |
153
+ | hoveredDate | `Date \| null` | |
154
+ | isDateBlocked | `(date: Date) => boolean` | |
155
+ | isDateFocused | `(date: Date) => boolean` | |
156
+ | isDateHovered | `(date: Date) => boolean` | |
157
+ | isDateSelected | `(date: Date) => boolean` | |
158
+ | numberOfMonths | `number` | |
159
+ | onDateFocus | `(date: Date) => void` | |
160
+ | onDateHover | `(date: Date \| null) => void` | |
161
+ | onDateSelect | `(date: Date) => void` | |
162
+ | onResetDates | `() => void` | |
170
163
 
171
164
  ### useDateRangePicker()
172
165
 
173
166
  **UseDateRangePickerProps**
174
167
 
175
168
  | name | type | required | default | description |
176
- |---------------------------|-----------------------------------|----------|---------------|-------------|
169
+ | ------------------------- | --------------------------------- | -------- | ------------- | ----------- |
177
170
  | changeActiveMonthOnSelect | `boolean` | | `false` | |
178
171
  | endDate | `Date \| null` | yes | | |
179
172
  | exactMinBookingDays | `boolean` | | `false` | |
@@ -192,77 +185,77 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
192
185
 
193
186
  **UseDateRangePickerReturnType**
194
187
 
195
- | name | type | description |
196
- |------------------------------|--------------------------------|-------------|
197
- | canGoToMonth | `(month: Date) => boolean` | |
198
- | canGoToNextMonth | `boolean` | |
199
- | canGoToNextYear | `boolean` | |
200
- | canGoToPrevMonth | `boolean` | |
201
- | canGoToPrevYear | `boolean` | |
202
- | canGoToYear | `(month: Date) => boolean` | |
203
- | goToDate | `(date: Date) => void` | |
204
- | goToNextMonths | `() => void` | |
205
- | goToNextMonthsByOneMonth | `() => void` | |
206
- | goToNextYear | `() => void` | |
207
- | goToPrevMonths | `() => void` | |
208
- | goToPrevMonthsByOneMonth | `() => void` | |
209
- | goToPrevYear | `() => void` | |
210
- | activeMonths | `MonthType[]` | |
211
- | firstDayOfWeek | `FirstDayOfWeek` | |
212
- | focusedDate | `Date \| null` | |
213
- | hoveredDate | `Date \| null` | |
214
- | isDateBlocked | `(date: Date) => boolean` | |
215
- | isDateFocused | `(date: Date) => boolean` | |
216
- | isDateHovered | `(date: Date) => boolean` | |
217
- | isDateSelected | `(date: Date) => boolean` | |
218
- | isEndDate | `(date: Date) => boolean` | |
219
- | isStartDate | `(date: Date) => boolean` | |
220
- | numberOfMonths | `number` | |
221
- | onDateFocus | `(date: Date) => void` | |
222
- | onDateHover | `(date: Date \| null) => void` | |
223
- | onDateSelect | `(date: Date) => void` | |
224
- | onResetDates | `() => void` | |
188
+ | name | type | description |
189
+ | ------------------------ | ------------------------------ | ----------- |
190
+ | canGoToMonth | `(month: Date) => boolean` | |
191
+ | canGoToNextMonth | `boolean` | |
192
+ | canGoToNextYear | `boolean` | |
193
+ | canGoToPrevMonth | `boolean` | |
194
+ | canGoToPrevYear | `boolean` | |
195
+ | canGoToYear | `(month: Date) => boolean` | |
196
+ | goToDate | `(date: Date) => void` | |
197
+ | goToNextMonths | `() => void` | |
198
+ | goToNextMonthsByOneMonth | `() => void` | |
199
+ | goToNextYear | `() => void` | |
200
+ | goToPrevMonths | `() => void` | |
201
+ | goToPrevMonthsByOneMonth | `() => void` | |
202
+ | goToPrevYear | `() => void` | |
203
+ | activeMonths | `MonthType[]` | |
204
+ | firstDayOfWeek | `FirstDayOfWeek` | |
205
+ | focusedDate | `Date \| null` | |
206
+ | hoveredDate | `Date \| null` | |
207
+ | isDateBlocked | `(date: Date) => boolean` | |
208
+ | isDateFocused | `(date: Date) => boolean` | |
209
+ | isDateHovered | `(date: Date) => boolean` | |
210
+ | isDateSelected | `(date: Date) => boolean` | |
211
+ | isEndDate | `(date: Date) => boolean` | |
212
+ | isStartDate | `(date: Date) => boolean` | |
213
+ | numberOfMonths | `number` | |
214
+ | onDateFocus | `(date: Date) => void` | |
215
+ | onDateHover | `(date: Date \| null) => void` | |
216
+ | onDateSelect | `(date: Date) => void` | |
217
+ | onResetDates | `() => void` | |
225
218
 
226
219
  ### useDecade()
227
220
 
228
221
  **UseDecadeProps**
229
222
 
230
223
  | name | type | required | default | description |
231
- |-------------------|--------------------------------------|----------|---------|-------------|
224
+ | ----------------- | ------------------------------------ | -------- | ------- | ----------- |
232
225
  | decadeLabelFormat | `(start: Date, end: Date) => string` | | | |
233
226
  | year | `number` | yes | | |
234
227
  | yearLabelFormat | `'date: Date) => string` | | | |
235
228
 
236
229
  **UseDecadeReturnType**
237
230
 
238
- | name | type | description |
239
- |---------------|-------------------------------------------|-------------|
240
- | years | `{ yearLabel : string; date: Date }[]` | |
241
- | decadeLabel | `string` | |
231
+ | name | type | description |
232
+ | ----------- | ----------------------------------------- | ----------- |
233
+ | years | `{ yearLabel : string; date: Date }[]` | |
234
+ | decadeLabel | `string` | |
242
235
 
243
236
  ### useYear()
244
237
 
245
238
  **UseYearProps**
246
239
 
247
240
  | name | type | required | default | description |
248
- |------------------|--------------------------|----------|---------|-------------|
241
+ | ---------------- | ------------------------ | -------- | ------- | ----------- |
249
242
  | year | `number` | yes | | |
250
243
  | yearLabelFormat | `(date: Date) => string` | | | |
251
244
  | monthLabelFormat | `(date: Date) => string` | | | |
252
245
 
253
246
  **UseYearReturnType**
254
247
 
255
- | name | type | description |
256
- |---------------|--------------------------------------------|-------------|
257
- | months | `{ monthLabel : string; date: Date }[]` | |
258
- | yearLabel | `string` | |
248
+ | name | type | description |
249
+ | --------- | ------------------------------------------ | ----------- |
250
+ | months | `{ monthLabel : string; date: Date }[]` | |
251
+ | yearLabel | `string` | |
259
252
 
260
253
  ### useMonth()
261
254
 
262
255
  **UseMonthProps**
263
256
 
264
257
  | name | type | required | default | description |
265
- |--------------------|--------------------------|----------|---------|-------------|
258
+ | ------------------ | ------------------------ | -------- | ------- | ----------- |
266
259
  | year | `number` | yes | | |
267
260
  | month | `number` | yes | | |
268
261
  | firstDayOfWeek | `FirstDayOfWeek` | | `0` | |
@@ -273,7 +266,7 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
273
266
  **UseMonthReturnType**
274
267
 
275
268
  | name | type | description |
276
- |---------------|--------------------------------------------------------------|-------------|
269
+ | ------------- | ------------------------------------------------------------ | ----------- |
277
270
  | days | `{currentMonth: boolean; dayLabel: string; date: Date })[]` | |
278
271
  | monthLabel | `string` | |
279
272
  | weekdayLabels | `string[]` | |
@@ -283,7 +276,7 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
283
276
  **UseDayProps**
284
277
 
285
278
  | name | type | required | default | description |
286
- |------------------|---------------------------|----------|---------|-------------|
279
+ | ---------------- | ------------------------- | -------- | ------- | ----------- |
287
280
  | date | `Date` | yes | | |
288
281
  | dayRef | `RefObject` | | | |
289
282
  | focusedDate | `Date \| null` | yes | | |
@@ -300,7 +293,7 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
300
293
  **UseDayReturnType**
301
294
 
302
295
  | name | type | description |
303
- |--------------------|------------------------------|-------------|
296
+ | ------------------ | ---------------------------- | ----------- |
304
297
  | disabledDate | `boolean` | |
305
298
  | isFirstDisabled | `boolean` | |
306
299
  | isLastDisabled | `boolean` | |
package/jest.dst.config.js CHANGED
@@ -7,7 +7,7 @@
7
7
  * Tests are expected to FAIL until the DateString refactor (Tasks 2–10) is complete.
8
8
  */
9
9
 
10
- const babelPresets = require("../../jest.babel-presets.js");
10
+ const swcOptions = require("../../jest.swc-options.js");
11
11
 
12
12
  /** @type {import('jest').Config} */
13
13
  module.exports = {
@@ -17,7 +17,10 @@ module.exports = {
17
17
  globalSetup: "<rootDir>/jest.dst.global-setup.js",
18
18
  rootDir: ".",
19
19
  testMatch: ["<rootDir>/utils/dst-robustness.test.ts"],
20
+ // Kept in the same shape as root jest.config.js — see jest.swc-options.js for why the .jsx parser
21
+ // is explicit while .ts/.tsx is inferred.
20
22
  transform: {
21
- "\\.[jt]sx?$": ["babel-jest", { presets: babelPresets, babelrc: false, configFile: false }],
23
+ "\\.tsx?$": ["@swc/jest", swcOptions()],
24
+ "\\.jsx?$": ["@swc/jest", swcOptions({ syntax: "ecmascript", jsx: true })],
22
25
  },
23
26
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/datepicker",
3
- "version": "11.124.0",
3
+ "version": "11.126.0",
4
4
  "description": "A set of React hooks to create an awesome datepicker.",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -26,8 +26,8 @@
26
26
  },
27
27
  "homepage": "https://gitlab.com/uxf-npm/datepicker#readme",
28
28
  "peerDependencies": {
29
- "@uxf/core": "11.124.0",
30
- "@uxf/core-react": "11.124.0",
29
+ "@uxf/core": "11.126.0",
30
+ "@uxf/core-react": "11.126.0",
31
31
  "dayjs": "^1.11.21",
32
32
  "react": ">=18.2.0",
33
33
  "react-dom": ">=18.2.0"
@@ -35,8 +35,8 @@
35
35
  "devDependencies": {
36
36
  "@types/react": "18.3.31",
37
37
  "@types/react-dom": "18.3.7",
38
- "@uxf/core": "11.124.0",
39
- "@uxf/core-react": "11.124.0",
38
+ "@uxf/core": "11.126.0",
39
+ "@uxf/core-react": "11.126.0",
40
40
  "dayjs": "^1.11.21",
41
41
  "react": "18.3.1",
42
42
  "react-dom": "18.3.1"
package/utils/get-months.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export interface GetMonthsProps {
2
2
  year: number;
3
- monthLabelFormat?(date: Date): string;
3
+ monthLabelFormat?: (date: Date) => string;
4
4
  }
5
5
  export type CalendarMonth = {
6
6
  monthLabel: string;
package/utils/get-years.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export interface GetYearsProps {
2
2
  startYear: Date;
3
3
  endYear: Date;
4
- yearLabelFormat?(date: Date): string;
4
+ yearLabelFormat?: (date: Date) => string;
5
5
  }
6
6
  export type CalendarYear = {
7
7
  yearLabel: string;