@carbon/react 1.70.0-rc.0 → 1.70.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/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +829 -829
- package/es/components/CheckboxGroup/CheckboxGroup.js +1 -1
- package/es/components/ComboBox/ComboBox.js +16 -8
- package/es/components/ComposedModal/ComposedModal.js +6 -2
- package/es/components/DataTable/Table.d.ts +9 -1
- package/es/components/DataTable/Table.js +7 -2
- package/es/components/DatePicker/DatePicker.js +0 -8
- package/es/components/DatePicker/plugins/appendToPlugin.js +2 -2
- package/es/components/DatePicker/plugins/fixEventsPlugin.js +2 -2
- package/es/components/DatePicker/plugins/rangePlugin.js +2 -2
- package/es/components/OverflowMenu/OverflowMenu.js +1 -1
- package/es/components/Pagination/Pagination.js +1 -1
- package/es/components/Pagination/experimental/PageSelector.js +1 -1
- package/es/components/Popover/index.js +2 -2
- package/es/components/SkeletonText/SkeletonText.js +1 -1
- package/es/components/TreeView/TreeNode.js +1 -1
- package/es/components/TreeView/TreeView.js +1 -1
- package/es/components/UIShell/HeaderMenu.js +1 -1
- package/es/components/UIShell/SideNav.js +1 -1
- package/es/components/UIShell/SideNavItems.js +1 -1
- package/es/components/UIShell/SideNavMenu.js +1 -1
- package/es/components/UIShell/Switcher.js +1 -1
- package/lib/components/CheckboxGroup/CheckboxGroup.js +1 -1
- package/lib/components/ComboBox/ComboBox.js +17 -8
- package/lib/components/ComposedModal/ComposedModal.js +6 -2
- package/lib/components/DataTable/Table.d.ts +9 -1
- package/lib/components/DataTable/Table.js +7 -2
- package/lib/components/DatePicker/DatePicker.js +0 -8
- package/lib/components/DatePicker/plugins/appendToPlugin.js +2 -2
- package/lib/components/DatePicker/plugins/fixEventsPlugin.js +2 -2
- package/lib/components/DatePicker/plugins/rangePlugin.js +2 -2
- package/lib/components/OverflowMenu/OverflowMenu.js +1 -1
- package/lib/components/Pagination/Pagination.js +1 -1
- package/lib/components/Pagination/experimental/PageSelector.js +1 -1
- package/lib/components/Popover/index.js +2 -2
- package/lib/components/SkeletonText/SkeletonText.js +1 -1
- package/lib/components/TreeView/TreeNode.js +1 -1
- package/lib/components/TreeView/TreeView.js +1 -1
- package/lib/components/UIShell/HeaderMenu.js +1 -1
- package/lib/components/UIShell/SideNav.js +1 -1
- package/lib/components/UIShell/SideNavItems.js +1 -1
- package/lib/components/UIShell/SideNavMenu.js +1 -1
- package/lib/components/UIShell/Switcher.js +1 -1
- package/package.json +4 -4
|
@@ -48,7 +48,7 @@ const CheckboxGroup = _ref => {
|
|
|
48
48
|
|
|
49
49
|
// Slug is always size `mini`
|
|
50
50
|
let normalizedSlug;
|
|
51
|
-
if (
|
|
51
|
+
if (/*#__PURE__*/React__default.isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
|
|
52
52
|
normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
|
|
53
53
|
size: 'mini',
|
|
54
54
|
kind: 'default'
|
|
@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
|
|
|
12
12
|
import React__default, { forwardRef, useRef, useEffect, useState, useContext, useCallback, useMemo } from 'react';
|
|
13
13
|
import '../Text/index.js';
|
|
14
14
|
import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
|
|
15
|
+
import isEqual from 'react-fast-compare';
|
|
15
16
|
import ListBox from '../ListBox/index.js';
|
|
16
17
|
import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
|
|
17
18
|
import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
|
|
@@ -225,11 +226,15 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
225
226
|
selectedItem: selectedItemProp,
|
|
226
227
|
prevSelectedItem: prevSelectedItemProp.current
|
|
227
228
|
});
|
|
228
|
-
|
|
229
|
-
onChange
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
229
|
+
|
|
230
|
+
// selectedItem has been updated externally, need to update state and call onChange
|
|
231
|
+
if (inputValue !== currentInputValue) {
|
|
232
|
+
setInputValue(currentInputValue);
|
|
233
|
+
onChange({
|
|
234
|
+
selectedItem: selectedItemProp,
|
|
235
|
+
inputValue: currentInputValue
|
|
236
|
+
});
|
|
237
|
+
}
|
|
233
238
|
prevSelectedItemProp.current = selectedItemProp;
|
|
234
239
|
}
|
|
235
240
|
}, [selectedItemProp]);
|
|
@@ -443,9 +448,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
443
448
|
let {
|
|
444
449
|
selectedItem
|
|
445
450
|
} = _ref5;
|
|
446
|
-
onChange
|
|
447
|
-
|
|
448
|
-
|
|
451
|
+
// only call onChange if new selection is updated from previous
|
|
452
|
+
if (!isEqual(selectedItem, selectedItemProp)) {
|
|
453
|
+
onChange({
|
|
454
|
+
selectedItem
|
|
455
|
+
});
|
|
456
|
+
}
|
|
449
457
|
},
|
|
450
458
|
onHighlightedIndexChange: _ref6 => {
|
|
451
459
|
let {
|
|
@@ -210,7 +210,8 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
|
|
|
210
210
|
const el = child;
|
|
211
211
|
return /*#__PURE__*/React__default.cloneElement(el, {
|
|
212
212
|
closeModal,
|
|
213
|
-
inputref: button
|
|
213
|
+
inputref: button,
|
|
214
|
+
danger
|
|
214
215
|
});
|
|
215
216
|
}
|
|
216
217
|
default:
|
|
@@ -227,7 +228,7 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
|
|
|
227
228
|
useEffect(() => {
|
|
228
229
|
const initialFocus = focusContainerElement => {
|
|
229
230
|
const containerElement = focusContainerElement || innerModal.current;
|
|
230
|
-
const primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
|
|
231
|
+
const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
|
|
231
232
|
if (primaryFocusElement) {
|
|
232
233
|
return primaryFocusElement;
|
|
233
234
|
}
|
|
@@ -235,8 +236,11 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
|
|
|
235
236
|
};
|
|
236
237
|
const focusButton = focusContainerElement => {
|
|
237
238
|
const target = initialFocus(focusContainerElement);
|
|
239
|
+
const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
|
|
238
240
|
if (target) {
|
|
239
241
|
target.focus();
|
|
242
|
+
} else if (!target && closeButton) {
|
|
243
|
+
closeButton?.focus();
|
|
240
244
|
}
|
|
241
245
|
};
|
|
242
246
|
if (open && isOpen) {
|
|
@@ -33,9 +33,13 @@ interface TableProps {
|
|
|
33
33
|
* `true` to add useZebraStyles striping.
|
|
34
34
|
*/
|
|
35
35
|
useZebraStyles?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Specify the table tabIndex
|
|
38
|
+
*/
|
|
39
|
+
tabIndex?: number;
|
|
36
40
|
}
|
|
37
41
|
export declare const Table: {
|
|
38
|
-
({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
|
|
39
43
|
propTypes: {
|
|
40
44
|
/**
|
|
41
45
|
* Pass in the children that will be rendered within the Table
|
|
@@ -70,6 +74,10 @@ export declare const Table: {
|
|
|
70
74
|
* `true` to add useZebraStyles striping.
|
|
71
75
|
*/
|
|
72
76
|
useZebraStyles: PropTypes.Requireable<boolean>;
|
|
77
|
+
/**
|
|
78
|
+
* Specify the table tabIndex
|
|
79
|
+
*/
|
|
80
|
+
tabIndex: PropTypes.Requireable<number>;
|
|
73
81
|
};
|
|
74
82
|
};
|
|
75
83
|
export default Table;
|
|
@@ -54,6 +54,7 @@ const Table = _ref => {
|
|
|
54
54
|
stickyHeader,
|
|
55
55
|
overflowMenuOnHover = true,
|
|
56
56
|
experimentalAutoAlign = false,
|
|
57
|
+
tabIndex,
|
|
57
58
|
...other
|
|
58
59
|
} = _ref;
|
|
59
60
|
const {
|
|
@@ -129,7 +130,7 @@ const Table = _ref => {
|
|
|
129
130
|
className: `${prefix}--data-table-content`
|
|
130
131
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
131
132
|
,
|
|
132
|
-
tabIndex: isScrollable ? 0 : undefined
|
|
133
|
+
tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
|
|
133
134
|
}, /*#__PURE__*/React__default.createElement("table", _extends({
|
|
134
135
|
"aria-labelledby": titleId,
|
|
135
136
|
"aria-describedby": descriptionId
|
|
@@ -174,7 +175,11 @@ Table.propTypes = {
|
|
|
174
175
|
/**
|
|
175
176
|
* `true` to add useZebraStyles striping.
|
|
176
177
|
*/
|
|
177
|
-
useZebraStyles: PropTypes.bool
|
|
178
|
+
useZebraStyles: PropTypes.bool,
|
|
179
|
+
/**
|
|
180
|
+
* Specify the table tabIndex
|
|
181
|
+
*/
|
|
182
|
+
tabIndex: PropTypes.number
|
|
178
183
|
};
|
|
179
184
|
|
|
180
185
|
export { Table, Table as default };
|
|
@@ -530,9 +530,6 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
|
|
|
530
530
|
const closeCalendar = event => {
|
|
531
531
|
calendarRef.current.close();
|
|
532
532
|
// Remove focus from endDate calendar input
|
|
533
|
-
if (document.activeElement instanceof HTMLElement) {
|
|
534
|
-
document.activeElement.blur();
|
|
535
|
-
}
|
|
536
533
|
onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
|
|
537
534
|
type: 'clickOutside'
|
|
538
535
|
});
|
|
@@ -558,12 +555,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
|
|
|
558
555
|
if (!calendarRef.current || !startInputField.current) return;
|
|
559
556
|
const handleKeyDown = event => {
|
|
560
557
|
if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
|
|
561
|
-
event.preventDefault();
|
|
562
558
|
calendarRef.current.close();
|
|
563
|
-
// Remove focus from endDate calendar input
|
|
564
|
-
document.activeElement instanceof HTMLElement &&
|
|
565
|
-
// this is to fix the TS warning
|
|
566
|
-
document?.activeElement?.blur();
|
|
567
559
|
onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
|
|
568
560
|
}
|
|
569
561
|
};
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
* @param {object} config Plugin configuration.
|
|
10
10
|
* @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
|
|
11
11
|
*/
|
|
12
|
-
var carbonFlatpickrAppendToPlugin =
|
|
12
|
+
var carbonFlatpickrAppendToPlugin = config => fp => {
|
|
13
13
|
/**
|
|
14
14
|
* Adjusts the floating menu position after Flatpicker sets it.
|
|
15
15
|
*/
|
|
@@ -51,6 +51,6 @@ var carbonFlatpickrAppendToPlugin = (config => fp => {
|
|
|
51
51
|
onReady: register,
|
|
52
52
|
onPreCalendarPosition: handlePreCalendarPosition
|
|
53
53
|
};
|
|
54
|
-
}
|
|
54
|
+
};
|
|
55
55
|
|
|
56
56
|
export { carbonFlatpickrAppendToPlugin as default };
|
|
@@ -12,7 +12,7 @@ import { Enter, ArrowLeft, ArrowRight, ArrowDown } from '../../../internal/keybo
|
|
|
12
12
|
* @param {object} config Plugin configuration.
|
|
13
13
|
* @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
|
|
14
14
|
*/
|
|
15
|
-
var carbonFlatpickrFixEventsPlugin =
|
|
15
|
+
var carbonFlatpickrFixEventsPlugin = config => fp => {
|
|
16
16
|
const {
|
|
17
17
|
inputFrom,
|
|
18
18
|
inputTo,
|
|
@@ -150,6 +150,6 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
|
|
|
150
150
|
onReady: [register, init],
|
|
151
151
|
onDestroy: [release]
|
|
152
152
|
};
|
|
153
|
-
}
|
|
153
|
+
};
|
|
154
154
|
|
|
155
155
|
export { carbonFlatpickrFixEventsPlugin as default };
|
|
@@ -14,7 +14,7 @@ import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
|
|
|
14
14
|
* Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
|
|
15
15
|
* * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
|
|
16
16
|
*/
|
|
17
|
-
var carbonFlatpickrRangePlugin =
|
|
17
|
+
var carbonFlatpickrRangePlugin = config => {
|
|
18
18
|
const factory = rangePlugin(Object.assign({
|
|
19
19
|
position: 'left'
|
|
20
20
|
}, config));
|
|
@@ -49,6 +49,6 @@ var carbonFlatpickrRangePlugin = (config => {
|
|
|
49
49
|
onPreCalendarPosition() {}
|
|
50
50
|
});
|
|
51
51
|
};
|
|
52
|
-
}
|
|
52
|
+
};
|
|
53
53
|
|
|
54
54
|
export { carbonFlatpickrRangePlugin as default };
|
|
@@ -206,7 +206,7 @@ class OverflowMenu extends React__default.Component {
|
|
|
206
206
|
direction
|
|
207
207
|
} = _ref;
|
|
208
208
|
const enabledIndices = React__default.Children.toArray(this.props.children).reduce((acc, curr, i) => {
|
|
209
|
-
if (
|
|
209
|
+
if (/*#__PURE__*/React__default.isValidElement(curr) && !curr.props.disabled) {
|
|
210
210
|
acc.push(i);
|
|
211
211
|
}
|
|
212
212
|
return acc;
|
|
@@ -29,7 +29,7 @@ function renderSelectItems(total) {
|
|
|
29
29
|
let counter = 1;
|
|
30
30
|
const itemArr = [];
|
|
31
31
|
while (counter <= total) {
|
|
32
|
-
itemArr.push(
|
|
32
|
+
itemArr.push(/*#__PURE__*/React__default.createElement(SelectItem, {
|
|
33
33
|
key: counter,
|
|
34
34
|
value: counter,
|
|
35
35
|
text: String(counter)
|
|
@@ -30,7 +30,7 @@ function PageSelector(_ref) {
|
|
|
30
30
|
const renderPages = total => {
|
|
31
31
|
const pages = [];
|
|
32
32
|
for (let counter = 1; counter <= total; counter += 1) {
|
|
33
|
-
pages.push(
|
|
33
|
+
pages.push(/*#__PURE__*/React__default.createElement(SelectItem, {
|
|
34
34
|
key: counter,
|
|
35
35
|
value: counter,
|
|
36
36
|
text: String(counter)
|
|
@@ -213,7 +213,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
|
|
|
213
213
|
const isTriggerElement = item?.type === 'button';
|
|
214
214
|
const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
|
|
215
215
|
const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
|
|
216
|
-
if (
|
|
216
|
+
if (/*#__PURE__*/React__default.isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
|
|
217
217
|
const className = item?.props?.className;
|
|
218
218
|
const ref = (item?.props).ref;
|
|
219
219
|
const tabTipClasses = cx(`${prefix}--popover--tab-tip__button`, className);
|
|
@@ -336,7 +336,7 @@ Popover.propTypes = {
|
|
|
336
336
|
*/
|
|
337
337
|
open: PropTypes.bool.isRequired
|
|
338
338
|
};
|
|
339
|
-
function PopoverContentRenderFunction(
|
|
339
|
+
function PopoverContentRenderFunction(// eslint-disable-next-line react/prop-types
|
|
340
340
|
_ref2, forwardRef) {
|
|
341
341
|
let {
|
|
342
342
|
className,
|
|
@@ -56,7 +56,7 @@ const SkeletonText = _ref => {
|
|
|
56
56
|
}, [lineCountNumber, paragraph, refs, width, widthNum, widthPercent, widthPx]);
|
|
57
57
|
const lines = [];
|
|
58
58
|
for (let i = 0; i < lineCountNumber; i++) {
|
|
59
|
-
lines.push(
|
|
59
|
+
lines.push(/*#__PURE__*/React__default.createElement("p", _extends({
|
|
60
60
|
className: skeletonTextClasses,
|
|
61
61
|
key: i,
|
|
62
62
|
ref: el => refs.current = [...refs.current, el]
|
|
@@ -63,7 +63,7 @@ const TreeNode = /*#__PURE__*/React__default.forwardRef((_ref, forwardedRef) =>
|
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
65
|
const nodesWithProps = React__default.Children.map(children, node => {
|
|
66
|
-
if (
|
|
66
|
+
if (/*#__PURE__*/React__default.isValidElement(node)) {
|
|
67
67
|
return /*#__PURE__*/React__default.cloneElement(node, {
|
|
68
68
|
active,
|
|
69
69
|
depth: depth + 1,
|
|
@@ -121,7 +121,7 @@ const TreeView = _ref => {
|
|
|
121
121
|
sharedNodeProps.tabIndex = 0;
|
|
122
122
|
focusTarget = true;
|
|
123
123
|
}
|
|
124
|
-
if (
|
|
124
|
+
if (/*#__PURE__*/React__default.isValidElement(node)) {
|
|
125
125
|
return /*#__PURE__*/React__default.cloneElement(node, sharedNodeProps);
|
|
126
126
|
}
|
|
127
127
|
});
|
|
@@ -124,7 +124,7 @@ class HeaderMenu extends React__default.Component {
|
|
|
124
124
|
* sequence when they might not want to go through all the items.
|
|
125
125
|
*/
|
|
126
126
|
_defineProperty(this, "_renderMenuItem", (item, index) => {
|
|
127
|
-
if (
|
|
127
|
+
if (/*#__PURE__*/React__default.isValidElement(item)) {
|
|
128
128
|
return /*#__PURE__*/React__default.cloneElement(item, {
|
|
129
129
|
ref: this.handleItemRef(index)
|
|
130
130
|
});
|
|
@@ -96,7 +96,7 @@ function SideNavRenderFunction(_ref, ref) {
|
|
|
96
96
|
childrenToRender = React__default.Children.map(children, child => {
|
|
97
97
|
// if we are controlled, check for if we have hovered over or the expanded state, else just use the expanded state (uncontrolled)
|
|
98
98
|
const currentExpansionState = controlled ? expandedViaHoverState || expanded : expanded;
|
|
99
|
-
if (
|
|
99
|
+
if (/*#__PURE__*/isValidElement(child)) {
|
|
100
100
|
const childJsxElement = child;
|
|
101
101
|
// avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
|
|
102
102
|
return /*#__PURE__*/React__default.cloneElement(childJsxElement, {
|
|
@@ -20,7 +20,7 @@ const SideNavItems = _ref => {
|
|
|
20
20
|
const prefix = usePrefix();
|
|
21
21
|
const className = cx([`${prefix}--side-nav__items`], customClassName);
|
|
22
22
|
const childrenWithExpandedState = React__default.Children.map(children, child => {
|
|
23
|
-
if (
|
|
23
|
+
if (/*#__PURE__*/React__default.isValidElement(child)) {
|
|
24
24
|
// avoid spreading `isSideNavExpanded` to non-Carbon UI Shell children
|
|
25
25
|
const childDisplayName = child.type?.displayName;
|
|
26
26
|
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
@@ -148,7 +148,7 @@ function hasActiveDescendant(children) {
|
|
|
148
148
|
|
|
149
149
|
// We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
|
|
150
150
|
|
|
151
|
-
if (
|
|
151
|
+
if (/*#__PURE__*/React__default.isValidElement(children)) {
|
|
152
152
|
const props = children.props;
|
|
153
153
|
if (props.isActive === true || props['aria-current']) {
|
|
154
154
|
return true;
|
|
@@ -62,7 +62,7 @@ const Switcher = /*#__PURE__*/forwardRef(function Switcher(props, forwardRef) {
|
|
|
62
62
|
};
|
|
63
63
|
const childrenWithProps = React__default.Children.toArray(children).map((child, index) => {
|
|
64
64
|
// only setup click handlers if onChange event is passed
|
|
65
|
-
if (
|
|
65
|
+
if (/*#__PURE__*/React__default.isValidElement(child) && child.type && getDisplayName(child.type) === 'Switcher') {
|
|
66
66
|
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
67
67
|
handleSwitcherItemFocus,
|
|
68
68
|
index,
|
|
@@ -58,7 +58,7 @@ const CheckboxGroup = _ref => {
|
|
|
58
58
|
|
|
59
59
|
// Slug is always size `mini`
|
|
60
60
|
let normalizedSlug;
|
|
61
|
-
if (
|
|
61
|
+
if (/*#__PURE__*/React__default["default"].isValidElement(slug) && slug['type']?.displayName === 'AILabel') {
|
|
62
62
|
normalizedSlug = /*#__PURE__*/React__default["default"].cloneElement(slug, {
|
|
63
63
|
size: 'mini',
|
|
64
64
|
kind: 'default'
|
|
@@ -16,6 +16,7 @@ var PropTypes = require('prop-types');
|
|
|
16
16
|
var React = require('react');
|
|
17
17
|
require('../Text/index.js');
|
|
18
18
|
var iconsReact = require('@carbon/icons-react');
|
|
19
|
+
var isEqual = require('react-fast-compare');
|
|
19
20
|
var index$1 = require('../ListBox/index.js');
|
|
20
21
|
var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
|
|
21
22
|
var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
|
|
@@ -38,6 +39,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
38
39
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
39
40
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
40
41
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
42
|
+
var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
|
|
41
43
|
|
|
42
44
|
const {
|
|
43
45
|
InputBlur,
|
|
@@ -235,11 +237,15 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
235
237
|
selectedItem: selectedItemProp,
|
|
236
238
|
prevSelectedItem: prevSelectedItemProp.current
|
|
237
239
|
});
|
|
238
|
-
|
|
239
|
-
onChange
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
240
|
+
|
|
241
|
+
// selectedItem has been updated externally, need to update state and call onChange
|
|
242
|
+
if (inputValue !== currentInputValue) {
|
|
243
|
+
setInputValue(currentInputValue);
|
|
244
|
+
onChange({
|
|
245
|
+
selectedItem: selectedItemProp,
|
|
246
|
+
inputValue: currentInputValue
|
|
247
|
+
});
|
|
248
|
+
}
|
|
243
249
|
prevSelectedItemProp.current = selectedItemProp;
|
|
244
250
|
}
|
|
245
251
|
}, [selectedItemProp]);
|
|
@@ -453,9 +459,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
453
459
|
let {
|
|
454
460
|
selectedItem
|
|
455
461
|
} = _ref5;
|
|
456
|
-
onChange
|
|
457
|
-
|
|
458
|
-
|
|
462
|
+
// only call onChange if new selection is updated from previous
|
|
463
|
+
if (!isEqual__default["default"](selectedItem, selectedItemProp)) {
|
|
464
|
+
onChange({
|
|
465
|
+
selectedItem
|
|
466
|
+
});
|
|
467
|
+
}
|
|
459
468
|
},
|
|
460
469
|
onHighlightedIndexChange: _ref6 => {
|
|
461
470
|
let {
|
|
@@ -221,7 +221,8 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
221
221
|
const el = child;
|
|
222
222
|
return /*#__PURE__*/React__default["default"].cloneElement(el, {
|
|
223
223
|
closeModal,
|
|
224
|
-
inputref: button
|
|
224
|
+
inputref: button,
|
|
225
|
+
danger
|
|
225
226
|
});
|
|
226
227
|
}
|
|
227
228
|
default:
|
|
@@ -238,7 +239,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
238
239
|
React.useEffect(() => {
|
|
239
240
|
const initialFocus = focusContainerElement => {
|
|
240
241
|
const containerElement = focusContainerElement || innerModal.current;
|
|
241
|
-
const primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
|
|
242
|
+
const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
|
|
242
243
|
if (primaryFocusElement) {
|
|
243
244
|
return primaryFocusElement;
|
|
244
245
|
}
|
|
@@ -246,8 +247,11 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
246
247
|
};
|
|
247
248
|
const focusButton = focusContainerElement => {
|
|
248
249
|
const target = initialFocus(focusContainerElement);
|
|
250
|
+
const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
|
|
249
251
|
if (target) {
|
|
250
252
|
target.focus();
|
|
253
|
+
} else if (!target && closeButton) {
|
|
254
|
+
closeButton?.focus();
|
|
251
255
|
}
|
|
252
256
|
};
|
|
253
257
|
if (open && isOpen) {
|
|
@@ -33,9 +33,13 @@ interface TableProps {
|
|
|
33
33
|
* `true` to add useZebraStyles striping.
|
|
34
34
|
*/
|
|
35
35
|
useZebraStyles?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Specify the table tabIndex
|
|
38
|
+
*/
|
|
39
|
+
tabIndex?: number;
|
|
36
40
|
}
|
|
37
41
|
export declare const Table: {
|
|
38
|
-
({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
|
|
39
43
|
propTypes: {
|
|
40
44
|
/**
|
|
41
45
|
* Pass in the children that will be rendered within the Table
|
|
@@ -70,6 +74,10 @@ export declare const Table: {
|
|
|
70
74
|
* `true` to add useZebraStyles striping.
|
|
71
75
|
*/
|
|
72
76
|
useZebraStyles: PropTypes.Requireable<boolean>;
|
|
77
|
+
/**
|
|
78
|
+
* Specify the table tabIndex
|
|
79
|
+
*/
|
|
80
|
+
tabIndex: PropTypes.Requireable<number>;
|
|
73
81
|
};
|
|
74
82
|
};
|
|
75
83
|
export default Table;
|
|
@@ -65,6 +65,7 @@ const Table = _ref => {
|
|
|
65
65
|
stickyHeader,
|
|
66
66
|
overflowMenuOnHover = true,
|
|
67
67
|
experimentalAutoAlign = false,
|
|
68
|
+
tabIndex,
|
|
68
69
|
...other
|
|
69
70
|
} = _ref;
|
|
70
71
|
const {
|
|
@@ -140,7 +141,7 @@ const Table = _ref => {
|
|
|
140
141
|
className: `${prefix}--data-table-content`
|
|
141
142
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
142
143
|
,
|
|
143
|
-
tabIndex: isScrollable ? 0 : undefined
|
|
144
|
+
tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
|
|
144
145
|
}, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({
|
|
145
146
|
"aria-labelledby": titleId,
|
|
146
147
|
"aria-describedby": descriptionId
|
|
@@ -185,7 +186,11 @@ Table.propTypes = {
|
|
|
185
186
|
/**
|
|
186
187
|
* `true` to add useZebraStyles striping.
|
|
187
188
|
*/
|
|
188
|
-
useZebraStyles: PropTypes__default["default"].bool
|
|
189
|
+
useZebraStyles: PropTypes__default["default"].bool,
|
|
190
|
+
/**
|
|
191
|
+
* Specify the table tabIndex
|
|
192
|
+
*/
|
|
193
|
+
tabIndex: PropTypes__default["default"].number
|
|
189
194
|
};
|
|
190
195
|
|
|
191
196
|
exports.Table = Table;
|
|
@@ -542,9 +542,6 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
|
|
|
542
542
|
const closeCalendar = event => {
|
|
543
543
|
calendarRef.current.close();
|
|
544
544
|
// Remove focus from endDate calendar input
|
|
545
|
-
if (document.activeElement instanceof HTMLElement) {
|
|
546
|
-
document.activeElement.blur();
|
|
547
|
-
}
|
|
548
545
|
onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
|
|
549
546
|
type: 'clickOutside'
|
|
550
547
|
});
|
|
@@ -570,12 +567,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
|
|
|
570
567
|
if (!calendarRef.current || !startInputField.current) return;
|
|
571
568
|
const handleKeyDown = event => {
|
|
572
569
|
if (match.match(event, keys.Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
|
|
573
|
-
event.preventDefault();
|
|
574
570
|
calendarRef.current.close();
|
|
575
|
-
// Remove focus from endDate calendar input
|
|
576
|
-
document.activeElement instanceof HTMLElement &&
|
|
577
|
-
// this is to fix the TS warning
|
|
578
|
-
document?.activeElement?.blur();
|
|
579
571
|
onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
|
|
580
572
|
}
|
|
581
573
|
};
|
|
@@ -13,7 +13,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
13
13
|
* @param {object} config Plugin configuration.
|
|
14
14
|
* @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
|
|
15
15
|
*/
|
|
16
|
-
var carbonFlatpickrAppendToPlugin =
|
|
16
|
+
var carbonFlatpickrAppendToPlugin = config => fp => {
|
|
17
17
|
/**
|
|
18
18
|
* Adjusts the floating menu position after Flatpicker sets it.
|
|
19
19
|
*/
|
|
@@ -55,6 +55,6 @@ var carbonFlatpickrAppendToPlugin = (config => fp => {
|
|
|
55
55
|
onReady: register,
|
|
56
56
|
onPreCalendarPosition: handlePreCalendarPosition
|
|
57
57
|
};
|
|
58
|
-
}
|
|
58
|
+
};
|
|
59
59
|
|
|
60
60
|
exports["default"] = carbonFlatpickrAppendToPlugin;
|
|
@@ -16,7 +16,7 @@ var keys = require('../../../internal/keyboard/keys.js');
|
|
|
16
16
|
* @param {object} config Plugin configuration.
|
|
17
17
|
* @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
|
|
18
18
|
*/
|
|
19
|
-
var carbonFlatpickrFixEventsPlugin =
|
|
19
|
+
var carbonFlatpickrFixEventsPlugin = config => fp => {
|
|
20
20
|
const {
|
|
21
21
|
inputFrom,
|
|
22
22
|
inputTo,
|
|
@@ -154,6 +154,6 @@ var carbonFlatpickrFixEventsPlugin = (config => fp => {
|
|
|
154
154
|
onReady: [register, init],
|
|
155
155
|
onDestroy: [release]
|
|
156
156
|
};
|
|
157
|
-
}
|
|
157
|
+
};
|
|
158
158
|
|
|
159
159
|
exports["default"] = carbonFlatpickrFixEventsPlugin;
|
|
@@ -22,7 +22,7 @@ var rangePlugin__default = /*#__PURE__*/_interopDefaultLegacy(rangePlugin);
|
|
|
22
22
|
* Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
|
|
23
23
|
* * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
|
|
24
24
|
*/
|
|
25
|
-
var carbonFlatpickrRangePlugin =
|
|
25
|
+
var carbonFlatpickrRangePlugin = config => {
|
|
26
26
|
const factory = rangePlugin__default["default"](Object.assign({
|
|
27
27
|
position: 'left'
|
|
28
28
|
}, config));
|
|
@@ -57,6 +57,6 @@ var carbonFlatpickrRangePlugin = (config => {
|
|
|
57
57
|
onPreCalendarPosition() {}
|
|
58
58
|
});
|
|
59
59
|
};
|
|
60
|
-
}
|
|
60
|
+
};
|
|
61
61
|
|
|
62
62
|
exports["default"] = carbonFlatpickrRangePlugin;
|
|
@@ -217,7 +217,7 @@ class OverflowMenu extends React__default["default"].Component {
|
|
|
217
217
|
direction
|
|
218
218
|
} = _ref;
|
|
219
219
|
const enabledIndices = React__default["default"].Children.toArray(this.props.children).reduce((acc, curr, i) => {
|
|
220
|
-
if (
|
|
220
|
+
if (/*#__PURE__*/React__default["default"].isValidElement(curr) && !curr.props.disabled) {
|
|
221
221
|
acc.push(i);
|
|
222
222
|
}
|
|
223
223
|
return acc;
|
|
@@ -39,7 +39,7 @@ function renderSelectItems(total) {
|
|
|
39
39
|
let counter = 1;
|
|
40
40
|
const itemArr = [];
|
|
41
41
|
while (counter <= total) {
|
|
42
|
-
itemArr.push(
|
|
42
|
+
itemArr.push(/*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
|
|
43
43
|
key: counter,
|
|
44
44
|
value: counter,
|
|
45
45
|
text: String(counter)
|
|
@@ -40,7 +40,7 @@ function PageSelector(_ref) {
|
|
|
40
40
|
const renderPages = total => {
|
|
41
41
|
const pages = [];
|
|
42
42
|
for (let counter = 1; counter <= total; counter += 1) {
|
|
43
|
-
pages.push(
|
|
43
|
+
pages.push(/*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
|
|
44
44
|
key: counter,
|
|
45
45
|
value: counter,
|
|
46
46
|
text: String(counter)
|
|
@@ -223,7 +223,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
|
|
|
223
223
|
const isTriggerElement = item?.type === 'button';
|
|
224
224
|
const isTriggerComponent = enableFloatingStyles && displayName && ['ToggletipButton'].includes(displayName);
|
|
225
225
|
const isAllowedTriggerComponent = enableFloatingStyles && !['ToggletipContent', 'PopoverContent'].includes(displayName);
|
|
226
|
-
if (
|
|
226
|
+
if (/*#__PURE__*/React__default["default"].isValidElement(item) && (isTriggerElement || isTriggerComponent || isAllowedTriggerComponent)) {
|
|
227
227
|
const className = item?.props?.className;
|
|
228
228
|
const ref = (item?.props).ref;
|
|
229
229
|
const tabTipClasses = cx__default["default"](`${prefix}--popover--tab-tip__button`, className);
|
|
@@ -346,7 +346,7 @@ Popover.propTypes = {
|
|
|
346
346
|
*/
|
|
347
347
|
open: PropTypes__default["default"].bool.isRequired
|
|
348
348
|
};
|
|
349
|
-
function PopoverContentRenderFunction(
|
|
349
|
+
function PopoverContentRenderFunction(// eslint-disable-next-line react/prop-types
|
|
350
350
|
_ref2, forwardRef) {
|
|
351
351
|
let {
|
|
352
352
|
className,
|
|
@@ -66,7 +66,7 @@ const SkeletonText = _ref => {
|
|
|
66
66
|
}, [lineCountNumber, paragraph, refs, width, widthNum, widthPercent, widthPx]);
|
|
67
67
|
const lines = [];
|
|
68
68
|
for (let i = 0; i < lineCountNumber; i++) {
|
|
69
|
-
lines.push(
|
|
69
|
+
lines.push(/*#__PURE__*/React__default["default"].createElement("p", _rollupPluginBabelHelpers["extends"]({
|
|
70
70
|
className: skeletonTextClasses,
|
|
71
71
|
key: i,
|
|
72
72
|
ref: el => refs.current = [...refs.current, el]
|