@toptal/picasso-lab 14.0.1-alpha-FX-2298-remove-fontSize-from-link.2604 → 14.0.1-alpha-SPT-2161-human-readable-dates-parsing-poc-1.2610
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/DatePicker/DatePicker.d.ts +3 -2
- package/DatePicker/DatePicker.js +36 -26
- package/DatePicker/DatePicker.js.map +1 -1
- package/DatePicker/index.d.ts +1 -1
- package/DatePicker/types.d.ts +9 -4
- package/DatePicker/utils.d.ts +3 -2
- package/DatePicker/utils.js +19 -4
- package/DatePicker/utils.js.map +1 -1
- package/index.d.ts +1 -1
- package/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BaseProps, InputProps } from '@toptal/picasso';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { DayProps } from '../Calendar';
|
|
4
|
-
import { DatePickerValue,
|
|
4
|
+
import { DatePickerValue, DatePickerInputCustomValueParser } from './types';
|
|
5
5
|
export interface Props extends BaseProps, Omit<InputProps, 'value' | 'onSelect' | 'type' | 'multiline' | 'rows' | 'defaultValue' | 'onChange'> {
|
|
6
6
|
/** Date that will be selected in `DatePicker` */
|
|
7
7
|
value?: DatePickerValue;
|
|
@@ -39,7 +39,8 @@ export interface Props extends BaseProps, Omit<InputProps, 'value' | 'onSelect'
|
|
|
39
39
|
weekStartsOn?: number;
|
|
40
40
|
/** IANA timezone to display and edit date(s) */
|
|
41
41
|
timezone?: string;
|
|
42
|
-
|
|
42
|
+
/** Invoked on `onBlur` event of `DatePicker`'s input. If method failed to parse a value, it must return undefined. Used to process custom input value, like, human-readable dates */
|
|
43
|
+
parseInputValue?: DatePickerInputCustomValueParser;
|
|
43
44
|
}
|
|
44
45
|
export declare const DatePicker: {
|
|
45
46
|
(props: Props): JSX.Element;
|
package/DatePicker/DatePicker.js
CHANGED
|
@@ -17,23 +17,26 @@ import { Calendar16 } from '@toptal/picasso/Icon';
|
|
|
17
17
|
import Popper from '@toptal/picasso/Popper';
|
|
18
18
|
import { noop } from '@toptal/picasso/utils';
|
|
19
19
|
import formatDate from 'date-fns/format';
|
|
20
|
-
import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
|
|
20
|
+
import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
21
21
|
import Calendar from '../Calendar';
|
|
22
22
|
import { DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT, DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT } from './constants';
|
|
23
23
|
import styles from './styles';
|
|
24
|
-
import { formatDateRange, datePickerParseDateString, timezoneConvert, timezoneFormat,
|
|
24
|
+
import { formatDateRange, datePickerParseDateString, timezoneConvert, timezoneFormat, getStartOfTheDayDate } from './utils';
|
|
25
25
|
const EMPTY_INPUT_VALUE = '';
|
|
26
26
|
const useStyles = makeStyles(styles, {
|
|
27
27
|
name: 'PicassoDatePicker'
|
|
28
28
|
});
|
|
29
29
|
export const DatePicker = (props) => {
|
|
30
|
-
const { range, hideOnSelect, displayDateFormat = DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT, editDateFormat = DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT, onBlur = noop, onChange, value, width, icon, minDate, maxDate, disabledIntervals, popperContainer, renderDay, weekStartsOn, timezone, size, parseInputValue
|
|
30
|
+
const { range, hideOnSelect, displayDateFormat = DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT, editDateFormat = DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT, onBlur = noop, onChange, value, width, icon, minDate, maxDate, disabledIntervals, popperContainer, renderDay, weekStartsOn, timezone, size, parseInputValue } = props, rest = __rest(props, ["range", "hideOnSelect", "displayDateFormat", "editDateFormat", "onBlur", "onChange", "value", "width", "icon", "minDate", "maxDate", "disabledIntervals", "popperContainer", "renderDay", "weekStartsOn", "timezone", "size", "parseInputValue"]);
|
|
31
31
|
const classes = useStyles();
|
|
32
32
|
const inputProps = rest;
|
|
33
33
|
const [calendarIsShown, setCalendarIsShown] = useState(false);
|
|
34
34
|
const [isInputFocused, setIsInputFocused] = useState(false);
|
|
35
35
|
const [inputValue, setInputValue] = useState(EMPTY_INPUT_VALUE);
|
|
36
36
|
const [calendarValue, setCalendarValue] = useState(null);
|
|
37
|
+
const [normalizedMinDate, normalizedMaxDate] = useMemo(() => {
|
|
38
|
+
return [getStartOfTheDayDate(minDate), getStartOfTheDayDate(maxDate)];
|
|
39
|
+
}, [minDate, maxDate]);
|
|
37
40
|
const hideCalendar = () => setCalendarIsShown(false);
|
|
38
41
|
const showCalendar = () => setCalendarIsShown(true);
|
|
39
42
|
const inputRef = useRef(null);
|
|
@@ -42,29 +45,36 @@ export const DatePicker = (props) => {
|
|
|
42
45
|
const inputWrapperRef = useRef(null);
|
|
43
46
|
// Format the input based on its 'focus' state
|
|
44
47
|
const formatInputValue = useCallback((valueToFormat) => {
|
|
45
|
-
if (!isValidDateValue(valueToFormat)) {
|
|
46
|
-
return valueToFormat;
|
|
47
|
-
}
|
|
48
48
|
return Array.isArray(valueToFormat)
|
|
49
49
|
? formatDateRange(valueToFormat, displayDateFormat)
|
|
50
50
|
: formatDate(valueToFormat, isInputFocused ? editDateFormat : displayDateFormat);
|
|
51
51
|
}, [isInputFocused, editDateFormat, displayDateFormat]);
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
const updateInputValue = useCallback(({ preventUpdateOnFocus }) => {
|
|
53
|
+
if (preventUpdateOnFocus && isInputFocused) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
54
56
|
setInputValue(() => {
|
|
55
57
|
if (!value) {
|
|
56
58
|
return EMPTY_INPUT_VALUE;
|
|
57
59
|
}
|
|
58
|
-
if (!isValidDateValue(value)) {
|
|
59
|
-
return value;
|
|
60
|
-
}
|
|
61
60
|
return formatInputValue(timezoneConvert(value, timezone));
|
|
62
61
|
});
|
|
63
|
-
}, [value, timezone, formatInputValue]);
|
|
62
|
+
}, [value, isInputFocused, timezone, formatInputValue]);
|
|
63
|
+
// Keep the input value in sync with date value update
|
|
64
|
+
// Updating on incoming date value or timezone change
|
|
65
|
+
// Should not update when input is focused to prevent overriding it's value
|
|
66
|
+
useLayoutEffect(() => {
|
|
67
|
+
updateInputValue({ preventUpdateOnFocus: true });
|
|
68
|
+
}, [value, timezone]);
|
|
69
|
+
// Keep the input format in sync with its 'focus' state
|
|
70
|
+
// Updating on input focus state change
|
|
71
|
+
useLayoutEffect(() => {
|
|
72
|
+
updateInputValue({ preventUpdateOnFocus: false });
|
|
73
|
+
}, [isInputFocused]);
|
|
64
74
|
// Keep the calendar in sync with the input value
|
|
65
75
|
useLayoutEffect(() => {
|
|
66
76
|
setCalendarValue(() => {
|
|
67
|
-
if (!value
|
|
77
|
+
if (!value) {
|
|
68
78
|
return null;
|
|
69
79
|
}
|
|
70
80
|
return timezoneConvert(value, timezone);
|
|
@@ -90,21 +100,20 @@ export const DatePicker = (props) => {
|
|
|
90
100
|
return;
|
|
91
101
|
}
|
|
92
102
|
const nextValue = e.target.value;
|
|
93
|
-
// TODO: add char filtering (only number , `-` or ` ` allowed)
|
|
103
|
+
// TODO: add char filtering (only number , `-` or ` ` allowed) in case if `parseInputValue` is not set
|
|
94
104
|
setInputValue(nextValue);
|
|
95
105
|
if (!nextValue) {
|
|
96
|
-
onChange(null);
|
|
106
|
+
return onChange(null);
|
|
97
107
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
+
const parsedInputDate = datePickerParseDateString(nextValue, {
|
|
109
|
+
customParser: parseInputValue,
|
|
110
|
+
dateFormat: editDateFormat,
|
|
111
|
+
timezone,
|
|
112
|
+
minDate: normalizedMinDate,
|
|
113
|
+
maxDate: normalizedMaxDate
|
|
114
|
+
});
|
|
115
|
+
if (parsedInputDate) {
|
|
116
|
+
onChange(parsedInputDate);
|
|
108
117
|
}
|
|
109
118
|
};
|
|
110
119
|
const focus = () => {
|
|
@@ -117,6 +126,7 @@ export const DatePicker = (props) => {
|
|
|
117
126
|
? nextValue.map((date) => timezoneFormat(date, timezone))
|
|
118
127
|
: timezoneFormat(nextValue, timezone);
|
|
119
128
|
onChange(nextTimezoneValue);
|
|
129
|
+
setInputValue(formatInputValue(nextValue));
|
|
120
130
|
setCalendarValue(nextTimezoneValue);
|
|
121
131
|
if (hideOnSelect) {
|
|
122
132
|
focus();
|
|
@@ -164,7 +174,7 @@ export const DatePicker = (props) => {
|
|
|
164
174
|
React.createElement(Container, { inline: width !== 'full', ref: inputWrapperRef },
|
|
165
175
|
React.createElement(Input, Object.assign({}, inputProps, { ref: inputRef, onKeyDown: handleInputKeydown, onClick: handleFocusOrClick, onFocus: handleFocusOrClick, onBlur: handleBlur, value: inputValue, onChange: handleInputChange, size: size, startAdornment: startAdornment, width: width }))),
|
|
166
176
|
inputWrapperRef.current && (React.createElement(Popper, { placement: 'bottom-start', open: calendarIsShown, anchorEl: inputWrapperRef.current, autoWidth: false, enableCompactMode: true, container: popperContainer, ref: popperRef },
|
|
167
|
-
React.createElement(Calendar, { "data-testid": 'calendar', ref: calendarRef, range: range, value: calendarValue !== null && calendarValue !== void 0 ? calendarValue : undefined, minDate:
|
|
177
|
+
React.createElement(Calendar, { "data-testid": 'calendar', ref: calendarRef, range: range, value: calendarValue !== null && calendarValue !== void 0 ? calendarValue : undefined, minDate: normalizedMinDate, maxDate: normalizedMaxDate, disabledIntervals: disabledIntervals, renderDay: renderDay, onChange: handleCalendarChange, onBlur: handleBlur, className: classes.calendar, weekStartsOn: weekStartsOn })))));
|
|
168
178
|
};
|
|
169
179
|
DatePicker.defaultProps = {
|
|
170
180
|
range: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../src/DatePicker/DatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,sDAAsD;AACtD,+CAA+C,CAAC,mDAAmD;AACnG,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAEL,SAAS,EACT,KAAK,EACL,cAAc,EAEf,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5C,OAAO,UAAU,MAAM,iBAAiB,CAAA;AAExC,OAAO,KAAK,EAAE,EAGZ,WAAW,EACX,eAAe,EACf,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAA;AAEd,OAAO,QAIN,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,uCAAuC,EACvC,oCAAoC,EACrC,MAAM,aAAa,CAAA;AACpB,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,OAAO,EACL,eAAe,EACf,yBAAyB,EACzB,eAAe,EACf,cAAc,EACd,
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../src/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
|
package/DatePicker/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default } from './DatePicker';
|
|
2
2
|
export type { Props as DatePickerProps } from './DatePicker';
|
|
3
|
-
export type { DatePickerValue,
|
|
3
|
+
export type { DatePickerValue, DatePickerInputCustomValueParser, DatePickerInputCustomValueParserParameters } from './types';
|
|
4
4
|
export { datePickerParseDateString } from './utils';
|
|
5
5
|
export { DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT, DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT } from './constants';
|
package/DatePicker/types.d.ts
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { DateOrDateRangeType } from '../Calendar';
|
|
2
|
-
export declare type DatePickerValue = DateOrDateRangeType |
|
|
3
|
-
export declare type
|
|
2
|
+
export declare type DatePickerValue = DateOrDateRangeType | null;
|
|
3
|
+
export declare type DatePickerInputValueParserParameters = {
|
|
4
|
+
customParser?: DatePickerInputCustomValueParser;
|
|
4
5
|
dateFormat: string;
|
|
5
|
-
timezone?: string;
|
|
6
6
|
minDate?: Date;
|
|
7
7
|
maxDate?: Date;
|
|
8
|
-
|
|
8
|
+
timezone?: string;
|
|
9
|
+
};
|
|
10
|
+
export declare type DatePickerInputCustomValueParserParameters = {
|
|
11
|
+
timezone?: string;
|
|
12
|
+
};
|
|
13
|
+
export declare type DatePickerInputCustomValueParser = (value: string, params: DatePickerInputCustomValueParserParameters) => Date | null | undefined;
|
package/DatePicker/utils.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DatePickerInputValueParserParameters } from './types';
|
|
2
2
|
import { DateOrDateRangeType, DateRangeType } from '../Calendar';
|
|
3
3
|
export declare const timezoneConvert: (date: DateOrDateRangeType, timeZone?: string | undefined) => DateOrDateRangeType;
|
|
4
4
|
export declare const timezoneFormat: (date: Date, timeZone?: string | undefined) => Date;
|
|
@@ -7,5 +7,6 @@ export declare const isDateValid: (date: string, pattern: string) => boolean;
|
|
|
7
7
|
export declare const isDateAfter: (date: Date, dateToCompare: Date) => boolean;
|
|
8
8
|
export declare const isDateBefore: (date: Date, dateToCompare: Date) => boolean;
|
|
9
9
|
export declare const isDateWithinInterval: (date: Date, minDate: Date | undefined, maxDate: Date | undefined) => boolean;
|
|
10
|
-
export declare const datePickerParseDateString:
|
|
10
|
+
export declare const datePickerParseDateString: (value: string, { customParser, dateFormat, timezone, minDate, maxDate }: DatePickerInputValueParserParameters) => Date | undefined;
|
|
11
11
|
export declare const isValidDateValue: (dateValue: DateOrDateRangeType | string) => dateValue is DateOrDateRangeType;
|
|
12
|
+
export declare const getStartOfTheDayDate: (date?: Date | undefined) => Date | undefined;
|
package/DatePicker/utils.js
CHANGED
|
@@ -5,7 +5,7 @@ import isWithinInterval from 'date-fns/isWithinInterval';
|
|
|
5
5
|
import isEqual from 'date-fns/isEqual';
|
|
6
6
|
import isBefore from 'date-fns/isBefore';
|
|
7
7
|
import isAfter from 'date-fns/isAfter';
|
|
8
|
-
import { utcToZonedTime, format as tzFormat } from 'date-fns-tz';
|
|
8
|
+
import { utcToZonedTime, format as tzFormat, toDate } from 'date-fns-tz';
|
|
9
9
|
// Convert date to given timezone. If timezone is undefined, return given date as is.
|
|
10
10
|
export const timezoneConvert = (date, timeZone) => {
|
|
11
11
|
const convert = (dateToConvert) => {
|
|
@@ -72,11 +72,17 @@ export const isDateWithinInterval = (date, minDate, maxDate) => {
|
|
|
72
72
|
}
|
|
73
73
|
return false;
|
|
74
74
|
};
|
|
75
|
-
export const datePickerParseDateString = (value, { dateFormat, timezone, minDate, maxDate }) => {
|
|
76
|
-
if (!
|
|
75
|
+
export const datePickerParseDateString = (value, { customParser, dateFormat, timezone, minDate, maxDate }) => {
|
|
76
|
+
if (!value) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
const isValidDateString = isDateValid(value, dateFormat);
|
|
80
|
+
const parsedNextValue = customParser && !isValidDateString
|
|
81
|
+
? customParser(value, { timezone })
|
|
82
|
+
: parse(value, dateFormat, new Date());
|
|
83
|
+
if (!parsedNextValue || !isValid(parsedNextValue)) {
|
|
77
84
|
return;
|
|
78
85
|
}
|
|
79
|
-
const parsedNextValue = parse(value, dateFormat, new Date());
|
|
80
86
|
const nextTimezoneValue = timezoneFormat(parsedNextValue, timezone);
|
|
81
87
|
if (!isDateWithinInterval(nextTimezoneValue, minDate, maxDate)) {
|
|
82
88
|
return;
|
|
@@ -84,4 +90,13 @@ export const datePickerParseDateString = (value, { dateFormat, timezone, minDate
|
|
|
84
90
|
return nextTimezoneValue;
|
|
85
91
|
};
|
|
86
92
|
export const isValidDateValue = (dateValue) => typeof dateValue !== 'string';
|
|
93
|
+
export const getStartOfTheDayDate = (date) => {
|
|
94
|
+
if (!date) {
|
|
95
|
+
return date;
|
|
96
|
+
}
|
|
97
|
+
// to prevent mutation of the original date
|
|
98
|
+
const clonedDate = toDate(date);
|
|
99
|
+
clonedDate.setHours(0, 0, 0, 0);
|
|
100
|
+
return clonedDate;
|
|
101
|
+
};
|
|
87
102
|
//# sourceMappingURL=utils.js.map
|
package/DatePicker/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/DatePicker/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,OAAO,MAAM,kBAAkB,CAAA;AACtC,OAAO,UAAU,MAAM,iBAAiB,CAAA;AACxC,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AACxD,OAAO,OAAO,MAAM,kBAAkB,CAAA;AACtC,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AACxC,OAAO,OAAO,MAAM,kBAAkB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/DatePicker/utils.ts"],"names":[],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as Calendar } from './Calendar';
|
|
2
2
|
export type { DateOrDateRangeType } from './Calendar';
|
|
3
3
|
export { default as DatePicker, datePickerParseDateString, DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT, DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT } from './DatePicker';
|
|
4
|
-
export type { DatePickerValue,
|
|
4
|
+
export type { DatePickerValue, DatePickerInputCustomValueParser, DatePickerInputCustomValueParserParameters, DatePickerProps } from './DatePicker';
|
|
5
5
|
export { default as Drawer } from './Drawer';
|
|
6
6
|
export type { DrawerProps } from './Drawer';
|
|
7
7
|
export { default as Dropzone, ErrorCode as DropzoneErrorCode } from './Dropzone';
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,yBAAyB,EACzB,uCAAuC,EACvC,oCAAoC,EACrC,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,yBAAyB,EACzB,uCAAuC,EACvC,oCAAoC,EACrC,MAAM,cAAc,CAAA;AAOrB,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAE5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,SAAS,IAAI,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAQhF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE1D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AAExC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEhD,qEAAqE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-lab",
|
|
3
|
-
"version": "14.0.1-alpha-
|
|
3
|
+
"version": "14.0.1-alpha-SPT-2161-human-readable-dates-parsing-poc-1.2610+ccecf6b5",
|
|
4
4
|
"description": "Lab components of Picasso",
|
|
5
5
|
"author": "Toptal",
|
|
6
6
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-lab#readme",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"react-dom": "^16.12.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@toptal/picasso-provider": "0.4.1-alpha-
|
|
34
|
+
"@toptal/picasso-provider": "0.4.1-alpha-SPT-2161-human-readable-dates-parsing-poc-1.2610+ccecf6b5",
|
|
35
35
|
"ap-style-title-case": "^1.1.2",
|
|
36
36
|
"classnames": "^2.3.1",
|
|
37
37
|
"date-fns": "^2.9.0",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"**/styles.ts",
|
|
52
52
|
"**/styles.js"
|
|
53
53
|
],
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "ccecf6b5b64b98212bf261f29c4e01c0724dda89"
|
|
55
55
|
}
|