@atlaskit/datetime-picker 15.12.2 → 15.13.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/CHANGELOG.md +9 -0
- package/dist/cjs/components/date-picker.js +639 -7
- package/dist/cjs/components/date-time-picker.js +379 -9
- package/dist/cjs/components/time-picker.js +2 -2
- package/dist/es2019/components/date-picker.js +570 -5
- package/dist/es2019/components/date-time-picker.js +347 -6
- package/dist/es2019/components/time-picker.js +2 -2
- package/dist/esm/components/date-picker.js +637 -7
- package/dist/esm/components/date-time-picker.js +375 -8
- package/dist/esm/components/time-picker.js +2 -2
- package/dist/types/components/date-picker.d.ts +18 -19
- package/dist/types/components/date-time-picker.d.ts +14 -31
- package/dist/types-ts4.5/components/date-picker.d.ts +18 -19
- package/dist/types-ts4.5/components/date-time-picker.d.ts +14 -31
- package/package.json +5 -8
- package/dist/cjs/components/date-picker-class.js +0 -685
- package/dist/cjs/components/date-picker-fc.js +0 -639
- package/dist/cjs/components/date-time-picker-class.js +0 -436
- package/dist/cjs/components/date-time-picker-fc.js +0 -394
- package/dist/cjs/internal/ff-component.js +0 -58
- package/dist/es2019/components/date-picker-class.js +0 -649
- package/dist/es2019/components/date-picker-fc.js +0 -563
- package/dist/es2019/components/date-time-picker-class.js +0 -400
- package/dist/es2019/components/date-time-picker-fc.js +0 -354
- package/dist/es2019/internal/ff-component.js +0 -47
- package/dist/esm/components/date-picker-class.js +0 -680
- package/dist/esm/components/date-picker-fc.js +0 -630
- package/dist/esm/components/date-time-picker-class.js +0 -434
- package/dist/esm/components/date-time-picker-fc.js +0 -384
- package/dist/esm/internal/ff-component.js +0 -49
- package/dist/types/components/date-picker-class.d.ts +0 -110
- package/dist/types/components/date-picker-fc.d.ts +0 -20
- package/dist/types/components/date-time-picker-class.d.ts +0 -85
- package/dist/types/components/date-time-picker-fc.d.ts +0 -15
- package/dist/types/internal/ff-component.d.ts +0 -34
- package/dist/types-ts4.5/components/date-picker-class.d.ts +0 -110
- package/dist/types-ts4.5/components/date-picker-fc.d.ts +0 -20
- package/dist/types-ts4.5/components/date-time-picker-class.d.ts +0 -85
- package/dist/types-ts4.5/components/date-time-picker-fc.d.ts +0 -15
- package/dist/types-ts4.5/internal/ff-component.d.ts +0 -34
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import React, { type ComponentType, type RefAttributes } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Gets all available ref types from two prop sets and returns
|
|
4
|
-
* them in a ref prop
|
|
5
|
-
*
|
|
6
|
-
* @example
|
|
7
|
-
* ```
|
|
8
|
-
* type P1 = { ref: Ref(HTMLDivElement), ... };
|
|
9
|
-
* type P2 = { ref: Ref(HTMLSpanElement), ... };
|
|
10
|
-
*
|
|
11
|
-
* GetRefAttributes(P1, P2) // {ref: Ref(HTMLDivElement | HTMLSpanElement)}
|
|
12
|
-
* ```
|
|
13
|
-
*/
|
|
14
|
-
type GetRefAttributes<A, B> = A extends RefAttributes<infer RefA> ? B extends RefAttributes<infer RefB> ? RefAttributes<RefA | RefB> : RefAttributes<RefA> : B extends RefAttributes<infer OnlyRefB> ? RefAttributes<OnlyRefB> : unknown;
|
|
15
|
-
/**
|
|
16
|
-
* Returns one of components depending on a boolean condition.
|
|
17
|
-
* The result component will be a union of the two props and
|
|
18
|
-
* an or on both ref types.
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* ```
|
|
22
|
-
* const Component = componentWithCondition(
|
|
23
|
-
* isBooleanConditionMet,
|
|
24
|
-
* ComponentWithConditionMet,
|
|
25
|
-
* ComponentWithConditionNotMet,
|
|
26
|
-
* );
|
|
27
|
-
*
|
|
28
|
-
* @param condition Function returning boolean value
|
|
29
|
-
* @param componentTrue Component that will be returned if conditionGetter is "true"
|
|
30
|
-
* @param componentFalse Component that will be returned if conditionGetter is "false"
|
|
31
|
-
* @returns Component Depending on a Condition result
|
|
32
|
-
*/
|
|
33
|
-
export declare function componentWithCondition<A extends {}, B extends {}>(condition: () => boolean, ComponentTrue: ComponentType<A>, ComponentFalse: ComponentType<B>): React.FC<React.PropsWithoutRef<A> & React.PropsWithoutRef<B> & GetRefAttributes<React.PropsWithRef<A>, React.PropsWithRef<B>>>;
|
|
34
|
-
export {};
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { Component } from 'react';
|
|
6
|
-
import { jsx } from '@emotion/react';
|
|
7
|
-
import { type LocalizationProvider } from '@atlaskit/locale';
|
|
8
|
-
import { type ActionMeta, type InputActionMeta } from '@atlaskit/select';
|
|
9
|
-
import { type DatePickerBaseProps } from '../types';
|
|
10
|
-
type DatePickerProps = typeof datePickerDefaultProps & DatePickerBaseProps;
|
|
11
|
-
interface State {
|
|
12
|
-
isKeyDown: boolean;
|
|
13
|
-
isOpen: boolean;
|
|
14
|
-
/**
|
|
15
|
-
* When being cleared from the icon the DatePicker is blurred.
|
|
16
|
-
* This variable defines whether the default onSelectBlur or onSelectFocus
|
|
17
|
-
* events should behave as normal.
|
|
18
|
-
*/
|
|
19
|
-
isFocused: boolean;
|
|
20
|
-
clearingFromIcon: boolean;
|
|
21
|
-
value: string;
|
|
22
|
-
calendarValue: string;
|
|
23
|
-
selectInputValue: string;
|
|
24
|
-
l10n: LocalizationProvider;
|
|
25
|
-
locale: string;
|
|
26
|
-
shouldSetFocusOnCurrentDay: boolean;
|
|
27
|
-
wasOpenedFromCalendarButton: boolean;
|
|
28
|
-
}
|
|
29
|
-
declare const datePickerDefaultProps: {
|
|
30
|
-
defaultIsOpen: boolean;
|
|
31
|
-
defaultValue: string;
|
|
32
|
-
disabled: string[];
|
|
33
|
-
disabledDateFilter: (_: string) => boolean;
|
|
34
|
-
locale: string;
|
|
35
|
-
onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
|
|
36
|
-
onChange: (_value: string) => void;
|
|
37
|
-
onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
|
|
38
|
-
};
|
|
39
|
-
declare class DatePickerComponent extends Component<DatePickerProps, State> {
|
|
40
|
-
static defaultProps: {
|
|
41
|
-
defaultIsOpen: boolean;
|
|
42
|
-
defaultValue: string;
|
|
43
|
-
disabled: string[];
|
|
44
|
-
disabledDateFilter: (_: string) => boolean;
|
|
45
|
-
locale: string;
|
|
46
|
-
onBlur: (_event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
|
|
47
|
-
onChange: (_value: string) => void;
|
|
48
|
-
onFocus: (_event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
|
|
49
|
-
};
|
|
50
|
-
containerRef: HTMLElement | null;
|
|
51
|
-
calendarRef: React.RefObject<HTMLDivElement | null>;
|
|
52
|
-
calendarButtonRef: React.RefObject<HTMLButtonElement>;
|
|
53
|
-
constructor(props: any);
|
|
54
|
-
static getDerivedStateFromProps(nextProps: Readonly<DatePickerProps>, prevState: State): {
|
|
55
|
-
l10n: LocalizationProvider;
|
|
56
|
-
locale: string;
|
|
57
|
-
} | null;
|
|
58
|
-
getValue: () => string;
|
|
59
|
-
getIsOpen: () => boolean;
|
|
60
|
-
onCalendarChange: ({ iso }: {
|
|
61
|
-
iso: string;
|
|
62
|
-
}) => void;
|
|
63
|
-
onCalendarSelect: ({ iso }: {
|
|
64
|
-
iso: string;
|
|
65
|
-
}) => void;
|
|
66
|
-
onInputClick: () => void;
|
|
67
|
-
onContainerBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
68
|
-
onContainerFocus: () => void;
|
|
69
|
-
onSelectBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
70
|
-
onSelectFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
71
|
-
onTextInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
72
|
-
onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
|
|
73
|
-
onCalendarButtonKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
74
|
-
onCalendarButtonClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
75
|
-
onClear: () => void;
|
|
76
|
-
onSelectChange: (_value: unknown, action: ActionMeta) => void;
|
|
77
|
-
handleSelectInputChange: (selectInputValue: string, actionMeta: InputActionMeta) => void;
|
|
78
|
-
getContainerRef: (ref: HTMLElement | null) => void;
|
|
79
|
-
render(): jsx.JSX.Element;
|
|
80
|
-
}
|
|
81
|
-
export { DatePickerComponent as DatePickerWithoutAnalytics };
|
|
82
|
-
/**
|
|
83
|
-
* __Date picker__
|
|
84
|
-
*
|
|
85
|
-
* A date picker allows the user to select a particular date.
|
|
86
|
-
*
|
|
87
|
-
* - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
|
|
88
|
-
* - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
|
|
89
|
-
* - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
|
|
90
|
-
*/
|
|
91
|
-
declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<Pick<Omit<{
|
|
92
|
-
defaultIsOpen: boolean;
|
|
93
|
-
defaultValue: string;
|
|
94
|
-
disabled: string[];
|
|
95
|
-
disabledDateFilter: (_: string) => boolean;
|
|
96
|
-
locale: string;
|
|
97
|
-
onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
|
|
98
|
-
onChange: (_value: string) => void;
|
|
99
|
-
onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
|
|
100
|
-
} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
|
|
101
|
-
disabled?: string[] | undefined;
|
|
102
|
-
defaultValue?: string | undefined;
|
|
103
|
-
onFocus?: (((_event: React.FocusEvent<HTMLInputElement>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;
|
|
104
|
-
onBlur?: (((_event: React.FocusEvent<HTMLInputElement>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;
|
|
105
|
-
onChange?: (((_value: string) => void) & ((value: string) => void)) | undefined;
|
|
106
|
-
disabledDateFilter?: (((_: string) => boolean) & ((date: string) => boolean)) | undefined;
|
|
107
|
-
locale?: string | undefined;
|
|
108
|
-
defaultIsOpen?: boolean | undefined;
|
|
109
|
-
} & {} & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & import("react").RefAttributes<any>>;
|
|
110
|
-
export default DatePicker;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { type DropdownIndicatorProps, type OptionType } from '@atlaskit/select';
|
|
3
|
-
import { type DatePickerBaseProps, type DateTimePickerSelectProps } from '../types';
|
|
4
|
-
export type DatePickerProps = DatePickerBaseProps & {
|
|
5
|
-
icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
|
|
6
|
-
selectProps?: DateTimePickerSelectProps & {
|
|
7
|
-
inputValue?: string;
|
|
8
|
-
};
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* __Date picker__
|
|
12
|
-
*
|
|
13
|
-
* A date picker allows the user to select a particular date.
|
|
14
|
-
*
|
|
15
|
-
* - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
|
|
16
|
-
* - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
|
|
17
|
-
* - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
|
|
18
|
-
*/
|
|
19
|
-
declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<unknown>>;
|
|
20
|
-
export default DatePicker;
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import { jsx } from '@emotion/react';
|
|
7
|
-
import { type DateTimePickerBaseProps } from '../types';
|
|
8
|
-
interface State {
|
|
9
|
-
dateValue: string;
|
|
10
|
-
isFocused: boolean;
|
|
11
|
-
timeValue: string;
|
|
12
|
-
value: string;
|
|
13
|
-
zoneValue: string;
|
|
14
|
-
}
|
|
15
|
-
export declare const datePickerDefaultAriaLabel = "Date";
|
|
16
|
-
export declare const timePickerDefaultAriaLabel = "Time";
|
|
17
|
-
declare class DateTimePickerComponent extends React.Component<DateTimePickerBaseProps, State> {
|
|
18
|
-
static defaultProps: DateTimePickerBaseProps;
|
|
19
|
-
state: State;
|
|
20
|
-
getParsedValues: () => {
|
|
21
|
-
dateValue: string;
|
|
22
|
-
timeValue: string;
|
|
23
|
-
zoneValue: string;
|
|
24
|
-
};
|
|
25
|
-
getValue: () => string;
|
|
26
|
-
parseValue(value: string, dateValue: string, timeValue: string, zoneValue: string): {
|
|
27
|
-
dateValue: string;
|
|
28
|
-
timeValue: string;
|
|
29
|
-
zoneValue: string;
|
|
30
|
-
};
|
|
31
|
-
onDateBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
32
|
-
onTimeBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
33
|
-
onDateFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
34
|
-
onTimeFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
35
|
-
onDateChange: (dateValue: string) => void;
|
|
36
|
-
onTimeChange: (timeValue: string) => void;
|
|
37
|
-
onClear: () => void;
|
|
38
|
-
onValueChange({ dateValue, timeValue, zoneValue, }: {
|
|
39
|
-
dateValue: string;
|
|
40
|
-
timeValue: string;
|
|
41
|
-
zoneValue: string;
|
|
42
|
-
}): void;
|
|
43
|
-
render(): jsx.JSX.Element;
|
|
44
|
-
}
|
|
45
|
-
export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
|
|
46
|
-
/**
|
|
47
|
-
* __Date time picker__
|
|
48
|
-
*
|
|
49
|
-
* A date time picker allows the user to select an associated date and time.
|
|
50
|
-
*
|
|
51
|
-
* - [Examples](https://atlassian.design/components/datetime-picker/examples)
|
|
52
|
-
* - [Code](https://atlassian.design/components/datetime-picker/code)
|
|
53
|
-
* - [Usage](https://atlassian.design/components/datetime-picker/usage)
|
|
54
|
-
*/
|
|
55
|
-
declare const DateTimePicker: React.ForwardRefExoticComponent<Omit<Omit<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & {
|
|
56
|
-
appearance?: import("../types").Appearance | undefined;
|
|
57
|
-
isDisabled?: boolean | undefined;
|
|
58
|
-
innerProps?: React.AllHTMLAttributes<HTMLElement> | undefined;
|
|
59
|
-
defaultValue?: string | undefined;
|
|
60
|
-
autoFocus?: boolean | undefined;
|
|
61
|
-
id?: string | undefined;
|
|
62
|
-
'aria-describedby'?: string | undefined;
|
|
63
|
-
onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
|
|
64
|
-
onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
|
|
65
|
-
onChange?: ((value: string) => void) | undefined;
|
|
66
|
-
value?: string | undefined;
|
|
67
|
-
testId?: string | undefined;
|
|
68
|
-
locale?: string | undefined;
|
|
69
|
-
clearControlLabel?: string | undefined;
|
|
70
|
-
isInvalid?: boolean | undefined;
|
|
71
|
-
isRequired?: boolean | undefined;
|
|
72
|
-
name?: string | undefined;
|
|
73
|
-
spacing?: import("../types").Spacing | undefined;
|
|
74
|
-
datePickerProps?: import("../types").DatePickerBaseProps | undefined;
|
|
75
|
-
timePickerProps?: import("../types").TimePickerBaseProps | undefined;
|
|
76
|
-
parseValue?: ((dateTimeValue: string, date: string, time: string, timezone: string) => {
|
|
77
|
-
dateValue: string;
|
|
78
|
-
timeValue: string;
|
|
79
|
-
zoneValue: string;
|
|
80
|
-
}) | undefined;
|
|
81
|
-
} & {
|
|
82
|
-
ref?: React.Ref<any> | undefined;
|
|
83
|
-
createAnalyticsEvent?: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | undefined;
|
|
84
|
-
}, "ref"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & React.RefAttributes<any>>;
|
|
85
|
-
export default DateTimePicker;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type DateTimePickerBaseProps } from '../types';
|
|
3
|
-
export declare const datePickerDefaultAriaLabel = "Date";
|
|
4
|
-
export declare const timePickerDefaultAriaLabel = "Time";
|
|
5
|
-
/**
|
|
6
|
-
* __Date time picker__
|
|
7
|
-
*
|
|
8
|
-
* A date time picker allows the user to select an associated date and time.
|
|
9
|
-
*
|
|
10
|
-
* - [Examples](https://atlassian.design/components/datetime-picker/examples)
|
|
11
|
-
* - [Code](https://atlassian.design/components/datetime-picker/code)
|
|
12
|
-
* - [Usage](https://atlassian.design/components/datetime-picker/usage)
|
|
13
|
-
*/
|
|
14
|
-
declare const DateTimePicker: React.ForwardRefExoticComponent<Omit<DateTimePickerBaseProps, "ref"> & React.RefAttributes<unknown>>;
|
|
15
|
-
export default DateTimePicker;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import React, { type ComponentType, type RefAttributes } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Gets all available ref types from two prop sets and returns
|
|
4
|
-
* them in a ref prop
|
|
5
|
-
*
|
|
6
|
-
* @example
|
|
7
|
-
* ```
|
|
8
|
-
* type P1 = { ref: Ref(HTMLDivElement), ... };
|
|
9
|
-
* type P2 = { ref: Ref(HTMLSpanElement), ... };
|
|
10
|
-
*
|
|
11
|
-
* GetRefAttributes(P1, P2) // {ref: Ref(HTMLDivElement | HTMLSpanElement)}
|
|
12
|
-
* ```
|
|
13
|
-
*/
|
|
14
|
-
type GetRefAttributes<A, B> = A extends RefAttributes<infer RefA> ? B extends RefAttributes<infer RefB> ? RefAttributes<RefA | RefB> : RefAttributes<RefA> : B extends RefAttributes<infer OnlyRefB> ? RefAttributes<OnlyRefB> : unknown;
|
|
15
|
-
/**
|
|
16
|
-
* Returns one of components depending on a boolean condition.
|
|
17
|
-
* The result component will be a union of the two props and
|
|
18
|
-
* an or on both ref types.
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
* ```
|
|
22
|
-
* const Component = componentWithCondition(
|
|
23
|
-
* isBooleanConditionMet,
|
|
24
|
-
* ComponentWithConditionMet,
|
|
25
|
-
* ComponentWithConditionNotMet,
|
|
26
|
-
* );
|
|
27
|
-
*
|
|
28
|
-
* @param condition Function returning boolean value
|
|
29
|
-
* @param componentTrue Component that will be returned if conditionGetter is "true"
|
|
30
|
-
* @param componentFalse Component that will be returned if conditionGetter is "false"
|
|
31
|
-
* @returns Component Depending on a Condition result
|
|
32
|
-
*/
|
|
33
|
-
export declare function componentWithCondition<A extends {}, B extends {}>(condition: () => boolean, ComponentTrue: ComponentType<A>, ComponentFalse: ComponentType<B>): React.FC<React.PropsWithoutRef<A> & React.PropsWithoutRef<B> & GetRefAttributes<React.PropsWithRef<A>, React.PropsWithRef<B>>>;
|
|
34
|
-
export {};
|