@carbon/react 1.28.0-rc.0 → 1.28.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/es/components/ContainedList/ContainedList.js +48 -3
- package/es/components/DataTable/DataTable.js +21 -20
- package/es/components/DatePicker/DatePicker.Skeleton.d.ts +30 -0
- package/es/components/DatePicker/DatePicker.Skeleton.js +1 -2
- package/es/components/DatePicker/DatePicker.d.ts +131 -0
- package/es/components/DatePicker/DatePicker.js +16 -12
- package/es/components/DatePicker/index.d.ts +10 -0
- package/es/components/DatePicker/index.js +1 -0
- package/es/components/DatePickerInput/DatePickerInput.d.ts +93 -0
- package/es/components/ExpandableSearch/ExpandableSearch.d.ts +1 -0
- package/es/components/ExpandableSearch/ExpandableSearch.js +1 -0
- package/es/components/FluidDatePicker/FluidDatePicker.js +1 -0
- package/es/components/OverflowMenu/OverflowMenu.js +1 -0
- package/es/components/UIShell/SideNavFooter.js +1 -0
- package/es/components/UIShell/SideNavHeader.js +1 -0
- package/es/components/UIShell/SideNavItems.js +1 -0
- package/es/components/UIShell/SideNavMenu.js +1 -0
- package/es/index.js +2 -2
- package/lib/components/ContainedList/ContainedList.js +48 -3
- package/lib/components/DataTable/DataTable.js +21 -20
- package/lib/components/DatePicker/DatePicker.Skeleton.d.ts +30 -0
- package/lib/components/DatePicker/DatePicker.Skeleton.js +1 -2
- package/lib/components/DatePicker/DatePicker.d.ts +131 -0
- package/lib/components/DatePicker/DatePicker.js +16 -12
- package/lib/components/DatePicker/index.d.ts +10 -0
- package/lib/components/DatePicker/index.js +2 -0
- package/lib/components/DatePickerInput/DatePickerInput.d.ts +93 -0
- package/lib/components/ExpandableSearch/ExpandableSearch.d.ts +1 -0
- package/lib/components/ExpandableSearch/ExpandableSearch.js +1 -0
- package/lib/components/FluidDatePicker/FluidDatePicker.js +1 -0
- package/lib/components/OverflowMenu/OverflowMenu.js +1 -0
- package/lib/components/UIShell/SideNavFooter.js +1 -0
- package/lib/components/UIShell/SideNavHeader.js +1 -0
- package/lib/components/UIShell/SideNavItems.js +1 -0
- package/lib/components/UIShell/SideNavMenu.js +1 -0
- package/lib/index.js +4 -4
- package/package.json +6 -6
|
@@ -13,7 +13,49 @@ import { usePrefix } from '../../internal/usePrefix.js';
|
|
|
13
13
|
|
|
14
14
|
const variants = ['on-page', 'disclosed'];
|
|
15
15
|
|
|
16
|
+
function filterChildren(children) {
|
|
17
|
+
var _children$type;
|
|
18
|
+
|
|
19
|
+
if (Array.isArray(children)) {
|
|
20
|
+
return children === null || children === void 0 ? void 0 : children.filter(child => {
|
|
21
|
+
var _child$type;
|
|
22
|
+
|
|
23
|
+
return !['Search', 'ExpandableSearch'].includes(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName);
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
if (children && !['Search', 'ExpandableSearch'].includes(children === null || children === void 0 ? void 0 : (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.displayName)) {
|
|
28
|
+
return children;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function renderChildren(children) {
|
|
35
|
+
var _children$type2;
|
|
36
|
+
|
|
37
|
+
if (Array.isArray(children)) {
|
|
38
|
+
children.map((child, index) => {
|
|
39
|
+
var _child$type2;
|
|
40
|
+
|
|
41
|
+
if (index === 0 && ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'Search') {
|
|
42
|
+
return child;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return child;
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (children && ((_children$type2 = children.type) === null || _children$type2 === void 0 ? void 0 : _children$type2.displayName) === 'Search') {
|
|
50
|
+
return children;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
return children;
|
|
54
|
+
}
|
|
55
|
+
|
|
16
56
|
function ContainedList(_ref) {
|
|
57
|
+
var _action$type;
|
|
58
|
+
|
|
17
59
|
let {
|
|
18
60
|
action,
|
|
19
61
|
children,
|
|
@@ -28,6 +70,9 @@ function ContainedList(_ref) {
|
|
|
28
70
|
const classes = cx(`${prefix}--contained-list`, {
|
|
29
71
|
[`${prefix}--contained-list--inset-rulers`]: isInset
|
|
30
72
|
}, `${prefix}--contained-list--${kind}`, `${prefix}--contained-list--${size}`, className);
|
|
73
|
+
const filteredChildren = filterChildren(children);
|
|
74
|
+
const isActionSearch = ['Search', 'ExpandableSearch'].includes(action === null || action === void 0 ? void 0 : (_action$type = action.type) === null || _action$type === void 0 ? void 0 : _action$type.displayName);
|
|
75
|
+
const renderedChildren = renderChildren(children);
|
|
31
76
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
32
77
|
className: classes
|
|
33
78
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -35,11 +80,11 @@ function ContainedList(_ref) {
|
|
|
35
80
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
36
81
|
id: labelId,
|
|
37
82
|
className: `${prefix}--contained-list__label`
|
|
38
|
-
}, label),
|
|
83
|
+
}, label), /*#__PURE__*/React__default.createElement("div", {
|
|
39
84
|
className: `${prefix}--contained-list__action`
|
|
40
|
-
}, action)), /*#__PURE__*/React__default.createElement("ul", {
|
|
85
|
+
}, action)), children && /*#__PURE__*/React__default.createElement("ul", {
|
|
41
86
|
"aria-labelledby": labelId
|
|
42
|
-
},
|
|
87
|
+
}, isActionSearch ? filteredChildren : renderedChildren));
|
|
43
88
|
}
|
|
44
89
|
|
|
45
90
|
ContainedList.propTypes = {
|
|
@@ -425,33 +425,34 @@ class DataTable extends React__default.Component {
|
|
|
425
425
|
|
|
426
426
|
};
|
|
427
427
|
this.instanceId = getInstanceId();
|
|
428
|
-
}
|
|
428
|
+
} // if state needs to be updated then wait for only update after state is finished
|
|
429
429
|
|
|
430
|
-
componentDidUpdate(prevProps) {
|
|
431
|
-
if (prevProps === this.props) {
|
|
432
|
-
return;
|
|
433
|
-
}
|
|
434
430
|
|
|
435
|
-
|
|
436
|
-
|
|
431
|
+
shouldComponentUpdate(nextProps) {
|
|
432
|
+
if (this.props !== nextProps) {
|
|
433
|
+
const nextRowIds = nextProps.rows.map(row => row.id);
|
|
434
|
+
const rowIds = this.props.rows.map(row => row.id);
|
|
437
435
|
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
436
|
+
if (!isEqual(nextRowIds, rowIds)) {
|
|
437
|
+
this.setState(state => getDerivedStateFromProps(this.props, state));
|
|
438
|
+
return false;
|
|
439
|
+
}
|
|
442
440
|
|
|
443
|
-
|
|
444
|
-
|
|
441
|
+
const nextHeaders = nextProps.headers.map(header => header.key);
|
|
442
|
+
const headers = this.props.headers.map(header => header.key);
|
|
445
443
|
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
444
|
+
if (!isEqual(nextHeaders, headers)) {
|
|
445
|
+
this.setState(state => getDerivedStateFromProps(this.props, state));
|
|
446
|
+
return false;
|
|
447
|
+
}
|
|
450
448
|
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
449
|
+
if (!isEqual(nextProps.rows, this.props.rows)) {
|
|
450
|
+
this.setState(state => getDerivedStateFromProps(this.props, state));
|
|
451
|
+
return false;
|
|
452
|
+
}
|
|
454
453
|
}
|
|
454
|
+
|
|
455
|
+
return true;
|
|
455
456
|
}
|
|
456
457
|
/**
|
|
457
458
|
* Get the props associated with the given header. Mostly used for adding in
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import PropTypes from 'prop-types';
|
|
8
|
+
import { type HTMLAttributes } from 'react';
|
|
9
|
+
export interface DatePickerSkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
10
|
+
range?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare const DatePickerSkeleton: {
|
|
13
|
+
({ range, id, className, ...rest }: DatePickerSkeletonProps): JSX.Element;
|
|
14
|
+
propTypes: {
|
|
15
|
+
/**
|
|
16
|
+
* Specify an optional className to add.
|
|
17
|
+
*/
|
|
18
|
+
className: PropTypes.Requireable<string>;
|
|
19
|
+
/**
|
|
20
|
+
* Specify the id to add.
|
|
21
|
+
*/
|
|
22
|
+
id: PropTypes.Requireable<string>;
|
|
23
|
+
/**
|
|
24
|
+
* Specify whether the skeleton should be of range date picker.
|
|
25
|
+
*/
|
|
26
|
+
range: PropTypes.Requireable<boolean>;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
export default DatePickerSkeleton;
|
|
30
|
+
export { DatePickerSkeleton };
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { ReactNodeLike } from 'prop-types';
|
|
8
|
+
import React, { ChangeEventHandler } from 'react';
|
|
9
|
+
import { ReactAttr } from '../../types/common';
|
|
10
|
+
type ExcludedAttributes = 'value' | 'onChange' | 'locale';
|
|
11
|
+
export type DatePickerTypes = 'simple' | 'single' | 'range';
|
|
12
|
+
export type CalRef = {
|
|
13
|
+
inline: boolean;
|
|
14
|
+
disableMobile: boolean;
|
|
15
|
+
defaultDate: Date;
|
|
16
|
+
closeOnSelect: (evt: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
17
|
+
mode: 'simple' | 'single' | 'range';
|
|
18
|
+
allowInput: boolean;
|
|
19
|
+
dateFormat: string;
|
|
20
|
+
locale: string;
|
|
21
|
+
plugins: [];
|
|
22
|
+
clickOpens: any;
|
|
23
|
+
};
|
|
24
|
+
interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
|
|
25
|
+
/**
|
|
26
|
+
* flatpickr prop passthrough. Allows the user to enter a date directly
|
|
27
|
+
* into the input field
|
|
28
|
+
*/
|
|
29
|
+
allowInput: boolean | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* The DOM element the flatpickr should be inserted into `<body>` by default.
|
|
32
|
+
*/
|
|
33
|
+
appendTo: object | undefined;
|
|
34
|
+
/**
|
|
35
|
+
* The child nodes.
|
|
36
|
+
*/
|
|
37
|
+
children: React.ReactNode | object;
|
|
38
|
+
/**
|
|
39
|
+
* The CSS class names.
|
|
40
|
+
*/
|
|
41
|
+
className: string | undefined;
|
|
42
|
+
/**
|
|
43
|
+
* flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
|
|
44
|
+
*/
|
|
45
|
+
closeOnSelect: boolean | undefined;
|
|
46
|
+
/**
|
|
47
|
+
* The date format.
|
|
48
|
+
*/
|
|
49
|
+
dateFormat?: string;
|
|
50
|
+
/**
|
|
51
|
+
* The type of the date picker:
|
|
52
|
+
*
|
|
53
|
+
* * `simple` - Without calendar dropdown.
|
|
54
|
+
* * `single` - With calendar dropdown and single date.
|
|
55
|
+
* * `range` - With calendar dropdown and a date range.
|
|
56
|
+
*/
|
|
57
|
+
datePickerType?: DatePickerTypes;
|
|
58
|
+
/**
|
|
59
|
+
* The flatpickr `disable` option that allows a user to disable certain dates.
|
|
60
|
+
*/
|
|
61
|
+
disable?: string[];
|
|
62
|
+
/**
|
|
63
|
+
* The flatpickr `enable` option that allows a user to enable certain dates.
|
|
64
|
+
*/
|
|
65
|
+
enable?: string[];
|
|
66
|
+
/**
|
|
67
|
+
* The flatpickr `inline` option.
|
|
68
|
+
*/
|
|
69
|
+
inline: boolean | undefined;
|
|
70
|
+
/**
|
|
71
|
+
* Specify whether or not the control is invalid (Fluid only)
|
|
72
|
+
*/
|
|
73
|
+
invalid: boolean | undefined;
|
|
74
|
+
/**
|
|
75
|
+
* Provide the text that is displayed when the control is in error state (Fluid Only)
|
|
76
|
+
*/
|
|
77
|
+
invalidText: ReactNodeLike;
|
|
78
|
+
/**
|
|
79
|
+
* `true` to use the light version.
|
|
80
|
+
*/
|
|
81
|
+
light: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
|
|
84
|
+
*/
|
|
85
|
+
locale?: string | any | 'ar' | 'at' | 'az' | 'be' | 'bg' | 'bn' | 'bs' | 'cat' | 'cs' | 'cy' | 'da' | 'de' | 'en' | 'eo' | 'es' | 'et' | 'fa' | 'fi' | 'fo' | 'fr' | 'ga' | 'gr' | 'he' | 'hi' | 'hr' | 'hu' | 'id' | 'is' | 'it' | 'ja' | 'ka' | 'km' | 'ko' | 'kz' | 'lt' | 'lv' | 'mk' | 'mn' | 'ms' | 'my' | 'nl' | 'no' | 'pa' | 'pl' | 'pt' | 'ro' | 'ru' | 'si' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'th' | 'tr' | 'uk' | 'uz' | 'uz_latn' | 'vn' | 'zh_tw' | 'zh' | undefined;
|
|
86
|
+
/**
|
|
87
|
+
* The maximum date that a user can pick to.
|
|
88
|
+
*/
|
|
89
|
+
maxDate?: string;
|
|
90
|
+
/**
|
|
91
|
+
* The minimum date that a user can start picking from.
|
|
92
|
+
*/
|
|
93
|
+
minDate?: string;
|
|
94
|
+
/**
|
|
95
|
+
* The `change` event handler.
|
|
96
|
+
*/
|
|
97
|
+
onChange?: ChangeEventHandler<HTMLSelectElement>;
|
|
98
|
+
/**
|
|
99
|
+
* The `close` event handler.
|
|
100
|
+
*/
|
|
101
|
+
onClose?: any;
|
|
102
|
+
/**
|
|
103
|
+
* The `open` event handler.
|
|
104
|
+
*/
|
|
105
|
+
onOpen?: ChangeEventHandler<HTMLSelectElement>;
|
|
106
|
+
/**
|
|
107
|
+
* whether the DatePicker is to be readOnly
|
|
108
|
+
* if boolean applies to all inputs
|
|
109
|
+
* if array applies to each input in order
|
|
110
|
+
*/
|
|
111
|
+
readOnly?: boolean | [] | any | undefined;
|
|
112
|
+
/**
|
|
113
|
+
* `true` to use the short version.
|
|
114
|
+
*/
|
|
115
|
+
short?: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* The value of the date value provided to flatpickr, could
|
|
118
|
+
* be a date, a date number, a date string, an array of dates.
|
|
119
|
+
*/
|
|
120
|
+
value?: string | number | (string | number | object)[] | object | undefined;
|
|
121
|
+
/**
|
|
122
|
+
* Specify whether the control is currently in warning state (Fluid only)
|
|
123
|
+
*/
|
|
124
|
+
warn?: boolean;
|
|
125
|
+
/**
|
|
126
|
+
* Provide the text that is displayed when the control is in warning state (Fluid only)
|
|
127
|
+
*/
|
|
128
|
+
warnText: ReactNodeLike;
|
|
129
|
+
}
|
|
130
|
+
declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
131
|
+
export default DatePicker;
|
|
@@ -24,6 +24,7 @@ import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
|
|
|
24
24
|
import { match } from '../../internal/keyboard/match.js';
|
|
25
25
|
import { Escape, ArrowDown } from '../../internal/keyboard/keys.js';
|
|
26
26
|
|
|
27
|
+
// Weekdays shorthand for english locale
|
|
27
28
|
l10n.en.weekdays.shorthand.forEach((_day, index) => {
|
|
28
29
|
const currentDay = l10n.en.weekdays.shorthand;
|
|
29
30
|
|
|
@@ -183,26 +184,29 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
|
|
|
183
184
|
setHasInput(true);
|
|
184
185
|
}
|
|
185
186
|
}, []);
|
|
186
|
-
const endInputField = useRef(null);
|
|
187
187
|
const lastStartValue = useRef(''); // fix datepicker deleting the selectedDate when the calendar closes
|
|
188
188
|
|
|
189
189
|
const onCalendarClose = (selectedDates, dateStr) => {
|
|
190
190
|
setTimeout(() => {
|
|
191
191
|
if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
|
|
192
|
+
var _endInputField$curren;
|
|
193
|
+
|
|
192
194
|
startInputField.current.value = lastStartValue.current;
|
|
193
|
-
calendarRef.current.setDate([startInputField.current.value, endInputField.current.value], true, calendarRef.current.config.dateFormat);
|
|
195
|
+
calendarRef.current.setDate([startInputField.current.value, endInputField === null || endInputField === void 0 ? void 0 : (_endInputField$curren = endInputField.current) === null || _endInputField$curren === void 0 ? void 0 : _endInputField$curren.value], true, calendarRef.current.config.dateFormat);
|
|
194
196
|
}
|
|
195
197
|
|
|
196
198
|
if (onClose) {
|
|
197
199
|
onClose(calendarRef.current.selectedDates, dateStr, calendarRef.current);
|
|
198
200
|
}
|
|
199
201
|
});
|
|
200
|
-
};
|
|
202
|
+
}; //const savedOnOpen = useSavedCallback(onOpen);
|
|
203
|
+
|
|
201
204
|
|
|
205
|
+
const endInputField = useRef(null);
|
|
202
206
|
const calendarRef = useRef(null);
|
|
203
|
-
const savedOnChange = useSavedCallback(onChange);
|
|
207
|
+
const savedOnChange = useSavedCallback(() => onChange);
|
|
204
208
|
const savedOnClose = useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
|
|
205
|
-
const savedOnOpen = useSavedCallback(onOpen);
|
|
209
|
+
const savedOnOpen = useSavedCallback(() => onOpen);
|
|
206
210
|
const datePickerClasses = cx(`${prefix}--date-picker`, {
|
|
207
211
|
[`${prefix}--date-picker--short`]: short,
|
|
208
212
|
[`${prefix}--date-picker--light`]: light,
|
|
@@ -212,7 +216,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
|
|
|
212
216
|
[`${prefix}--date-picker--nolabel`]: datePickerType === 'range' && isLabelTextEmpty(children)
|
|
213
217
|
});
|
|
214
218
|
const wrapperClasses = cx(`${prefix}--form-item`, {
|
|
215
|
-
[className]: className
|
|
219
|
+
[String(className)]: className
|
|
216
220
|
});
|
|
217
221
|
const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
|
|
218
222
|
if (index === 0 && child.type === React__default.createElement(DatePickerInput, child.props).type) {
|
|
@@ -268,7 +272,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
|
|
|
268
272
|
// is provided, we return the default empty disabled array, allowing all dates.
|
|
269
273
|
|
|
270
274
|
|
|
271
|
-
|
|
275
|
+
const enableOrDisable = enable ? 'enable' : 'disable';
|
|
272
276
|
let enableOrDisableArr;
|
|
273
277
|
|
|
274
278
|
if (!enable && !disable) {
|
|
@@ -282,7 +286,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
|
|
|
282
286
|
let localeData;
|
|
283
287
|
|
|
284
288
|
if (typeof locale === 'object') {
|
|
285
|
-
|
|
289
|
+
const location = locale.locale ? locale.locale : 'en';
|
|
286
290
|
localeData = { ...l10n[location],
|
|
287
291
|
...locale
|
|
288
292
|
};
|
|
@@ -296,7 +300,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
|
|
|
296
300
|
const {
|
|
297
301
|
current: end
|
|
298
302
|
} = endInputField;
|
|
299
|
-
const
|
|
303
|
+
const flatpickerconfig = {
|
|
300
304
|
inline: inline ?? false,
|
|
301
305
|
disableMobile: true,
|
|
302
306
|
defaultDate: value,
|
|
@@ -340,7 +344,8 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
|
|
|
340
344
|
savedOnOpen(...arguments);
|
|
341
345
|
},
|
|
342
346
|
onValueUpdate: onHook
|
|
343
|
-
}
|
|
347
|
+
};
|
|
348
|
+
const calendar = flatpickr(start, flatpickerconfig);
|
|
344
349
|
calendarRef.current = calendar;
|
|
345
350
|
|
|
346
351
|
function handleArrowDown(event) {
|
|
@@ -728,6 +733,5 @@ DatePicker.propTypes = {
|
|
|
728
733
|
*/
|
|
729
734
|
warnText: PropTypes.node
|
|
730
735
|
};
|
|
731
|
-
var DatePicker$1 = DatePicker;
|
|
732
736
|
|
|
733
|
-
export { DatePicker
|
|
737
|
+
export { DatePicker as default };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import DatePicker from './DatePicker';
|
|
8
|
+
export { default as DatePickerSkeleton, type DatePickerSkeletonProps, } from './DatePicker.Skeleton';
|
|
9
|
+
export default DatePicker;
|
|
10
|
+
export { DatePicker };
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { ReactElementLike, ReactNodeArray } from 'prop-types';
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import { ReactAttr } from '../../types/common';
|
|
10
|
+
type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
|
|
11
|
+
export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
|
|
12
|
+
export type func = (...args: any[]) => any;
|
|
13
|
+
interface DatePickerInputProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
|
|
14
|
+
/**
|
|
15
|
+
* The type of the date picker:
|
|
16
|
+
*
|
|
17
|
+
* * `simple` - Without calendar dropdown.
|
|
18
|
+
* * `single` - With calendar dropdown and single date.
|
|
19
|
+
* * `range` - With calendar dropdown and a date range.
|
|
20
|
+
*/
|
|
21
|
+
datePickerType?: 'simple' | 'single' | 'range';
|
|
22
|
+
/**
|
|
23
|
+
* Specify whether or not the input should be disabled
|
|
24
|
+
*/
|
|
25
|
+
disabled?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Provide text that is used alongside the control label for additional help
|
|
28
|
+
*/
|
|
29
|
+
helperText?: ReactNodeLike;
|
|
30
|
+
/**
|
|
31
|
+
* Specify if the label should be hidden
|
|
32
|
+
*/
|
|
33
|
+
hideLabel?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Specify an id that uniquely identifies the `<input>`
|
|
36
|
+
*/
|
|
37
|
+
id: string;
|
|
38
|
+
/**
|
|
39
|
+
* Specify whether or not the input should be invalid
|
|
40
|
+
*/
|
|
41
|
+
invalid?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Specify the text to be rendered when the input is invalid
|
|
44
|
+
*/
|
|
45
|
+
invalidText: ReactNodeLike;
|
|
46
|
+
/**
|
|
47
|
+
* Provide the text that will be read by a screen reader when visiting this
|
|
48
|
+
* control
|
|
49
|
+
*/
|
|
50
|
+
labelText: ReactNodeLike;
|
|
51
|
+
/**
|
|
52
|
+
* Specify an `onChange` handler that is called whenever a change in the
|
|
53
|
+
* input field has occurred
|
|
54
|
+
*/
|
|
55
|
+
onChange?: func;
|
|
56
|
+
/**
|
|
57
|
+
* Provide a function to be called when the input field is clicked
|
|
58
|
+
*/
|
|
59
|
+
onClick?: func;
|
|
60
|
+
/**
|
|
61
|
+
* Provide a regular expression that the input value must match
|
|
62
|
+
* TODO:need to be rewritten
|
|
63
|
+
*/
|
|
64
|
+
pattern: (props: {
|
|
65
|
+
[key: string]: any;
|
|
66
|
+
}, propName: string, componentName: string) => null | any | Error;
|
|
67
|
+
/**
|
|
68
|
+
* Specify the placeholder text
|
|
69
|
+
*/
|
|
70
|
+
placeholder?: string;
|
|
71
|
+
/**
|
|
72
|
+
* whether the DatePicker is to be readOnly
|
|
73
|
+
*/
|
|
74
|
+
readOnly?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
|
|
77
|
+
*/
|
|
78
|
+
size?: 'sm' | 'md' | 'lg';
|
|
79
|
+
/**
|
|
80
|
+
* Specify the type of the `<input>`
|
|
81
|
+
*/
|
|
82
|
+
type?: string;
|
|
83
|
+
/**
|
|
84
|
+
* Specify whether the control is currently in warning state
|
|
85
|
+
*/
|
|
86
|
+
warn?: boolean;
|
|
87
|
+
/**
|
|
88
|
+
* Provide the text that is displayed when the control is in warning state
|
|
89
|
+
*/
|
|
90
|
+
warnText?: ReactNodeLike;
|
|
91
|
+
}
|
|
92
|
+
declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLDivElement>>;
|
|
93
|
+
export default DatePickerInput;
|
|
@@ -9,5 +9,6 @@ import { type SearchProps } from '../Search';
|
|
|
9
9
|
declare function ExpandableSearch({ onBlur, onChange, onExpand, onFocus, ...props }: SearchProps): JSX.Element;
|
|
10
10
|
declare namespace ExpandableSearch {
|
|
11
11
|
var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
|
|
12
|
+
var displayName: string;
|
|
12
13
|
}
|
|
13
14
|
export default ExpandableSearch;
|
|
@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
|
|
|
10
10
|
import React__default from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import DatePicker from '../DatePicker/DatePicker.js';
|
|
13
|
+
import '../DatePicker/DatePicker.Skeleton.js';
|
|
13
14
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
15
|
import { FormContext } from '../FluidForm/FormContext.js';
|
|
15
16
|
|
|
@@ -374,6 +374,7 @@ class OverflowMenu extends Component {
|
|
|
374
374
|
onClick: this.handleClick,
|
|
375
375
|
id: id,
|
|
376
376
|
ref: mergeRefs(this._triggerRef, ref),
|
|
377
|
+
size: size,
|
|
377
378
|
label: iconDescription
|
|
378
379
|
}), /*#__PURE__*/React__default.createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
|
|
379
380
|
}
|
|
@@ -24,6 +24,7 @@ const SideNavHeader = _ref => {
|
|
|
24
24
|
}, /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), children);
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
+
SideNavHeader.displayName = 'SideNavHeader';
|
|
27
28
|
SideNavHeader.propTypes = {
|
|
28
29
|
/**
|
|
29
30
|
* The child nodes to be rendered
|
package/es/index.js
CHANGED
|
@@ -11,6 +11,8 @@ export { default as CheckboxSkeleton } from './components/Checkbox/Checkbox.Skel
|
|
|
11
11
|
export { ClassPrefix } from './components/ClassPrefix/index.js';
|
|
12
12
|
export { default as ContentSwitcher } from './components/ContentSwitcher/index.js';
|
|
13
13
|
import './components/DataTable/index.js';
|
|
14
|
+
export { default as DatePicker } from './components/DatePicker/DatePicker.js';
|
|
15
|
+
export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
|
|
14
16
|
export { default as Dropdown } from './components/Dropdown/Dropdown.js';
|
|
15
17
|
export { default as DropdownSkeleton } from './components/Dropdown/Dropdown.Skeleton.js';
|
|
16
18
|
export { default as FluidForm } from './components/FluidForm/FluidForm.js';
|
|
@@ -149,8 +151,6 @@ export { default as TableToolbarAction } from './components/DataTable/TableToolb
|
|
|
149
151
|
export { default as TableToolbarContent } from './components/DataTable/TableToolbarContent.js';
|
|
150
152
|
export { default as TableToolbarSearch } from './components/DataTable/TableToolbarSearch.js';
|
|
151
153
|
export { default as TableToolbarMenu } from './components/DataTable/TableToolbarMenu.js';
|
|
152
|
-
export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
|
|
153
|
-
export { default as DatePicker } from './components/DatePicker/DatePicker.js';
|
|
154
154
|
export { default as DatePickerInput } from './components/DatePickerInput/DatePickerInput.js';
|
|
155
155
|
export { ErrorBoundaryContext } from './components/ErrorBoundary/ErrorBoundaryContext.js';
|
|
156
156
|
export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
|
|
@@ -23,7 +23,49 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
|
23
23
|
|
|
24
24
|
const variants = ['on-page', 'disclosed'];
|
|
25
25
|
|
|
26
|
+
function filterChildren(children) {
|
|
27
|
+
var _children$type;
|
|
28
|
+
|
|
29
|
+
if (Array.isArray(children)) {
|
|
30
|
+
return children === null || children === void 0 ? void 0 : children.filter(child => {
|
|
31
|
+
var _child$type;
|
|
32
|
+
|
|
33
|
+
return !['Search', 'ExpandableSearch'].includes(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName);
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (children && !['Search', 'ExpandableSearch'].includes(children === null || children === void 0 ? void 0 : (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.displayName)) {
|
|
38
|
+
return children;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
return null;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
function renderChildren(children) {
|
|
45
|
+
var _children$type2;
|
|
46
|
+
|
|
47
|
+
if (Array.isArray(children)) {
|
|
48
|
+
children.map((child, index) => {
|
|
49
|
+
var _child$type2;
|
|
50
|
+
|
|
51
|
+
if (index === 0 && ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'Search') {
|
|
52
|
+
return child;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
return child;
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
if (children && ((_children$type2 = children.type) === null || _children$type2 === void 0 ? void 0 : _children$type2.displayName) === 'Search') {
|
|
60
|
+
return children;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
return children;
|
|
64
|
+
}
|
|
65
|
+
|
|
26
66
|
function ContainedList(_ref) {
|
|
67
|
+
var _action$type;
|
|
68
|
+
|
|
27
69
|
let {
|
|
28
70
|
action,
|
|
29
71
|
children,
|
|
@@ -38,6 +80,9 @@ function ContainedList(_ref) {
|
|
|
38
80
|
const classes = cx__default["default"](`${prefix}--contained-list`, {
|
|
39
81
|
[`${prefix}--contained-list--inset-rulers`]: isInset
|
|
40
82
|
}, `${prefix}--contained-list--${kind}`, `${prefix}--contained-list--${size}`, className);
|
|
83
|
+
const filteredChildren = filterChildren(children);
|
|
84
|
+
const isActionSearch = ['Search', 'ExpandableSearch'].includes(action === null || action === void 0 ? void 0 : (_action$type = action.type) === null || _action$type === void 0 ? void 0 : _action$type.displayName);
|
|
85
|
+
const renderedChildren = renderChildren(children);
|
|
41
86
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
42
87
|
className: classes
|
|
43
88
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -45,11 +90,11 @@ function ContainedList(_ref) {
|
|
|
45
90
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46
91
|
id: labelId,
|
|
47
92
|
className: `${prefix}--contained-list__label`
|
|
48
|
-
}, label),
|
|
93
|
+
}, label), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
49
94
|
className: `${prefix}--contained-list__action`
|
|
50
|
-
}, action)), /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
95
|
+
}, action)), children && /*#__PURE__*/React__default["default"].createElement("ul", {
|
|
51
96
|
"aria-labelledby": labelId
|
|
52
|
-
},
|
|
97
|
+
}, isActionSearch ? filteredChildren : renderedChildren));
|
|
53
98
|
}
|
|
54
99
|
|
|
55
100
|
ContainedList.propTypes = {
|
|
@@ -435,33 +435,34 @@ class DataTable extends React__default["default"].Component {
|
|
|
435
435
|
|
|
436
436
|
};
|
|
437
437
|
this.instanceId = getInstanceId();
|
|
438
|
-
}
|
|
438
|
+
} // if state needs to be updated then wait for only update after state is finished
|
|
439
439
|
|
|
440
|
-
componentDidUpdate(prevProps) {
|
|
441
|
-
if (prevProps === this.props) {
|
|
442
|
-
return;
|
|
443
|
-
}
|
|
444
440
|
|
|
445
|
-
|
|
446
|
-
|
|
441
|
+
shouldComponentUpdate(nextProps) {
|
|
442
|
+
if (this.props !== nextProps) {
|
|
443
|
+
const nextRowIds = nextProps.rows.map(row => row.id);
|
|
444
|
+
const rowIds = this.props.rows.map(row => row.id);
|
|
447
445
|
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
446
|
+
if (!isEqual__default["default"](nextRowIds, rowIds)) {
|
|
447
|
+
this.setState(state => getDerivedStateFromProps["default"](this.props, state));
|
|
448
|
+
return false;
|
|
449
|
+
}
|
|
452
450
|
|
|
453
|
-
|
|
454
|
-
|
|
451
|
+
const nextHeaders = nextProps.headers.map(header => header.key);
|
|
452
|
+
const headers = this.props.headers.map(header => header.key);
|
|
455
453
|
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
454
|
+
if (!isEqual__default["default"](nextHeaders, headers)) {
|
|
455
|
+
this.setState(state => getDerivedStateFromProps["default"](this.props, state));
|
|
456
|
+
return false;
|
|
457
|
+
}
|
|
460
458
|
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
459
|
+
if (!isEqual__default["default"](nextProps.rows, this.props.rows)) {
|
|
460
|
+
this.setState(state => getDerivedStateFromProps["default"](this.props, state));
|
|
461
|
+
return false;
|
|
462
|
+
}
|
|
464
463
|
}
|
|
464
|
+
|
|
465
|
+
return true;
|
|
465
466
|
}
|
|
466
467
|
/**
|
|
467
468
|
* Get the props associated with the given header. Mostly used for adding in
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import PropTypes from 'prop-types';
|
|
8
|
+
import { type HTMLAttributes } from 'react';
|
|
9
|
+
export interface DatePickerSkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
10
|
+
range?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare const DatePickerSkeleton: {
|
|
13
|
+
({ range, id, className, ...rest }: DatePickerSkeletonProps): JSX.Element;
|
|
14
|
+
propTypes: {
|
|
15
|
+
/**
|
|
16
|
+
* Specify an optional className to add.
|
|
17
|
+
*/
|
|
18
|
+
className: PropTypes.Requireable<string>;
|
|
19
|
+
/**
|
|
20
|
+
* Specify the id to add.
|
|
21
|
+
*/
|
|
22
|
+
id: PropTypes.Requireable<string>;
|
|
23
|
+
/**
|
|
24
|
+
* Specify whether the skeleton should be of range date picker.
|
|
25
|
+
*/
|
|
26
|
+
range: PropTypes.Requireable<boolean>;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
export default DatePickerSkeleton;
|
|
30
|
+
export { DatePickerSkeleton };
|
|
@@ -73,7 +73,6 @@ DatePickerSkeleton.propTypes = {
|
|
|
73
73
|
*/
|
|
74
74
|
range: PropTypes__default["default"].bool
|
|
75
75
|
};
|
|
76
|
-
var DatePickerSkeleton$1 = DatePickerSkeleton;
|
|
77
76
|
|
|
78
77
|
exports.DatePickerSkeleton = DatePickerSkeleton;
|
|
79
|
-
exports["default"] = DatePickerSkeleton
|
|
78
|
+
exports["default"] = DatePickerSkeleton;
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { ReactNodeLike } from 'prop-types';
|
|
8
|
+
import React, { ChangeEventHandler } from 'react';
|
|
9
|
+
import { ReactAttr } from '../../types/common';
|
|
10
|
+
type ExcludedAttributes = 'value' | 'onChange' | 'locale';
|
|
11
|
+
export type DatePickerTypes = 'simple' | 'single' | 'range';
|
|
12
|
+
export type CalRef = {
|
|
13
|
+
inline: boolean;
|
|
14
|
+
disableMobile: boolean;
|
|
15
|
+
defaultDate: Date;
|
|
16
|
+
closeOnSelect: (evt: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
17
|
+
mode: 'simple' | 'single' | 'range';
|
|
18
|
+
allowInput: boolean;
|
|
19
|
+
dateFormat: string;
|
|
20
|
+
locale: string;
|
|
21
|
+
plugins: [];
|
|
22
|
+
clickOpens: any;
|
|
23
|
+
};
|
|
24
|
+
interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
|
|
25
|
+
/**
|
|
26
|
+
* flatpickr prop passthrough. Allows the user to enter a date directly
|
|
27
|
+
* into the input field
|
|
28
|
+
*/
|
|
29
|
+
allowInput: boolean | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* The DOM element the flatpickr should be inserted into `<body>` by default.
|
|
32
|
+
*/
|
|
33
|
+
appendTo: object | undefined;
|
|
34
|
+
/**
|
|
35
|
+
* The child nodes.
|
|
36
|
+
*/
|
|
37
|
+
children: React.ReactNode | object;
|
|
38
|
+
/**
|
|
39
|
+
* The CSS class names.
|
|
40
|
+
*/
|
|
41
|
+
className: string | undefined;
|
|
42
|
+
/**
|
|
43
|
+
* flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
|
|
44
|
+
*/
|
|
45
|
+
closeOnSelect: boolean | undefined;
|
|
46
|
+
/**
|
|
47
|
+
* The date format.
|
|
48
|
+
*/
|
|
49
|
+
dateFormat?: string;
|
|
50
|
+
/**
|
|
51
|
+
* The type of the date picker:
|
|
52
|
+
*
|
|
53
|
+
* * `simple` - Without calendar dropdown.
|
|
54
|
+
* * `single` - With calendar dropdown and single date.
|
|
55
|
+
* * `range` - With calendar dropdown and a date range.
|
|
56
|
+
*/
|
|
57
|
+
datePickerType?: DatePickerTypes;
|
|
58
|
+
/**
|
|
59
|
+
* The flatpickr `disable` option that allows a user to disable certain dates.
|
|
60
|
+
*/
|
|
61
|
+
disable?: string[];
|
|
62
|
+
/**
|
|
63
|
+
* The flatpickr `enable` option that allows a user to enable certain dates.
|
|
64
|
+
*/
|
|
65
|
+
enable?: string[];
|
|
66
|
+
/**
|
|
67
|
+
* The flatpickr `inline` option.
|
|
68
|
+
*/
|
|
69
|
+
inline: boolean | undefined;
|
|
70
|
+
/**
|
|
71
|
+
* Specify whether or not the control is invalid (Fluid only)
|
|
72
|
+
*/
|
|
73
|
+
invalid: boolean | undefined;
|
|
74
|
+
/**
|
|
75
|
+
* Provide the text that is displayed when the control is in error state (Fluid Only)
|
|
76
|
+
*/
|
|
77
|
+
invalidText: ReactNodeLike;
|
|
78
|
+
/**
|
|
79
|
+
* `true` to use the light version.
|
|
80
|
+
*/
|
|
81
|
+
light: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
|
|
84
|
+
*/
|
|
85
|
+
locale?: string | any | 'ar' | 'at' | 'az' | 'be' | 'bg' | 'bn' | 'bs' | 'cat' | 'cs' | 'cy' | 'da' | 'de' | 'en' | 'eo' | 'es' | 'et' | 'fa' | 'fi' | 'fo' | 'fr' | 'ga' | 'gr' | 'he' | 'hi' | 'hr' | 'hu' | 'id' | 'is' | 'it' | 'ja' | 'ka' | 'km' | 'ko' | 'kz' | 'lt' | 'lv' | 'mk' | 'mn' | 'ms' | 'my' | 'nl' | 'no' | 'pa' | 'pl' | 'pt' | 'ro' | 'ru' | 'si' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'th' | 'tr' | 'uk' | 'uz' | 'uz_latn' | 'vn' | 'zh_tw' | 'zh' | undefined;
|
|
86
|
+
/**
|
|
87
|
+
* The maximum date that a user can pick to.
|
|
88
|
+
*/
|
|
89
|
+
maxDate?: string;
|
|
90
|
+
/**
|
|
91
|
+
* The minimum date that a user can start picking from.
|
|
92
|
+
*/
|
|
93
|
+
minDate?: string;
|
|
94
|
+
/**
|
|
95
|
+
* The `change` event handler.
|
|
96
|
+
*/
|
|
97
|
+
onChange?: ChangeEventHandler<HTMLSelectElement>;
|
|
98
|
+
/**
|
|
99
|
+
* The `close` event handler.
|
|
100
|
+
*/
|
|
101
|
+
onClose?: any;
|
|
102
|
+
/**
|
|
103
|
+
* The `open` event handler.
|
|
104
|
+
*/
|
|
105
|
+
onOpen?: ChangeEventHandler<HTMLSelectElement>;
|
|
106
|
+
/**
|
|
107
|
+
* whether the DatePicker is to be readOnly
|
|
108
|
+
* if boolean applies to all inputs
|
|
109
|
+
* if array applies to each input in order
|
|
110
|
+
*/
|
|
111
|
+
readOnly?: boolean | [] | any | undefined;
|
|
112
|
+
/**
|
|
113
|
+
* `true` to use the short version.
|
|
114
|
+
*/
|
|
115
|
+
short?: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* The value of the date value provided to flatpickr, could
|
|
118
|
+
* be a date, a date number, a date string, an array of dates.
|
|
119
|
+
*/
|
|
120
|
+
value?: string | number | (string | number | object)[] | object | undefined;
|
|
121
|
+
/**
|
|
122
|
+
* Specify whether the control is currently in warning state (Fluid only)
|
|
123
|
+
*/
|
|
124
|
+
warn?: boolean;
|
|
125
|
+
/**
|
|
126
|
+
* Provide the text that is displayed when the control is in warning state (Fluid only)
|
|
127
|
+
*/
|
|
128
|
+
warnText: ReactNodeLike;
|
|
129
|
+
}
|
|
130
|
+
declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
131
|
+
export default DatePicker;
|
|
@@ -36,6 +36,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
|
36
36
|
var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
|
|
37
37
|
var l10n__default = /*#__PURE__*/_interopDefaultLegacy(l10n);
|
|
38
38
|
|
|
39
|
+
// Weekdays shorthand for english locale
|
|
39
40
|
l10n__default["default"].en.weekdays.shorthand.forEach((_day, index) => {
|
|
40
41
|
const currentDay = l10n__default["default"].en.weekdays.shorthand;
|
|
41
42
|
|
|
@@ -195,26 +196,29 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
|
|
|
195
196
|
setHasInput(true);
|
|
196
197
|
}
|
|
197
198
|
}, []);
|
|
198
|
-
const endInputField = React.useRef(null);
|
|
199
199
|
const lastStartValue = React.useRef(''); // fix datepicker deleting the selectedDate when the calendar closes
|
|
200
200
|
|
|
201
201
|
const onCalendarClose = (selectedDates, dateStr) => {
|
|
202
202
|
setTimeout(() => {
|
|
203
203
|
if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
|
|
204
|
+
var _endInputField$curren;
|
|
205
|
+
|
|
204
206
|
startInputField.current.value = lastStartValue.current;
|
|
205
|
-
calendarRef.current.setDate([startInputField.current.value, endInputField.current.value], true, calendarRef.current.config.dateFormat);
|
|
207
|
+
calendarRef.current.setDate([startInputField.current.value, endInputField === null || endInputField === void 0 ? void 0 : (_endInputField$curren = endInputField.current) === null || _endInputField$curren === void 0 ? void 0 : _endInputField$curren.value], true, calendarRef.current.config.dateFormat);
|
|
206
208
|
}
|
|
207
209
|
|
|
208
210
|
if (onClose) {
|
|
209
211
|
onClose(calendarRef.current.selectedDates, dateStr, calendarRef.current);
|
|
210
212
|
}
|
|
211
213
|
});
|
|
212
|
-
};
|
|
214
|
+
}; //const savedOnOpen = useSavedCallback(onOpen);
|
|
215
|
+
|
|
213
216
|
|
|
217
|
+
const endInputField = React.useRef(null);
|
|
214
218
|
const calendarRef = React.useRef(null);
|
|
215
|
-
const savedOnChange = useSavedCallback.useSavedCallback(onChange);
|
|
219
|
+
const savedOnChange = useSavedCallback.useSavedCallback(() => onChange);
|
|
216
220
|
const savedOnClose = useSavedCallback.useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
|
|
217
|
-
const savedOnOpen = useSavedCallback.useSavedCallback(onOpen);
|
|
221
|
+
const savedOnOpen = useSavedCallback.useSavedCallback(() => onOpen);
|
|
218
222
|
const datePickerClasses = cx__default["default"](`${prefix}--date-picker`, {
|
|
219
223
|
[`${prefix}--date-picker--short`]: short,
|
|
220
224
|
[`${prefix}--date-picker--light`]: light,
|
|
@@ -224,7 +228,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
|
|
|
224
228
|
[`${prefix}--date-picker--nolabel`]: datePickerType === 'range' && isLabelTextEmpty(children)
|
|
225
229
|
});
|
|
226
230
|
const wrapperClasses = cx__default["default"](`${prefix}--form-item`, {
|
|
227
|
-
[className]: className
|
|
231
|
+
[String(className)]: className
|
|
228
232
|
});
|
|
229
233
|
const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => {
|
|
230
234
|
if (index === 0 && child.type === React__default["default"].createElement(DatePickerInput["default"], child.props).type) {
|
|
@@ -280,7 +284,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
|
|
|
280
284
|
// is provided, we return the default empty disabled array, allowing all dates.
|
|
281
285
|
|
|
282
286
|
|
|
283
|
-
|
|
287
|
+
const enableOrDisable = enable ? 'enable' : 'disable';
|
|
284
288
|
let enableOrDisableArr;
|
|
285
289
|
|
|
286
290
|
if (!enable && !disable) {
|
|
@@ -294,7 +298,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
|
|
|
294
298
|
let localeData;
|
|
295
299
|
|
|
296
300
|
if (typeof locale === 'object') {
|
|
297
|
-
|
|
301
|
+
const location = locale.locale ? locale.locale : 'en';
|
|
298
302
|
localeData = { ...l10n__default["default"][location],
|
|
299
303
|
...locale
|
|
300
304
|
};
|
|
@@ -308,7 +312,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
|
|
|
308
312
|
const {
|
|
309
313
|
current: end
|
|
310
314
|
} = endInputField;
|
|
311
|
-
const
|
|
315
|
+
const flatpickerconfig = {
|
|
312
316
|
inline: inline ?? false,
|
|
313
317
|
disableMobile: true,
|
|
314
318
|
defaultDate: value,
|
|
@@ -352,7 +356,8 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
|
|
|
352
356
|
savedOnOpen(...arguments);
|
|
353
357
|
},
|
|
354
358
|
onValueUpdate: onHook
|
|
355
|
-
}
|
|
359
|
+
};
|
|
360
|
+
const calendar = flatpickr__default["default"](start, flatpickerconfig);
|
|
356
361
|
calendarRef.current = calendar;
|
|
357
362
|
|
|
358
363
|
function handleArrowDown(event) {
|
|
@@ -740,6 +745,5 @@ DatePicker.propTypes = {
|
|
|
740
745
|
*/
|
|
741
746
|
warnText: PropTypes__default["default"].node
|
|
742
747
|
};
|
|
743
|
-
var DatePicker$1 = DatePicker;
|
|
744
748
|
|
|
745
|
-
exports["default"] = DatePicker
|
|
749
|
+
exports["default"] = DatePicker;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import DatePicker from './DatePicker';
|
|
8
|
+
export { default as DatePickerSkeleton, type DatePickerSkeletonProps, } from './DatePicker.Skeleton';
|
|
9
|
+
export default DatePicker;
|
|
10
|
+
export { DatePicker };
|
|
@@ -10,8 +10,10 @@
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
12
|
var DatePicker = require('./DatePicker.js');
|
|
13
|
+
var DatePicker_Skeleton = require('./DatePicker.Skeleton.js');
|
|
13
14
|
|
|
14
15
|
|
|
15
16
|
|
|
16
17
|
exports.DatePicker = DatePicker["default"];
|
|
17
18
|
exports["default"] = DatePicker["default"];
|
|
19
|
+
exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2023
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { ReactElementLike, ReactNodeArray } from 'prop-types';
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import { ReactAttr } from '../../types/common';
|
|
10
|
+
type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
|
|
11
|
+
export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
|
|
12
|
+
export type func = (...args: any[]) => any;
|
|
13
|
+
interface DatePickerInputProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
|
|
14
|
+
/**
|
|
15
|
+
* The type of the date picker:
|
|
16
|
+
*
|
|
17
|
+
* * `simple` - Without calendar dropdown.
|
|
18
|
+
* * `single` - With calendar dropdown and single date.
|
|
19
|
+
* * `range` - With calendar dropdown and a date range.
|
|
20
|
+
*/
|
|
21
|
+
datePickerType?: 'simple' | 'single' | 'range';
|
|
22
|
+
/**
|
|
23
|
+
* Specify whether or not the input should be disabled
|
|
24
|
+
*/
|
|
25
|
+
disabled?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Provide text that is used alongside the control label for additional help
|
|
28
|
+
*/
|
|
29
|
+
helperText?: ReactNodeLike;
|
|
30
|
+
/**
|
|
31
|
+
* Specify if the label should be hidden
|
|
32
|
+
*/
|
|
33
|
+
hideLabel?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Specify an id that uniquely identifies the `<input>`
|
|
36
|
+
*/
|
|
37
|
+
id: string;
|
|
38
|
+
/**
|
|
39
|
+
* Specify whether or not the input should be invalid
|
|
40
|
+
*/
|
|
41
|
+
invalid?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Specify the text to be rendered when the input is invalid
|
|
44
|
+
*/
|
|
45
|
+
invalidText: ReactNodeLike;
|
|
46
|
+
/**
|
|
47
|
+
* Provide the text that will be read by a screen reader when visiting this
|
|
48
|
+
* control
|
|
49
|
+
*/
|
|
50
|
+
labelText: ReactNodeLike;
|
|
51
|
+
/**
|
|
52
|
+
* Specify an `onChange` handler that is called whenever a change in the
|
|
53
|
+
* input field has occurred
|
|
54
|
+
*/
|
|
55
|
+
onChange?: func;
|
|
56
|
+
/**
|
|
57
|
+
* Provide a function to be called when the input field is clicked
|
|
58
|
+
*/
|
|
59
|
+
onClick?: func;
|
|
60
|
+
/**
|
|
61
|
+
* Provide a regular expression that the input value must match
|
|
62
|
+
* TODO:need to be rewritten
|
|
63
|
+
*/
|
|
64
|
+
pattern: (props: {
|
|
65
|
+
[key: string]: any;
|
|
66
|
+
}, propName: string, componentName: string) => null | any | Error;
|
|
67
|
+
/**
|
|
68
|
+
* Specify the placeholder text
|
|
69
|
+
*/
|
|
70
|
+
placeholder?: string;
|
|
71
|
+
/**
|
|
72
|
+
* whether the DatePicker is to be readOnly
|
|
73
|
+
*/
|
|
74
|
+
readOnly?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
|
|
77
|
+
*/
|
|
78
|
+
size?: 'sm' | 'md' | 'lg';
|
|
79
|
+
/**
|
|
80
|
+
* Specify the type of the `<input>`
|
|
81
|
+
*/
|
|
82
|
+
type?: string;
|
|
83
|
+
/**
|
|
84
|
+
* Specify whether the control is currently in warning state
|
|
85
|
+
*/
|
|
86
|
+
warn?: boolean;
|
|
87
|
+
/**
|
|
88
|
+
* Provide the text that is displayed when the control is in warning state
|
|
89
|
+
*/
|
|
90
|
+
warnText?: ReactNodeLike;
|
|
91
|
+
}
|
|
92
|
+
declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLDivElement>>;
|
|
93
|
+
export default DatePickerInput;
|
|
@@ -9,5 +9,6 @@ import { type SearchProps } from '../Search';
|
|
|
9
9
|
declare function ExpandableSearch({ onBlur, onChange, onExpand, onFocus, ...props }: SearchProps): JSX.Element;
|
|
10
10
|
declare namespace ExpandableSearch {
|
|
11
11
|
var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
|
|
12
|
+
var displayName: string;
|
|
12
13
|
}
|
|
13
14
|
export default ExpandableSearch;
|
|
@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
|
|
|
14
14
|
var React = require('react');
|
|
15
15
|
var cx = require('classnames');
|
|
16
16
|
var DatePicker = require('../DatePicker/DatePicker.js');
|
|
17
|
+
require('../DatePicker/DatePicker.Skeleton.js');
|
|
17
18
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
18
19
|
var FormContext = require('../FluidForm/FormContext.js');
|
|
19
20
|
|
|
@@ -385,6 +385,7 @@ class OverflowMenu extends React.Component {
|
|
|
385
385
|
onClick: this.handleClick,
|
|
386
386
|
id: id,
|
|
387
387
|
ref: mergeRefs["default"](this._triggerRef, ref),
|
|
388
|
+
size: size,
|
|
388
389
|
label: iconDescription
|
|
389
390
|
}), /*#__PURE__*/React__default["default"].createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
|
|
390
391
|
}
|
|
@@ -34,6 +34,7 @@ const SideNavHeader = _ref => {
|
|
|
34
34
|
}, /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), children);
|
|
35
35
|
};
|
|
36
36
|
|
|
37
|
+
SideNavHeader.displayName = 'SideNavHeader';
|
|
37
38
|
SideNavHeader.propTypes = {
|
|
38
39
|
/**
|
|
39
40
|
* The child nodes to be rendered
|
package/lib/index.js
CHANGED
|
@@ -15,6 +15,8 @@ var Checkbox_Skeleton = require('./components/Checkbox/Checkbox.Skeleton.js');
|
|
|
15
15
|
var index$4 = require('./components/ClassPrefix/index.js');
|
|
16
16
|
var index$5 = require('./components/ContentSwitcher/index.js');
|
|
17
17
|
require('./components/DataTable/index.js');
|
|
18
|
+
var DatePicker = require('./components/DatePicker/DatePicker.js');
|
|
19
|
+
var DatePicker_Skeleton = require('./components/DatePicker/DatePicker.Skeleton.js');
|
|
18
20
|
var Dropdown = require('./components/Dropdown/Dropdown.js');
|
|
19
21
|
var Dropdown_Skeleton = require('./components/Dropdown/Dropdown.Skeleton.js');
|
|
20
22
|
var FluidForm = require('./components/FluidForm/FluidForm.js');
|
|
@@ -153,8 +155,6 @@ var TableToolbarAction = require('./components/DataTable/TableToolbarAction.js')
|
|
|
153
155
|
var TableToolbarContent = require('./components/DataTable/TableToolbarContent.js');
|
|
154
156
|
var TableToolbarSearch = require('./components/DataTable/TableToolbarSearch.js');
|
|
155
157
|
var TableToolbarMenu = require('./components/DataTable/TableToolbarMenu.js');
|
|
156
|
-
var DatePicker_Skeleton = require('./components/DatePicker/DatePicker.Skeleton.js');
|
|
157
|
-
var DatePicker = require('./components/DatePicker/DatePicker.js');
|
|
158
158
|
var DatePickerInput = require('./components/DatePickerInput/DatePickerInput.js');
|
|
159
159
|
var ErrorBoundaryContext = require('./components/ErrorBoundary/ErrorBoundaryContext.js');
|
|
160
160
|
var FilterableMultiSelect = require('./components/MultiSelect/FilterableMultiSelect.js');
|
|
@@ -229,6 +229,8 @@ exports.Checkbox = Checkbox["default"];
|
|
|
229
229
|
exports.CheckboxSkeleton = Checkbox_Skeleton["default"];
|
|
230
230
|
exports.ClassPrefix = index$4.ClassPrefix;
|
|
231
231
|
exports.ContentSwitcher = index$5["default"];
|
|
232
|
+
exports.DatePicker = DatePicker["default"];
|
|
233
|
+
exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
|
|
232
234
|
exports.Dropdown = Dropdown["default"];
|
|
233
235
|
exports.DropdownSkeleton = Dropdown_Skeleton["default"];
|
|
234
236
|
exports.FluidForm = FluidForm["default"];
|
|
@@ -385,8 +387,6 @@ exports.TableToolbarAction = TableToolbarAction["default"];
|
|
|
385
387
|
exports.TableToolbarContent = TableToolbarContent["default"];
|
|
386
388
|
exports.TableToolbarSearch = TableToolbarSearch["default"];
|
|
387
389
|
exports.TableToolbarMenu = TableToolbarMenu["default"];
|
|
388
|
-
exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
|
|
389
|
-
exports.DatePicker = DatePicker["default"];
|
|
390
390
|
exports.DatePickerInput = DatePickerInput["default"];
|
|
391
391
|
exports.ErrorBoundaryContext = ErrorBoundaryContext.ErrorBoundaryContext;
|
|
392
392
|
exports.FilterableMultiSelect = FilterableMultiSelect["default"];
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/react",
|
|
3
3
|
"description": "React components for the Carbon Design System",
|
|
4
|
-
"version": "1.28.0
|
|
4
|
+
"version": "1.28.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@babel/runtime": "^7.18.3",
|
|
46
46
|
"@carbon/feature-flags": "^0.13.0",
|
|
47
|
-
"@carbon/icons-react": "^11.19.0
|
|
47
|
+
"@carbon/icons-react": "^11.19.0",
|
|
48
48
|
"@carbon/layout": "^11.13.0",
|
|
49
|
-
"@carbon/styles": "^1.28.0
|
|
49
|
+
"@carbon/styles": "^1.28.0",
|
|
50
50
|
"@carbon/telemetry": "0.1.0",
|
|
51
51
|
"classnames": "2.3.2",
|
|
52
52
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -92,9 +92,9 @@
|
|
|
92
92
|
"autoprefixer": "^10.4.0",
|
|
93
93
|
"babel-loader": "^9.0.0",
|
|
94
94
|
"babel-plugin-dev-expression": "^0.2.3",
|
|
95
|
-
"babel-preset-carbon": "^0.5.0
|
|
95
|
+
"babel-preset-carbon": "^0.5.0",
|
|
96
96
|
"browserify-zlib": "^0.2.0",
|
|
97
|
-
"browserslist-config-carbon": "^11.2.0
|
|
97
|
+
"browserslist-config-carbon": "^11.2.0",
|
|
98
98
|
"clipboardy": "^2.1.0",
|
|
99
99
|
"css-loader": "^6.5.1",
|
|
100
100
|
"enquirer": "^2.3.6",
|
|
@@ -133,5 +133,5 @@
|
|
|
133
133
|
"**/*.scss",
|
|
134
134
|
"**/*.css"
|
|
135
135
|
],
|
|
136
|
-
"gitHead": "
|
|
136
|
+
"gitHead": "75f69e49161bf54184d4392c3d48115f852dc8fc"
|
|
137
137
|
}
|