@carbon/react 1.38.0 → 1.39.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/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +1225 -759
- package/es/components/CodeSnippet/CodeSnippet.js +7 -0
- package/es/components/ComboBox/ComboBox.d.ts +30 -27
- package/es/components/ComboBox/ComboBox.js +23 -24
- package/es/components/Copy/Copy.js +6 -1
- package/es/components/CopyButton/CopyButton.js +6 -0
- package/es/components/FileUploader/FileUploader.js +1 -1
- package/es/components/Grid/index.d.ts +1 -0
- package/es/components/Link/Link.d.ts +1 -1
- package/es/components/Link/index.d.ts +2 -2
- package/es/components/Popover/index.d.ts +9 -5
- package/es/components/Popover/index.js +2 -3
- package/es/components/UIShell/HeaderContainer.d.ts +1 -1
- package/es/components/UIShell/HeaderMenuButton.d.ts +4 -2
- package/es/components/UIShell/HeaderMenuItem.d.ts +1 -1
- package/es/components/UIShell/HeaderName.d.ts +1 -1
- package/es/components/UIShell/HeaderNavigation.d.ts +2 -5
- package/es/components/UIShell/HeaderSideNavItems.d.ts +1 -1
- package/es/components/UIShell/SideNav.d.ts +1 -1
- package/es/components/UIShell/SkipToContent.d.ts +1 -1
- package/es/components/UIShell/index.d.ts +8 -8
- package/es/index.js +1 -0
- package/lib/components/CodeSnippet/CodeSnippet.js +7 -0
- package/lib/components/ComboBox/ComboBox.d.ts +30 -27
- package/lib/components/ComboBox/ComboBox.js +22 -23
- package/lib/components/Copy/Copy.js +6 -1
- package/lib/components/CopyButton/CopyButton.js +6 -0
- package/lib/components/FileUploader/FileUploader.js +1 -1
- package/lib/components/Grid/index.d.ts +1 -0
- package/lib/components/Link/Link.d.ts +1 -1
- package/lib/components/Link/index.d.ts +2 -2
- package/lib/components/Popover/index.d.ts +9 -5
- package/lib/components/Popover/index.js +2 -3
- package/lib/components/UIShell/HeaderContainer.d.ts +1 -1
- package/lib/components/UIShell/HeaderMenuButton.d.ts +4 -2
- package/lib/components/UIShell/HeaderMenuItem.d.ts +1 -1
- package/lib/components/UIShell/HeaderName.d.ts +1 -1
- package/lib/components/UIShell/HeaderNavigation.d.ts +2 -5
- package/lib/components/UIShell/HeaderSideNavItems.d.ts +1 -1
- package/lib/components/UIShell/SideNav.d.ts +1 -1
- package/lib/components/UIShell/SkipToContent.d.ts +1 -1
- package/lib/components/UIShell/index.d.ts +8 -8
- package/lib/index.js +2 -0
- package/package.json +4 -5
|
@@ -5,11 +5,14 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import Downshift from 'downshift';
|
|
8
|
-
import {
|
|
9
|
-
import React from 'react';
|
|
8
|
+
import { type ComponentProps, type ReactNode, type ComponentType, type ReactElement, type RefAttributes, type PropsWithChildren, type PropsWithoutRef, type InputHTMLAttributes, type MouseEvent } from 'react';
|
|
10
9
|
import { ListBoxType, ListBoxSize } from '../ListBox';
|
|
11
10
|
type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
|
|
12
|
-
|
|
11
|
+
interface OnChangeData<ItemType> {
|
|
12
|
+
selectedItem: ItemType | null;
|
|
13
|
+
}
|
|
14
|
+
type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
|
|
15
|
+
export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
|
|
13
16
|
/**
|
|
14
17
|
* Specify a label to be read by screen readers on the container node
|
|
15
18
|
* 'aria-label' of the ListBox component.
|
|
@@ -35,12 +38,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
35
38
|
/**
|
|
36
39
|
* Additional props passed to Downshift
|
|
37
40
|
*/
|
|
38
|
-
downshiftProps?:
|
|
41
|
+
downshiftProps?: ComponentProps<typeof Downshift<ItemType>>;
|
|
39
42
|
/**
|
|
40
43
|
* Provide helper text that is used alongside the control label for
|
|
41
44
|
* additional help
|
|
42
45
|
*/
|
|
43
|
-
helperText?:
|
|
46
|
+
helperText?: ReactNode;
|
|
44
47
|
/**
|
|
45
48
|
* Specify a custom `id` for the input
|
|
46
49
|
*/
|
|
@@ -49,7 +52,7 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
49
52
|
* Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
|
|
50
53
|
* from their collection that are pre-selected
|
|
51
54
|
*/
|
|
52
|
-
initialSelectedItem?:
|
|
55
|
+
initialSelectedItem?: ItemType;
|
|
53
56
|
/**
|
|
54
57
|
* Specify if the currently selected value is invalid.
|
|
55
58
|
*/
|
|
@@ -57,23 +60,23 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
57
60
|
/**
|
|
58
61
|
* Message which is displayed if the value is invalid.
|
|
59
62
|
*/
|
|
60
|
-
invalidText?:
|
|
63
|
+
invalidText?: ReactNode;
|
|
61
64
|
/**
|
|
62
65
|
* Optional function to render items as custom components instead of strings.
|
|
63
66
|
* Defaults to null and is overridden by a getter
|
|
64
67
|
*/
|
|
65
|
-
itemToElement?:
|
|
68
|
+
itemToElement?: ComponentType<ItemType> | null;
|
|
66
69
|
/**
|
|
67
70
|
* Helper function passed to downshift that allows the library to render a
|
|
68
71
|
* given item to a string label. By default, it extracts the `label` field
|
|
69
72
|
* from a given item to serve as the item label in the list
|
|
70
73
|
*/
|
|
71
|
-
itemToString?:
|
|
74
|
+
itemToString?: ItemToStringHandler<ItemType>;
|
|
72
75
|
/**
|
|
73
76
|
* We try to stay as generic as possible here to allow individuals to pass
|
|
74
77
|
* in a collection of whatever kind of data structure they prefer
|
|
75
78
|
*/
|
|
76
|
-
items:
|
|
79
|
+
items: ItemType[];
|
|
77
80
|
/**
|
|
78
81
|
* @deprecated
|
|
79
82
|
* should use "light theme" (white background)?
|
|
@@ -85,9 +88,7 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
85
88
|
* `({ selectedItem }) => void`
|
|
86
89
|
// * @param {{ selectedItem }}
|
|
87
90
|
*/
|
|
88
|
-
onChange: (data:
|
|
89
|
-
selectedItem: any;
|
|
90
|
-
}) => void;
|
|
91
|
+
onChange: (data: OnChangeData<ItemType>) => void;
|
|
91
92
|
/**
|
|
92
93
|
* Callback function to notify consumer when the text input changes.
|
|
93
94
|
* This provides support to change available items based on the text.
|
|
@@ -95,18 +96,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
95
96
|
* @param {string} inputText
|
|
96
97
|
*/
|
|
97
98
|
onInputChange?: (inputText: string) => void;
|
|
98
|
-
/**
|
|
99
|
-
* Helper function passed to Downshift that allows the user to observe internal
|
|
100
|
-
* state changes
|
|
101
|
-
* `(changes, stateAndHelpers) => void`
|
|
102
|
-
*/
|
|
103
|
-
onStateChange?: (changes: object, stateAndHelpers: object) => void;
|
|
104
99
|
/**
|
|
105
100
|
* Callback function that fires when the combobox menu toggle is clicked
|
|
106
101
|
* `(evt) => void`
|
|
107
102
|
* @param {MouseEvent} event
|
|
108
103
|
*/
|
|
109
|
-
onToggleClick?: (evt: MouseEvent) => void;
|
|
104
|
+
onToggleClick?: (evt: MouseEvent<HTMLButtonElement>) => void;
|
|
110
105
|
/**
|
|
111
106
|
* Used to provide a placeholder text node before a user enters any input.
|
|
112
107
|
* This is only present if the control has no items selected
|
|
@@ -119,13 +114,17 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
119
114
|
/**
|
|
120
115
|
* For full control of the selection
|
|
121
116
|
*/
|
|
122
|
-
selectedItem?:
|
|
117
|
+
selectedItem?: ItemType | null;
|
|
123
118
|
/**
|
|
124
119
|
* Specify your own filtering logic by passing in a `shouldFilterItem`
|
|
125
120
|
* function that takes in the current input and an item and passes back
|
|
126
121
|
* whether or not the item should be filtered.
|
|
127
122
|
*/
|
|
128
|
-
shouldFilterItem?: (input:
|
|
123
|
+
shouldFilterItem?: (input: {
|
|
124
|
+
item: ItemType;
|
|
125
|
+
itemToString?: ItemToStringHandler<ItemType>;
|
|
126
|
+
inputValue: string | null;
|
|
127
|
+
}) => boolean;
|
|
129
128
|
/**
|
|
130
129
|
* Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
|
|
131
130
|
*/
|
|
@@ -134,12 +133,12 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
134
133
|
* Provide text to be used in a `<label>` element that is tied to the
|
|
135
134
|
* combobox via ARIA attributes.
|
|
136
135
|
*/
|
|
137
|
-
titleText?:
|
|
136
|
+
titleText?: ReactNode;
|
|
138
137
|
/**
|
|
139
138
|
* Specify a custom translation function that takes in a message identifier
|
|
140
139
|
* and returns the localized string for the message
|
|
141
140
|
*/
|
|
142
|
-
translateWithId?: (id:
|
|
141
|
+
translateWithId?: (id: string) => string;
|
|
143
142
|
/**
|
|
144
143
|
* Currently supports either the default type, or an inline variant
|
|
145
144
|
*/
|
|
@@ -151,7 +150,11 @@ export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
151
150
|
/**
|
|
152
151
|
* Provide the text that is displayed when the control is in warning state
|
|
153
152
|
*/
|
|
154
|
-
warnText?:
|
|
153
|
+
warnText?: ReactNode;
|
|
154
|
+
}
|
|
155
|
+
type ComboboxComponentProps<ItemType> = PropsWithoutRef<PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>>;
|
|
156
|
+
interface ComboBoxComponent {
|
|
157
|
+
<ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
|
|
155
158
|
}
|
|
156
|
-
declare const
|
|
157
|
-
export default
|
|
159
|
+
declare const _default: ComboBoxComponent;
|
|
160
|
+
export default _default;
|
|
@@ -49,7 +49,13 @@ const defaultItemToString = item => {
|
|
|
49
49
|
if (typeof item === 'string') {
|
|
50
50
|
return item;
|
|
51
51
|
}
|
|
52
|
-
|
|
52
|
+
if (typeof item === 'number') {
|
|
53
|
+
return `${item}`;
|
|
54
|
+
}
|
|
55
|
+
if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
|
|
56
|
+
return item['label'];
|
|
57
|
+
}
|
|
58
|
+
return '';
|
|
53
59
|
};
|
|
54
60
|
const defaultShouldFilterItem = () => true;
|
|
55
61
|
const getInputValue = _ref => {
|
|
@@ -85,10 +91,10 @@ const findHighlightedIndex = (_ref2, inputValue) => {
|
|
|
85
91
|
return -1;
|
|
86
92
|
};
|
|
87
93
|
const getInstanceId = setupGetInstanceId["default"]();
|
|
88
|
-
const ComboBox = /*#__PURE__*/
|
|
94
|
+
const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
89
95
|
var _Text;
|
|
90
96
|
const {
|
|
91
|
-
['aria-label']: ariaLabel,
|
|
97
|
+
['aria-label']: ariaLabel = 'Choose an item',
|
|
92
98
|
ariaLabel: deprecatedAriaLabel,
|
|
93
99
|
className: containerClassName,
|
|
94
100
|
direction,
|
|
@@ -101,7 +107,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
|
|
|
101
107
|
invalidText,
|
|
102
108
|
items,
|
|
103
109
|
itemToElement,
|
|
104
|
-
itemToString,
|
|
110
|
+
itemToString = defaultItemToString,
|
|
105
111
|
light,
|
|
106
112
|
onChange,
|
|
107
113
|
onInputChange,
|
|
@@ -109,14 +115,13 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
|
|
|
109
115
|
placeholder,
|
|
110
116
|
readOnly,
|
|
111
117
|
selectedItem,
|
|
112
|
-
shouldFilterItem,
|
|
118
|
+
shouldFilterItem = defaultShouldFilterItem,
|
|
113
119
|
size,
|
|
114
120
|
titleText,
|
|
115
121
|
translateWithId,
|
|
116
122
|
type: _type,
|
|
117
123
|
warn,
|
|
118
124
|
warnText,
|
|
119
|
-
onStateChange: _onStateChange,
|
|
120
125
|
...rest
|
|
121
126
|
} = props;
|
|
122
127
|
const prefix = usePrefix.usePrefix();
|
|
@@ -179,7 +184,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
|
|
|
179
184
|
const {
|
|
180
185
|
inputValue
|
|
181
186
|
} = changes;
|
|
182
|
-
const filteredItems = filterItems(items, itemToString, inputValue);
|
|
187
|
+
const filteredItems = filterItems(items, itemToString, inputValue || null);
|
|
183
188
|
const indexToHighlight = findHighlightedIndex({
|
|
184
189
|
...props,
|
|
185
190
|
items: filteredItems
|
|
@@ -187,7 +192,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
|
|
|
187
192
|
setHighlightedIndex(indexToHighlight);
|
|
188
193
|
return indexToHighlight;
|
|
189
194
|
}
|
|
190
|
-
return highlightedIndex;
|
|
195
|
+
return highlightedIndex || 0;
|
|
191
196
|
};
|
|
192
197
|
const handleOnStateChange = (changes, _ref3) => {
|
|
193
198
|
let {
|
|
@@ -362,7 +367,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
|
|
|
362
367
|
disabled: disabled,
|
|
363
368
|
className: inputClasses,
|
|
364
369
|
type: "text",
|
|
365
|
-
tabIndex:
|
|
370
|
+
tabIndex: 0,
|
|
366
371
|
"aria-autocomplete": "list",
|
|
367
372
|
"aria-expanded": rootProps['aria-expanded'],
|
|
368
373
|
"aria-haspopup": "listbox",
|
|
@@ -389,24 +394,24 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
|
|
|
389
394
|
}))), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
|
|
390
395
|
'aria-label': deprecatedAriaLabel || ariaLabel
|
|
391
396
|
}), isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
|
|
397
|
+
const isObject = item !== null && typeof item === 'object';
|
|
398
|
+
const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
|
|
399
|
+
const disabled = isObject && 'disabled' in item ? !!item.disabled : undefined;
|
|
392
400
|
const itemProps = getItemProps({
|
|
393
401
|
item,
|
|
394
402
|
index: index$1,
|
|
395
403
|
['aria-current']: selectedItem === item ? 'true' : 'false',
|
|
396
404
|
['aria-selected']: highlightedIndex === index$1 ? 'true' : 'false',
|
|
397
|
-
disabled
|
|
405
|
+
disabled
|
|
398
406
|
});
|
|
399
407
|
return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
|
|
400
408
|
key: itemProps.id,
|
|
401
409
|
isActive: selectedItem === item,
|
|
402
410
|
isHighlighted: highlightedIndex === index$1,
|
|
403
|
-
title:
|
|
404
|
-
}, itemProps),
|
|
405
|
-
/*#__PURE__*/
|
|
406
|
-
// @ts-ignore
|
|
407
|
-
React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
|
|
411
|
+
title: title
|
|
412
|
+
}, itemProps), ItemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
|
|
408
413
|
key: itemProps.id
|
|
409
|
-
}, item)) : itemToString
|
|
414
|
+
}, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
|
|
410
415
|
className: `${prefix}--list-box__menu-item__selected-icon`
|
|
411
416
|
}));
|
|
412
417
|
}) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
|
|
@@ -450,7 +455,7 @@ ComboBox.propTypes = {
|
|
|
450
455
|
* Provide helper text that is used alongside the control label for
|
|
451
456
|
* additional help
|
|
452
457
|
*/
|
|
453
|
-
helperText: PropTypes__default["default"].
|
|
458
|
+
helperText: PropTypes__default["default"].node,
|
|
454
459
|
/**
|
|
455
460
|
* Specify a custom `id` for the input
|
|
456
461
|
*/
|
|
@@ -502,12 +507,6 @@ ComboBox.propTypes = {
|
|
|
502
507
|
* @param {string} inputText
|
|
503
508
|
*/
|
|
504
509
|
onInputChange: PropTypes__default["default"].func,
|
|
505
|
-
/**
|
|
506
|
-
* Helper function passed to Downshift that allows the user to observe internal
|
|
507
|
-
* state changes
|
|
508
|
-
* `(changes, stateAndHelpers) => void`
|
|
509
|
-
*/
|
|
510
|
-
onStateChange: PropTypes__default["default"].func,
|
|
511
510
|
/**
|
|
512
511
|
* Callback function that fires when the combobox menu toggle is clicked
|
|
513
512
|
* `(evt) => void`
|
|
@@ -27,6 +27,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
|
27
27
|
|
|
28
28
|
function Copy(_ref) {
|
|
29
29
|
let {
|
|
30
|
+
align = 'bottom',
|
|
30
31
|
children,
|
|
31
32
|
className,
|
|
32
33
|
feedback,
|
|
@@ -60,7 +61,7 @@ function Copy(_ref) {
|
|
|
60
61
|
const initialLabel = other['aria-label'] ?? '';
|
|
61
62
|
return /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({
|
|
62
63
|
closeOnActivation: false,
|
|
63
|
-
align:
|
|
64
|
+
align: align,
|
|
64
65
|
className: classNames,
|
|
65
66
|
label: animation ? feedback : initialLabel,
|
|
66
67
|
onClick: events.composeEventHandlers([onClick, handleClick]),
|
|
@@ -70,6 +71,10 @@ function Copy(_ref) {
|
|
|
70
71
|
}), children);
|
|
71
72
|
}
|
|
72
73
|
Copy.propTypes = {
|
|
74
|
+
/**
|
|
75
|
+
* Specify how the trigger should align with the tooltip
|
|
76
|
+
*/
|
|
77
|
+
align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
|
|
73
78
|
/**
|
|
74
79
|
* Pass in content to be rendered in the underlying `<button>`
|
|
75
80
|
*/
|
|
@@ -26,6 +26,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
|
26
26
|
|
|
27
27
|
function CopyButton(_ref) {
|
|
28
28
|
let {
|
|
29
|
+
align = 'bottom',
|
|
29
30
|
iconDescription,
|
|
30
31
|
className,
|
|
31
32
|
...other
|
|
@@ -37,6 +38,7 @@ function CopyButton(_ref) {
|
|
|
37
38
|
max: 'lg'
|
|
38
39
|
}
|
|
39
40
|
}, /*#__PURE__*/React__default["default"].createElement(Copy["default"], _rollupPluginBabelHelpers["extends"]({
|
|
41
|
+
align: align,
|
|
40
42
|
className: cx__default["default"](className, `${prefix}--copy-btn`),
|
|
41
43
|
"aria-label": iconDescription
|
|
42
44
|
}, other), /*#__PURE__*/React__default["default"].createElement(iconsReact.Copy, {
|
|
@@ -44,6 +46,10 @@ function CopyButton(_ref) {
|
|
|
44
46
|
})));
|
|
45
47
|
}
|
|
46
48
|
CopyButton.propTypes = {
|
|
49
|
+
/**
|
|
50
|
+
* Specify how the trigger should align with the tooltip
|
|
51
|
+
*/
|
|
52
|
+
align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
|
|
47
53
|
/**
|
|
48
54
|
* Specify an optional className to be applied to the underlying `<button>`
|
|
49
55
|
*/
|
|
@@ -38,7 +38,7 @@ class FileUploader extends React__default["default"].Component {
|
|
|
38
38
|
evt.stopPropagation();
|
|
39
39
|
const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
|
|
40
40
|
this.setState({
|
|
41
|
-
filenames: this.props.multiple ? this.state.filenames
|
|
41
|
+
filenames: this.props.multiple ? [...new Set([...this.state.filenames, ...filenames])] : filenames
|
|
42
42
|
});
|
|
43
43
|
if (this.props.onChange) {
|
|
44
44
|
this.props.onChange(evt);
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
|
|
8
|
-
interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
8
|
+
export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
9
9
|
/**
|
|
10
10
|
* @description Indicates the element that represents the
|
|
11
11
|
* current item within a container or set of related
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
import Link from './Link';
|
|
7
|
+
import Link, { type LinkProps } from './Link';
|
|
8
8
|
export default Link;
|
|
9
|
-
export { Link };
|
|
9
|
+
export { Link, type LinkProps };
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
import React, { type WeakValidationMap, type ElementType } from 'react';
|
|
7
|
+
import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
|
|
8
8
|
import { type PolymorphicProps } from '../../types/common';
|
|
9
9
|
export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
|
|
10
10
|
interface PopoverBaseProps {
|
|
@@ -52,10 +52,14 @@ interface PopoverBaseProps {
|
|
|
52
52
|
open: boolean;
|
|
53
53
|
}
|
|
54
54
|
export type PopoverProps<E extends ElementType> = PolymorphicProps<E, PopoverBaseProps>;
|
|
55
|
-
export
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
};
|
|
55
|
+
export interface PopoverComponent {
|
|
56
|
+
<E extends ElementType = 'span'>(props: PopoverProps<E> & {
|
|
57
|
+
forwardRef?: ForwardedRef<ElementType>;
|
|
58
|
+
}): JSX.Element | null;
|
|
59
|
+
displayName?: string;
|
|
60
|
+
propTypes?: WeakValidationMap<PopoverProps<any>>;
|
|
61
|
+
}
|
|
62
|
+
export declare const Popover: PopoverComponent;
|
|
59
63
|
export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
|
|
60
64
|
export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
|
|
61
65
|
export {};
|
|
@@ -29,7 +29,7 @@ const PopoverContext = /*#__PURE__*/React__default["default"].createContext({
|
|
|
29
29
|
current: null
|
|
30
30
|
}
|
|
31
31
|
});
|
|
32
|
-
function PopoverRenderFunction(_ref, forwardRef) {
|
|
32
|
+
const Popover = /*#__PURE__*/React__default["default"].forwardRef(function PopoverRenderFunction(_ref, forwardRef) {
|
|
33
33
|
let {
|
|
34
34
|
isTabTip,
|
|
35
35
|
align = isTabTip ? 'bottom-left' : 'bottom',
|
|
@@ -189,8 +189,7 @@ function PopoverRenderFunction(_ref, forwardRef) {
|
|
|
189
189
|
className: className,
|
|
190
190
|
ref: ref
|
|
191
191
|
}), isTabTip ? mappedChildren : children));
|
|
192
|
-
}
|
|
193
|
-
const Popover = /*#__PURE__*/React__default["default"].forwardRef(PopoverRenderFunction);
|
|
192
|
+
});
|
|
194
193
|
|
|
195
194
|
// Note: this displayName is temporarily set so that Storybook ArgTable
|
|
196
195
|
// correctly displays the name of this component
|
|
@@ -10,7 +10,7 @@ interface HeaderContainerRenderProps {
|
|
|
10
10
|
isSideNavExpanded: boolean;
|
|
11
11
|
onClickSideNavExpand: () => void;
|
|
12
12
|
}
|
|
13
|
-
interface HeaderContainerProps {
|
|
13
|
+
export interface HeaderContainerProps {
|
|
14
14
|
isSideNavExpanded?: boolean;
|
|
15
15
|
render: React.ComponentType<HeaderContainerRenderProps>;
|
|
16
16
|
}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import { type ComponentProps } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
type HeaderMenuButtonBaseProps = Omit<ComponentProps<'button'>, 'title' | 'type'>;
|
|
10
|
-
interface HeaderMenuButtonProps extends HeaderMenuButtonBaseProps {
|
|
10
|
+
export interface HeaderMenuButtonProps extends HeaderMenuButtonBaseProps {
|
|
11
11
|
'aria-label'?: string;
|
|
12
12
|
'aria-labelledby'?: string;
|
|
13
13
|
className?: string;
|
|
@@ -74,7 +74,9 @@ declare namespace HeaderMenuButton {
|
|
|
74
74
|
fill(value: string, start?: number | undefined, end?: number | undefined): [key: string];
|
|
75
75
|
copyWithin(target: number, start: number, end?: number | undefined): [key: string];
|
|
76
76
|
entries(): IterableIterator<[number, string]>;
|
|
77
|
-
keys(): IterableIterator<number>;
|
|
77
|
+
keys(): IterableIterator<number>; /**
|
|
78
|
+
* Specify whether the menu button is collapsible.
|
|
79
|
+
*/
|
|
78
80
|
values(): IterableIterator<string>;
|
|
79
81
|
includes(searchElement: string, fromIndex?: number | undefined): boolean;
|
|
80
82
|
flatMap<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { type ComponentProps, type ForwardedRef, type ReactNode, ElementType, WeakValidationMap } from 'react';
|
|
8
8
|
import { LinkProps } from './Link';
|
|
9
|
-
type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
|
|
9
|
+
export type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
|
|
10
10
|
className?: string | undefined;
|
|
11
11
|
isActive?: boolean | undefined;
|
|
12
12
|
isCurrentPage?: boolean | undefined;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import { type ElementType } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import { type LinkProps } from './Link';
|
|
10
|
-
type HeaderNameProps<E extends ElementType> = LinkProps<E> & {
|
|
10
|
+
export type HeaderNameProps<E extends ElementType> = LinkProps<E> & {
|
|
11
11
|
prefix?: string | undefined;
|
|
12
12
|
};
|
|
13
13
|
declare function HeaderName<E extends ElementType = 'a'>({ children, className: customClassName, prefix, ...rest }: HeaderNameProps<E>): JSX.Element;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { type ComponentProps } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
type HeaderNavigationProps = ComponentProps<'nav'>;
|
|
9
|
+
export type HeaderNavigationProps = ComponentProps<'nav'>;
|
|
10
10
|
declare function HeaderNavigation({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className: customClassName, ...rest }: HeaderNavigationProps): JSX.Element;
|
|
11
11
|
declare namespace HeaderNavigation {
|
|
12
12
|
var propTypes: {
|
|
@@ -61,10 +61,7 @@ declare namespace HeaderNavigation {
|
|
|
61
61
|
includes(searchElement: string, fromIndex?: number | undefined): boolean;
|
|
62
62
|
flatMap<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
|
|
63
63
|
flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
|
|
64
|
-
at(index: number): string | undefined;
|
|
65
|
-
* Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
|
|
66
|
-
* or `HeaderMenu`
|
|
67
|
-
*/
|
|
64
|
+
at(index: number): string | undefined;
|
|
68
65
|
[Symbol.iterator](): IterableIterator<string>;
|
|
69
66
|
[Symbol.unscopables](): {
|
|
70
67
|
copyWithin: boolean;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import React, { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEventHandler } from 'react';
|
|
8
|
-
interface SideNavProps extends ComponentProps<'nav'> {
|
|
8
|
+
export interface SideNavProps extends ComponentProps<'nav'> {
|
|
9
9
|
expanded?: boolean | undefined;
|
|
10
10
|
defaultExpanded?: boolean | undefined;
|
|
11
11
|
isChildOfHeader?: boolean | undefined;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { ComponentProps } from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
type SkipToContentProps = Omit<ComponentProps<'a'>, 'children'> & {
|
|
9
|
+
export type SkipToContentProps = Omit<ComponentProps<'a'>, 'children'> & {
|
|
10
10
|
children?: string | undefined;
|
|
11
11
|
};
|
|
12
12
|
declare function SkipToContent({ children, className: customClassName, href, tabIndex, ...rest }: SkipToContentProps): JSX.Element;
|
|
@@ -6,21 +6,21 @@
|
|
|
6
6
|
*/
|
|
7
7
|
export { default as Content } from './Content';
|
|
8
8
|
export { default as Header } from './Header';
|
|
9
|
-
export { default as HeaderContainer } from './HeaderContainer';
|
|
9
|
+
export { default as HeaderContainer, type HeaderContainerProps, } from './HeaderContainer';
|
|
10
10
|
export { default as HeaderGlobalAction } from './HeaderGlobalAction';
|
|
11
11
|
export { default as HeaderGlobalBar } from './HeaderGlobalBar';
|
|
12
12
|
export { default as HeaderMenu } from './HeaderMenu';
|
|
13
|
-
export { default as HeaderMenuButton } from './HeaderMenuButton';
|
|
14
|
-
export { default as HeaderMenuItem } from './HeaderMenuItem';
|
|
15
|
-
export { default as HeaderName } from './HeaderName';
|
|
16
|
-
export { default as HeaderNavigation } from './HeaderNavigation';
|
|
13
|
+
export { default as HeaderMenuButton, type HeaderMenuButtonProps, } from './HeaderMenuButton';
|
|
14
|
+
export { default as HeaderMenuItem, type HeaderMenuItemProps, } from './HeaderMenuItem';
|
|
15
|
+
export { default as HeaderName, type HeaderNameProps } from './HeaderName';
|
|
16
|
+
export { default as HeaderNavigation, type HeaderNavigationProps, } from './HeaderNavigation';
|
|
17
17
|
export { default as HeaderPanel } from './HeaderPanel';
|
|
18
|
-
export { default as HeaderSideNavItems } from './HeaderSideNavItems';
|
|
18
|
+
export { default as HeaderSideNavItems, type HeaderSideNavItemsProps, } from './HeaderSideNavItems';
|
|
19
19
|
export { default as Switcher } from './Switcher';
|
|
20
20
|
export { default as SwitcherItem } from './SwitcherItem';
|
|
21
21
|
export { default as SwitcherDivider } from './SwitcherDivider';
|
|
22
|
-
export { default as SkipToContent } from './SkipToContent';
|
|
23
|
-
export { default as SideNav } from './SideNav';
|
|
22
|
+
export { default as SkipToContent, type SkipToContentProps, } from './SkipToContent';
|
|
23
|
+
export { default as SideNav, type SideNavProps } from './SideNav';
|
|
24
24
|
export { default as SideNavDetails } from './SideNavDetails';
|
|
25
25
|
export { default as SideNavDivider } from './SideNavDivider';
|
|
26
26
|
export { default as SideNavFooter } from './SideNavFooter';
|
package/lib/index.js
CHANGED
|
@@ -54,6 +54,7 @@ var Grid = require('./components/Grid/Grid.js');
|
|
|
54
54
|
var Row = require('./components/Grid/Row.js');
|
|
55
55
|
var Column = require('./components/Grid/Column.js');
|
|
56
56
|
var ColumnHang = require('./components/Grid/ColumnHang.js');
|
|
57
|
+
var GridContext = require('./components/Grid/GridContext.js');
|
|
57
58
|
var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
|
|
58
59
|
var index$6 = require('./components/IdPrefix/index.js');
|
|
59
60
|
var Link = require('./components/Link/Link.js');
|
|
@@ -274,6 +275,7 @@ exports.Grid = Grid.Grid;
|
|
|
274
275
|
exports.Row = Row["default"];
|
|
275
276
|
exports.Column = Column["default"];
|
|
276
277
|
exports.ColumnHang = ColumnHang.ColumnHang;
|
|
278
|
+
exports.GridSettings = GridContext.GridSettings;
|
|
277
279
|
exports.IconSkeleton = Icon_Skeleton["default"];
|
|
278
280
|
exports.IdPrefix = index$6.IdPrefix;
|
|
279
281
|
exports.Link = Link["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.
|
|
4
|
+
"version": "1.39.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@babel/runtime": "^7.18.3",
|
|
49
49
|
"@carbon/feature-flags": "^0.16.0",
|
|
50
|
-
"@carbon/icons-react": "^11.
|
|
50
|
+
"@carbon/icons-react": "^11.28.0-rc.0",
|
|
51
51
|
"@carbon/layout": "^11.19.0",
|
|
52
|
-
"@carbon/styles": "^1.
|
|
52
|
+
"@carbon/styles": "^1.39.0-rc.0",
|
|
53
53
|
"@carbon/telemetry": "0.1.0",
|
|
54
54
|
"classnames": "2.3.2",
|
|
55
55
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -117,7 +117,6 @@
|
|
|
117
117
|
"rimraf": "^5.0.0",
|
|
118
118
|
"rollup": "^2.79.1",
|
|
119
119
|
"rollup-plugin-strip-banner": "^3.0.0",
|
|
120
|
-
"rtlcss": "^4.0.0",
|
|
121
120
|
"sass": "^1.51.0",
|
|
122
121
|
"sass-loader": "^13.0.0",
|
|
123
122
|
"storybook": "^7.1.0",
|
|
@@ -139,5 +138,5 @@
|
|
|
139
138
|
"**/*.scss",
|
|
140
139
|
"**/*.css"
|
|
141
140
|
],
|
|
142
|
-
"gitHead": "
|
|
141
|
+
"gitHead": "39b377be9e59d22de4a45c874227a6e2fe578557"
|
|
143
142
|
}
|