@carbon/react 1.28.0-rc.0 → 1.29.0-rc.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/Checkbox/Checkbox.d.ts +2 -2
- 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/Heading/index.d.ts +51 -0
- package/es/components/Heading/index.js +5 -9
- package/es/components/OverflowMenu/OverflowMenu.js +1 -0
- package/es/components/StructuredList/StructuredList.Skeleton.js +2 -10
- package/es/components/StructuredList/StructuredList.js +2 -2
- package/es/components/Theme/index.d.ts +62 -0
- package/es/components/Theme/index.js +4 -4
- package/es/components/UIShell/HeaderContainer.js +8 -0
- package/es/components/UIShell/HeaderMenuButton.d.ts +38 -0
- package/es/components/UIShell/HeaderMenuButton.js +7 -12
- package/es/components/UIShell/HeaderNavigation.d.ts +24 -0
- package/es/components/UIShell/HeaderNavigation.js +8 -13
- package/es/components/UIShell/HeaderSideNavItems.d.ts +33 -0
- package/es/components/UIShell/HeaderSideNavItems.js +4 -9
- package/es/components/UIShell/SideNav.d.ts +21 -0
- package/es/components/UIShell/SideNav.js +37 -38
- 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 +3 -3
- package/es/internal/useEvent.js +20 -1
- package/es/types/common.d.ts +11 -0
- package/lib/components/Checkbox/Checkbox.d.ts +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/Heading/index.d.ts +51 -0
- package/lib/components/Heading/index.js +5 -9
- package/lib/components/OverflowMenu/OverflowMenu.js +1 -0
- package/lib/components/StructuredList/StructuredList.Skeleton.js +2 -10
- package/lib/components/StructuredList/StructuredList.js +2 -2
- package/lib/components/Theme/index.d.ts +62 -0
- package/lib/components/Theme/index.js +4 -4
- package/lib/components/UIShell/HeaderContainer.js +8 -0
- package/lib/components/UIShell/HeaderMenuButton.d.ts +38 -0
- package/lib/components/UIShell/HeaderMenuButton.js +7 -12
- package/lib/components/UIShell/HeaderNavigation.d.ts +24 -0
- package/lib/components/UIShell/HeaderNavigation.js +7 -13
- package/lib/components/UIShell/HeaderSideNavItems.d.ts +33 -0
- package/lib/components/UIShell/HeaderSideNavItems.js +4 -9
- package/lib/components/UIShell/SideNav.d.ts +21 -0
- package/lib/components/UIShell/SideNav.js +36 -37
- 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 +6 -6
- package/lib/internal/useEvent.js +20 -0
- package/lib/types/common.d.ts +11 -0
- package/package.json +7 -7
|
@@ -44,7 +44,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
44
44
|
/**
|
|
45
45
|
* Provide the text that is displayed when the Checkbox is in an invalid state
|
|
46
46
|
*/
|
|
47
|
-
invalidText
|
|
47
|
+
invalidText?: React.ReactNode;
|
|
48
48
|
/**
|
|
49
49
|
* Specify whether the Checkbox is currently invalid
|
|
50
50
|
*/
|
|
@@ -52,7 +52,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
52
52
|
/**
|
|
53
53
|
* Provide the text that is displayed when the Checkbox is in an invalid state
|
|
54
54
|
*/
|
|
55
|
-
warnText
|
|
55
|
+
warnText?: React.ReactNode;
|
|
56
56
|
/**
|
|
57
57
|
* Provide an optional handler that is called when the internal state of
|
|
58
58
|
* Checkbox changes. This handler is called with event and state info.
|
|
@@ -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
|
|
|
@@ -0,0 +1,51 @@
|
|
|
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 ElementType } from 'react';
|
|
9
|
+
import type { PolymorphicProps } from '../../types/common';
|
|
10
|
+
type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
11
|
+
type SectionBaseProps = {
|
|
12
|
+
level?: HeadingLevel;
|
|
13
|
+
};
|
|
14
|
+
type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
|
|
15
|
+
export declare function Section<E extends ElementType = 'section'>({ as: BaseComponent, level: levelOverride, ...rest }: SectionProps<E>): JSX.Element;
|
|
16
|
+
export declare namespace Section {
|
|
17
|
+
var propTypes: {
|
|
18
|
+
/**
|
|
19
|
+
* Provide an alternative tag or component to use instead of the default
|
|
20
|
+
* <section> element
|
|
21
|
+
*/
|
|
22
|
+
as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
|
|
23
|
+
/**
|
|
24
|
+
* Specify the content that will be placed in the component
|
|
25
|
+
*/
|
|
26
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
27
|
+
/**
|
|
28
|
+
* Specify a class name for the outermost node of the component
|
|
29
|
+
*/
|
|
30
|
+
className: PropTypes.Requireable<string>;
|
|
31
|
+
/**
|
|
32
|
+
* Overrides the level of the section
|
|
33
|
+
*/
|
|
34
|
+
level: PropTypes.Requireable<number>;
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
type HeadingProps = JSX.IntrinsicElements[`h${HeadingLevel}`];
|
|
38
|
+
export declare function Heading(props: HeadingProps): JSX.Element;
|
|
39
|
+
export declare namespace Heading {
|
|
40
|
+
var propTypes: {
|
|
41
|
+
/**
|
|
42
|
+
* Specify the content that will be placed in the component
|
|
43
|
+
*/
|
|
44
|
+
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
45
|
+
/**
|
|
46
|
+
* Specify a class name for the outermost node of the component
|
|
47
|
+
*/
|
|
48
|
+
className: PropTypes.Requireable<string>;
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
export {};
|
|
@@ -9,21 +9,19 @@ import PropTypes from 'prop-types';
|
|
|
9
9
|
import React__default from 'react';
|
|
10
10
|
|
|
11
11
|
const HeadingContext = /*#__PURE__*/React__default.createContext(1);
|
|
12
|
-
|
|
13
12
|
function Section(_ref) {
|
|
14
13
|
let {
|
|
15
14
|
as: BaseComponent = 'section',
|
|
16
15
|
level: levelOverride,
|
|
17
|
-
children,
|
|
18
16
|
...rest
|
|
19
17
|
} = _ref;
|
|
20
18
|
const parentLevel = React__default.useContext(HeadingContext);
|
|
21
|
-
const level =
|
|
19
|
+
const level = levelOverride ?? parentLevel + 1;
|
|
20
|
+
const BaseComponentAsAny = BaseComponent;
|
|
22
21
|
return /*#__PURE__*/React__default.createElement(HeadingContext.Provider, {
|
|
23
22
|
value: Math.min(level, 6)
|
|
24
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
23
|
+
}, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, rest));
|
|
25
24
|
}
|
|
26
|
-
|
|
27
25
|
Section.propTypes = {
|
|
28
26
|
/**
|
|
29
27
|
* Provide an alternative tag or component to use instead of the default
|
|
@@ -46,12 +44,10 @@ Section.propTypes = {
|
|
|
46
44
|
*/
|
|
47
45
|
level: PropTypes.number
|
|
48
46
|
};
|
|
49
|
-
|
|
50
47
|
function Heading(props) {
|
|
51
|
-
const
|
|
52
|
-
return /*#__PURE__*/React__default.createElement(
|
|
48
|
+
const HeadingIntrinsic = `h${React__default.useContext(HeadingContext)}`;
|
|
49
|
+
return /*#__PURE__*/React__default.createElement(HeadingIntrinsic, props);
|
|
53
50
|
}
|
|
54
|
-
|
|
55
51
|
Heading.propTypes = {
|
|
56
52
|
/**
|
|
57
53
|
* Specify the content that will be placed in the component
|
|
@@ -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
|
}
|