@autoguru/overdrive 4.49.0 → 4.51.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.
- package/dist/components/Box/useBox/useBox.d.ts +1 -1
- package/dist/components/Calendar/Calendar.css.d.ts.map +1 -1
- package/dist/components/Calendar/Calendar.css.js +4 -4
- package/dist/components/Calendar/Calendar.d.ts +3 -10
- package/dist/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/components/Calendar/Calendar.js +4 -11
- package/dist/components/DatePicker/DatePicker.d.ts +10 -4
- package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.js +36 -63
- package/dist/components/DatePicker/hooks/useCalendarPopover.d.ts +38 -0
- package/dist/components/DatePicker/hooks/useCalendarPopover.d.ts.map +1 -0
- package/dist/components/DatePicker/hooks/useCalendarPopover.js +44 -0
- package/dist/components/DateTimeField/DateField/DateField.d.ts +40 -0
- package/dist/components/DateTimeField/DateField/DateField.d.ts.map +1 -0
- package/dist/components/DateTimeField/DateField/DateField.js +110 -0
- package/dist/components/DateTimeField/DateTimeField.css.d.ts +21 -0
- package/dist/components/DateTimeField/DateTimeField.css.d.ts.map +1 -0
- package/dist/components/DateTimeField/DateTimeField.css.js +127 -0
- package/dist/components/DateTimeField/DateTimeField.d.ts +116 -0
- package/dist/components/DateTimeField/DateTimeField.d.ts.map +1 -0
- package/dist/components/DateTimeField/DateTimeField.js +107 -0
- package/dist/components/DateTimeField/TimeField/TimeField.d.ts +26 -0
- package/dist/components/DateTimeField/TimeField/TimeField.d.ts.map +1 -0
- package/dist/components/DateTimeField/TimeField/TimeField.js +99 -0
- package/dist/components/DateTimeField/default.d.ts +2 -0
- package/dist/components/DateTimeField/default.d.ts.map +1 -0
- package/dist/components/DateTimeField/default.js +3 -0
- package/dist/components/DateTimeField/index.d.ts +5 -0
- package/dist/components/DateTimeField/index.d.ts.map +1 -0
- package/dist/components/DateTimeField/index.js +5 -0
- package/dist/components/DateTimeField/types.d.ts +34 -0
- package/dist/components/DateTimeField/types.d.ts.map +1 -0
- package/dist/components/DateTimeField/types.js +3 -0
- package/dist/components/DropDown/DropDown.d.ts +1 -0
- package/dist/components/DropDown/DropDown.d.ts.map +1 -1
- package/dist/components/DropDown/DropDown.js +23 -7
- package/dist/components/Popover/Popover.d.ts +2 -2
- package/dist/components/Popover/Popover.d.ts.map +1 -1
- package/dist/components/Popover/Popover.js +2 -2
- package/dist/components/Popover/PopoverTrigger.d.ts +9 -6
- package/dist/components/Popover/PopoverTrigger.d.ts.map +1 -1
- package/dist/components/Popover/PopoverTrigger.js +6 -3
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/styles/selectors.d.ts +1 -0
- package/dist/styles/selectors.d.ts.map +1 -1
- package/dist/styles/selectors.js +1 -0
- package/dist/utils/dateFormat.d.ts +5 -4
- package/dist/utils/dateFormat.d.ts.map +1 -1
- package/dist/utils/dateFormat.js +9 -9
- package/dist/utils/responsiveStyle.d.ts +1 -1
- package/dist/utils/responsiveStyle.d.ts.map +1 -1
- package/package.json +42 -42
- package/dist/components/DateTimePicker/DateTimePicker.css.d.ts +0 -4
- package/dist/components/DateTimePicker/DateTimePicker.css.d.ts.map +0 -1
- package/dist/components/DateTimePicker/DateTimePicker.css.js +0 -30
- package/dist/components/DateTimePicker/DateTimePicker.d.ts +0 -68
- package/dist/components/DateTimePicker/DateTimePicker.d.ts.map +0 -1
- package/dist/components/DateTimePicker/DateTimePicker.js +0 -130
- package/dist/components/DateTimePicker/default.d.ts +0 -2
- package/dist/components/DateTimePicker/default.d.ts.map +0 -1
- package/dist/components/DateTimePicker/default.js +0 -3
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
-
import { getLocalTimeZone, today } from '@internationalized/date';
|
|
7
|
-
import React, { useRef } from 'react';
|
|
8
|
-
import { useId } from 'react-aria';
|
|
9
|
-
import { sprinkles } from "../../styles/sprinkles.css.js";
|
|
10
|
-
import { dataAttrs } from "../../utils/dataAttrs.js";
|
|
11
|
-
import { Calendar } from "../Calendar/index.js";
|
|
12
|
-
import { Heading } from "../Heading/index.js";
|
|
13
|
-
import { OptionGrid } from "../OptionGrid/OptionGrid.js";
|
|
14
|
-
import { layoutStyle, queryContainerStyle } from "./DateTimePicker.css.js";
|
|
15
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
-
const defaultEnglish = {
|
|
17
|
-
dateLabel: 'Date',
|
|
18
|
-
timeLabel: 'Time',
|
|
19
|
-
nextLabel: 'Next month',
|
|
20
|
-
prevLabel: 'Previous month'
|
|
21
|
-
};
|
|
22
|
-
// const dateTextPunctuationEN = (text: string) =>
|
|
23
|
-
// text
|
|
24
|
-
// .split(' ')
|
|
25
|
-
// .map((word, idx) => (idx === 0 ? `${word},` : word))
|
|
26
|
-
// .join(' ');
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* DateTimePicker component for selecting a date and time. The primary use case is for selecting a date and time for
|
|
30
|
-
* the vehicle to be left at the place of service, not scheduling the time of the service itself. Some suppliers
|
|
31
|
-
* may need the option to book a specficic time based on their availability which could require enahcement.
|
|
32
|
-
*
|
|
33
|
-
* For all date/time handling `@internationalized/date` is expected by react-aria. Presently only the Gregorian
|
|
34
|
-
* calendar is imported for use in order to minimise bundle size. It is recommended to use the the DateTimePicker
|
|
35
|
-
* uncontrolled.
|
|
36
|
-
*
|
|
37
|
-
* This component implements the react-aria `useCalendar` hook and supports controlled state as well
|
|
38
|
-
* ([docs](https://react-spectrum.adobe.com/react-aria/useCalendar.html))
|
|
39
|
-
*/
|
|
40
|
-
export const DateTimePicker = ({
|
|
41
|
-
allowPastDate = false,
|
|
42
|
-
calendarOptions,
|
|
43
|
-
lang,
|
|
44
|
-
onChange,
|
|
45
|
-
timeOptions,
|
|
46
|
-
title,
|
|
47
|
-
testId
|
|
48
|
-
}) => {
|
|
49
|
-
var _lang$dateLabel, _lang$timeLabel;
|
|
50
|
-
const selectedDate = useRef(today(getLocalTimeZone()));
|
|
51
|
-
const selectedTimeOption = useRef(null);
|
|
52
|
-
const handleChange = () => {
|
|
53
|
-
var _selectedTimeOption$c;
|
|
54
|
-
if (selectedDate.current && (_selectedTimeOption$c = selectedTimeOption.current) !== null && _selectedTimeOption$c !== void 0 && _selectedTimeOption$c.length) {
|
|
55
|
-
onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
56
|
-
date: selectedDate.current,
|
|
57
|
-
timeOption: selectedTimeOption.current
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
const handleDateChange = value => {
|
|
62
|
-
selectedDate.current = value;
|
|
63
|
-
handleChange();
|
|
64
|
-
};
|
|
65
|
-
const handleTimeChange = keys => {
|
|
66
|
-
if (keys === 'all') return;
|
|
67
|
-
// we expect only a single value for time picker
|
|
68
|
-
const time = keys.values().next().value;
|
|
69
|
-
selectedTimeOption.current = time;
|
|
70
|
-
handleChange();
|
|
71
|
-
};
|
|
72
|
-
const optionGridComponentProps = _objectSpread({
|
|
73
|
-
columns: '3',
|
|
74
|
-
onSelectionChange: handleTimeChange,
|
|
75
|
-
indicator: 'none',
|
|
76
|
-
selectionMode: 'single',
|
|
77
|
-
disallowEmptySelection: true
|
|
78
|
-
}, timeOptions);
|
|
79
|
-
const titleId = useId();
|
|
80
|
-
|
|
81
|
-
// Create calendar lang props from our lang props
|
|
82
|
-
const calendarLang = lang ? {
|
|
83
|
-
nextLabel: lang.nextLabel,
|
|
84
|
-
prevLabel: lang.prevLabel
|
|
85
|
-
} : undefined;
|
|
86
|
-
return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
|
|
87
|
-
role: "group",
|
|
88
|
-
"aria-labelledby": titleId,
|
|
89
|
-
className: queryContainerStyle
|
|
90
|
-
}, dataAttrs({
|
|
91
|
-
testid: testId
|
|
92
|
-
})), {}, {
|
|
93
|
-
children: [title && /*#__PURE__*/_jsx(Heading, {
|
|
94
|
-
as: "h2",
|
|
95
|
-
id: titleId,
|
|
96
|
-
mb: "6",
|
|
97
|
-
size: "8",
|
|
98
|
-
children: title
|
|
99
|
-
}), /*#__PURE__*/_jsxs("div", {
|
|
100
|
-
className: layoutStyle,
|
|
101
|
-
children: [/*#__PURE__*/_jsxs("div", {
|
|
102
|
-
className: sprinkles({
|
|
103
|
-
flexShrink: '0'
|
|
104
|
-
}),
|
|
105
|
-
children: [/*#__PURE__*/_jsx(Heading, {
|
|
106
|
-
as: "h3",
|
|
107
|
-
mb: "4",
|
|
108
|
-
size: "6",
|
|
109
|
-
children: (_lang$dateLabel = lang === null || lang === void 0 ? void 0 : lang.dateLabel) !== null && _lang$dateLabel !== void 0 ? _lang$dateLabel : defaultEnglish.dateLabel
|
|
110
|
-
}), /*#__PURE__*/_jsx(Calendar, {
|
|
111
|
-
allowPastDate: allowPastDate,
|
|
112
|
-
calendarOptions: calendarOptions,
|
|
113
|
-
lang: calendarLang,
|
|
114
|
-
onChange: handleDateChange
|
|
115
|
-
})]
|
|
116
|
-
}), /*#__PURE__*/_jsxs("div", {
|
|
117
|
-
className: sprinkles({
|
|
118
|
-
flexGrow: '1'
|
|
119
|
-
}),
|
|
120
|
-
children: [/*#__PURE__*/_jsx(Heading, {
|
|
121
|
-
as: "h3",
|
|
122
|
-
mb: "4",
|
|
123
|
-
size: "6",
|
|
124
|
-
children: (_lang$timeLabel = lang === null || lang === void 0 ? void 0 : lang.timeLabel) !== null && _lang$timeLabel !== void 0 ? _lang$timeLabel : defaultEnglish.timeLabel
|
|
125
|
-
}), /*#__PURE__*/_jsx(OptionGrid, _objectSpread({}, optionGridComponentProps))]
|
|
126
|
-
})]
|
|
127
|
-
})]
|
|
128
|
-
}));
|
|
129
|
-
};
|
|
130
|
-
DateTimePicker.displayName = 'DateTimePicker';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../lib/components/DateTimePicker/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC"}
|