@carbon/react 1.102.0-rc.0 → 1.103.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 +976 -976
- package/es/components/Breadcrumb/BreadcrumbItem.js +1 -1
- package/es/components/Button/Button.Skeleton.js +2 -1
- package/es/components/Button/Button.d.ts +4 -4
- package/es/components/Button/Button.js +4 -4
- package/es/components/Button/index.js +1 -1
- package/es/components/ButtonSet/ButtonSet.js +1 -1
- package/es/components/Checkbox/index.js +1 -1
- package/es/components/CheckboxGroup/CheckboxGroup.d.ts +1 -1
- package/es/components/CheckboxGroup/CheckboxGroup.js +2 -2
- package/es/components/ComboBox/ComboBox.js +3 -4
- package/es/components/ComposedModal/ComposedModal.js +0 -3
- package/es/components/ComposedModal/ComposedModalPresence.d.ts +9 -1
- package/es/components/ComposedModal/ComposedModalPresence.js +14 -1
- package/es/components/ComposedModal/index.d.ts +1 -1
- package/es/components/ContainedList/index.js +1 -1
- package/es/components/ContentSwitcher/ContentSwitcher.js +3 -2
- package/es/components/DataTable/TableExpandRow.js +2 -2
- package/es/components/DataTable/TableHeader.js +1 -1
- package/es/components/DataTable/TableRow.js +1 -1
- package/es/components/DataTable/TableToolbarMenu.js +1 -1
- package/es/components/DataTable/tools/normalize.js +2 -1
- package/es/components/DatePicker/DatePicker.Skeleton.d.ts +8 -5
- package/es/components/DatePicker/DatePicker.Skeleton.js +2 -2
- package/es/components/DatePicker/DatePicker.js +3 -2
- package/es/components/DatePicker/index.js +1 -1
- package/es/components/DatePickerInput/DatePickerInput.js +1 -1
- package/es/components/Dialog/Dialog.js +1 -1
- package/es/components/Dropdown/Dropdown.js +1 -3
- package/es/components/Dropdown/index.js +1 -1
- package/es/components/ExpandableSearch/ExpandableSearch.js +1 -1
- package/es/components/FeatureFlags/index.d.ts +8 -18
- package/es/components/FeatureFlags/index.js +23 -103
- package/es/components/FileUploader/FileUploader.Skeleton.js +1 -1
- package/es/components/FileUploader/FileUploaderButton.d.ts +1 -1
- package/es/components/FileUploader/FileUploaderButton.js +3 -7
- package/es/components/Icon/Icon.Skeleton.js +1 -1
- package/es/components/IconIndicator/index.js +1 -1
- package/es/components/Menu/MenuItem.js +1 -1
- package/es/components/Modal/ModalPresence.d.ts +9 -1
- package/es/components/Modal/ModalPresence.js +14 -1
- package/es/components/Modal/index.d.ts +2 -2
- package/es/components/MultiSelect/MultiSelect.js +9 -10
- package/es/components/Notification/Notification.js +1 -1
- package/es/components/NumberInput/NumberInput.js +15 -13
- package/es/components/OverflowMenu/OverflowMenu.d.ts +1 -1
- package/es/components/OverflowMenu/OverflowMenu.js +3 -5
- package/es/components/OverflowMenuV2/index.js +1 -1
- package/es/components/PageHeader/PageHeader.js +2 -23
- package/es/components/Pagination/Pagination.Skeleton.js +1 -1
- package/es/components/Pagination/Pagination.d.ts +4 -0
- package/es/components/Pagination/Pagination.js +6 -1
- package/es/components/Pagination/experimental/Pagination.js +12 -1
- package/es/components/Popover/index.js +1 -1
- package/es/components/ProgressIndicator/ProgressIndicator.js +3 -3
- package/es/components/RadioButton/RadioButton.Skeleton.js +1 -1
- package/es/components/Search/index.js +1 -1
- package/es/components/Select/index.js +1 -1
- package/es/components/ShapeIndicator/index.js +1 -1
- package/es/components/Slider/Slider.d.ts +1 -1
- package/es/components/Slider/Slider.js +230 -255
- package/es/components/Slider/SliderHandles.js +65 -53
- package/es/components/Switch/IconSwitch.js +1 -1
- package/es/components/Tabs/Tabs.js +2 -6
- package/es/components/Tag/Tag.Skeleton.js +1 -1
- package/es/components/TextArea/TextArea.js +1 -1
- package/es/components/TextArea/index.js +1 -1
- package/es/components/TextInput/index.js +1 -1
- package/es/components/Tile/Tile.js +1 -1
- package/es/components/TileGroup/TileGroup.d.ts +1 -1
- package/es/components/TileGroup/TileGroup.js +2 -1
- package/es/components/Toggle/Toggle.Skeleton.js +1 -1
- package/es/components/Toggletip/index.js +1 -1
- package/es/components/UIShell/HeaderMenu.js +1 -1
- package/es/components/UIShell/HeaderPanel.js +3 -2
- package/es/components/UIShell/SideNav.d.ts +1 -4
- package/es/components/UIShell/SideNav.js +10 -25
- package/es/components/UIShell/SideNavContext.d.ts +17 -0
- package/es/components/UIShell/SideNavContext.js +24 -0
- package/es/components/UIShell/SideNavItems.d.ts +1 -1
- package/es/components/UIShell/SideNavItems.js +12 -16
- package/es/components/UIShell/SideNavLink.js +8 -4
- package/es/components/UIShell/SideNavMenu.js +7 -5
- package/es/components/UIShell/Switcher.js +5 -4
- package/es/index.js +30 -30
- package/es/internal/useNoInteractiveChildren.js +25 -30
- package/es/internal/useOverflowItems.d.ts +1 -5
- package/es/internal/useOverflowItems.js +6 -27
- package/es/internal/usePresence.d.ts +1 -1
- package/es/internal/usePresence.js +14 -17
- package/lib/components/Button/Button.Skeleton.js +2 -1
- package/lib/components/Button/Button.d.ts +4 -4
- package/lib/components/Button/Button.js +4 -4
- package/lib/components/Button/index.js +1 -1
- package/lib/components/ButtonSet/ButtonSet.js +1 -1
- package/lib/components/Checkbox/index.js +1 -1
- package/lib/components/CheckboxGroup/CheckboxGroup.d.ts +1 -1
- package/lib/components/CheckboxGroup/CheckboxGroup.js +1 -1
- package/lib/components/ComboBox/ComboBox.js +3 -4
- package/lib/components/ComposedModal/ComposedModal.js +0 -3
- package/lib/components/ComposedModal/ComposedModalPresence.d.ts +9 -1
- package/lib/components/ComposedModal/ComposedModalPresence.js +14 -0
- package/lib/components/ComposedModal/index.d.ts +1 -1
- package/lib/components/ContainedList/index.js +0 -3
- package/lib/components/ContentSwitcher/ContentSwitcher.js +2 -1
- package/lib/components/DataTable/TableExpandRow.js +1 -1
- package/lib/components/DataTable/TableToolbarMenu.js +1 -1
- package/lib/components/DataTable/tools/normalize.js +2 -1
- package/lib/components/DatePicker/DatePicker.Skeleton.d.ts +8 -5
- package/lib/components/DatePicker/DatePicker.Skeleton.js +2 -2
- package/lib/components/DatePicker/DatePicker.js +3 -2
- package/lib/components/DatePicker/index.js +1 -1
- package/lib/components/Dropdown/Dropdown.js +1 -3
- package/lib/components/Dropdown/index.js +1 -1
- package/lib/components/FeatureFlags/index.d.ts +8 -18
- package/lib/components/FeatureFlags/index.js +21 -102
- package/lib/components/FileUploader/FileUploader.Skeleton.js +1 -1
- package/lib/components/FileUploader/FileUploaderButton.d.ts +1 -1
- package/lib/components/FileUploader/FileUploaderButton.js +2 -6
- package/lib/components/Icon/Icon.Skeleton.js +0 -3
- package/lib/components/IconIndicator/index.js +0 -3
- package/lib/components/Modal/ModalPresence.d.ts +9 -1
- package/lib/components/Modal/ModalPresence.js +14 -0
- package/lib/components/Modal/index.d.ts +2 -2
- package/lib/components/MultiSelect/MultiSelect.js +8 -9
- package/lib/components/NumberInput/NumberInput.js +14 -12
- package/lib/components/OverflowMenu/OverflowMenu.d.ts +1 -1
- package/lib/components/OverflowMenu/OverflowMenu.js +2 -7
- package/lib/components/OverflowMenuV2/index.js +1 -1
- package/lib/components/PageHeader/PageHeader.js +2 -23
- package/lib/components/Pagination/Pagination.Skeleton.js +0 -3
- package/lib/components/Pagination/Pagination.d.ts +4 -0
- package/lib/components/Pagination/Pagination.js +6 -1
- package/lib/components/Pagination/experimental/Pagination.js +12 -1
- package/lib/components/ProgressIndicator/ProgressIndicator.js +3 -3
- package/lib/components/RadioButton/RadioButton.Skeleton.js +0 -3
- package/lib/components/Search/index.js +1 -1
- package/lib/components/Select/index.js +1 -1
- package/lib/components/ShapeIndicator/index.js +0 -3
- package/lib/components/Slider/Slider.d.ts +1 -1
- package/lib/components/Slider/Slider.js +229 -254
- package/lib/components/Slider/SliderHandles.js +64 -52
- package/lib/components/Tabs/Tabs.js +1 -5
- package/lib/components/Tag/Tag.Skeleton.js +0 -3
- package/lib/components/TextArea/index.js +1 -1
- package/lib/components/TextInput/index.js +1 -1
- package/lib/components/TileGroup/TileGroup.d.ts +1 -1
- package/lib/components/TileGroup/TileGroup.js +2 -1
- package/lib/components/Toggle/Toggle.Skeleton.js +0 -3
- package/lib/components/Toggletip/index.js +0 -3
- package/lib/components/UIShell/HeaderPanel.js +2 -1
- package/lib/components/UIShell/SideNav.d.ts +1 -4
- package/lib/components/UIShell/SideNav.js +8 -24
- package/lib/components/UIShell/SideNavContext.d.ts +17 -0
- package/lib/components/UIShell/SideNavContext.js +27 -0
- package/lib/components/UIShell/SideNavItems.d.ts +1 -1
- package/lib/components/UIShell/SideNavItems.js +11 -15
- package/lib/components/UIShell/SideNavLink.js +7 -3
- package/lib/components/UIShell/SideNavMenu.js +8 -6
- package/lib/components/UIShell/Switcher.js +4 -3
- package/lib/index.js +102 -100
- package/lib/internal/useNoInteractiveChildren.js +25 -30
- package/lib/internal/useOverflowItems.d.ts +1 -5
- package/lib/internal/useOverflowItems.js +6 -27
- package/lib/internal/usePresence.d.ts +1 -1
- package/lib/internal/usePresence.js +13 -16
- package/package.json +8 -8
- package/telemetry.yml +2 -1
- package/es/components/UIShell/_utils.d.ts +0 -7
- package/es/components/UIShell/_utils.js +0 -10
- package/lib/components/UIShell/_utils.d.ts +0 -7
- package/lib/components/UIShell/_utils.js +0 -12
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import React, {
|
|
10
|
+
import React, { cloneElement, forwardRef, isValidElement } from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import Link from '../Link/Link.js';
|
|
13
13
|
import { OverflowMenuHorizontal } from '@carbon/icons-react';
|
|
@@ -27,7 +27,8 @@ const ButtonSkeleton = ({
|
|
|
27
27
|
[`${prefix}--btn--md`]: size === 'md',
|
|
28
28
|
[`${prefix}--btn--lg`]: size === 'lg',
|
|
29
29
|
[`${prefix}--btn--xl`]: size === 'xl',
|
|
30
|
-
[`${prefix}--btn--2xl`]: size === '2xl'
|
|
30
|
+
[`${prefix}--btn--2xl`]: size === '2xl',
|
|
31
|
+
[`${prefix}--layout--size-${size}`]: size
|
|
31
32
|
});
|
|
32
33
|
const commonProps = {
|
|
33
34
|
className: buttonClasses,
|
|
@@ -17,7 +17,7 @@ export declare const ButtonTooltipPositions: string[];
|
|
|
17
17
|
export type ButtonTooltipPosition = (typeof ButtonTooltipPositions)[number];
|
|
18
18
|
export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
19
19
|
/**
|
|
20
|
-
* Specify the message read by screen readers for the danger button
|
|
20
|
+
* Specify the message read by screen readers for the danger button variants
|
|
21
21
|
*/
|
|
22
22
|
dangerDescription?: string;
|
|
23
23
|
/**
|
|
@@ -38,7 +38,7 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
38
38
|
*/
|
|
39
39
|
isExpressive?: boolean;
|
|
40
40
|
/**
|
|
41
|
-
* Specify whether the Button is currently selected. Only applies to the Ghost variant.
|
|
41
|
+
* Specify whether the Button is currently selected. Only applies to the icon only Ghost variant.
|
|
42
42
|
*/
|
|
43
43
|
isSelected?: boolean;
|
|
44
44
|
/**
|
|
@@ -63,7 +63,7 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
63
63
|
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
64
64
|
/**
|
|
65
65
|
* Specify the alignment of the tooltip to the icon-only button.
|
|
66
|
-
* Can be one of: start
|
|
66
|
+
* Can be one of: `start`, `center`, or `end`.
|
|
67
67
|
*/
|
|
68
68
|
tooltipAlignment?: ButtonTooltipAlignment;
|
|
69
69
|
/**
|
|
@@ -77,7 +77,7 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
77
77
|
tooltipHighContrast?: boolean;
|
|
78
78
|
/**
|
|
79
79
|
* Specify the direction of the tooltip for icon-only buttons.
|
|
80
|
-
* Can be either top
|
|
80
|
+
* Can be either `top`, `right`, `bottom`, or `left`.
|
|
81
81
|
*/
|
|
82
82
|
tooltipPosition?: ButtonTooltipPosition;
|
|
83
83
|
}
|
|
@@ -127,7 +127,7 @@ Button.propTypes = {
|
|
|
127
127
|
*/
|
|
128
128
|
className: PropTypes.string,
|
|
129
129
|
/**
|
|
130
|
-
* Specify the message read by screen readers for the danger button
|
|
130
|
+
* Specify the message read by screen readers for the danger button variants
|
|
131
131
|
*/
|
|
132
132
|
dangerDescription: PropTypes.string,
|
|
133
133
|
/**
|
|
@@ -157,7 +157,7 @@ Button.propTypes = {
|
|
|
157
157
|
*/
|
|
158
158
|
isExpressive: PropTypes.bool,
|
|
159
159
|
/**
|
|
160
|
-
* Specify whether the Button is currently selected. Only applies to the Ghost variant.
|
|
160
|
+
* Specify whether the Button is currently selected. Only applies to the icon only Ghost variant.
|
|
161
161
|
*/
|
|
162
162
|
isSelected: PropTypes.bool,
|
|
163
163
|
/**
|
|
@@ -227,7 +227,7 @@ Button.propTypes = {
|
|
|
227
227
|
target: PropTypes.string,
|
|
228
228
|
/**
|
|
229
229
|
* Specify the alignment of the tooltip to the icon-only button.
|
|
230
|
-
* Can be one of: start
|
|
230
|
+
* Can be one of: `start`, `center`, or `end`.
|
|
231
231
|
*/
|
|
232
232
|
tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
|
|
233
233
|
/**
|
|
@@ -241,7 +241,7 @@ Button.propTypes = {
|
|
|
241
241
|
tooltipHighContrast: PropTypes.bool,
|
|
242
242
|
/**
|
|
243
243
|
* Specify the direction of the tooltip for icon-only buttons.
|
|
244
|
-
* Can be either top
|
|
244
|
+
* Can be either `top`, `right`, `bottom`, or `left`.
|
|
245
245
|
*/
|
|
246
246
|
tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
|
247
247
|
/**
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import Button from './Button.js';
|
|
9
9
|
export { ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions } from './Button.js';
|
|
10
|
-
export {
|
|
10
|
+
export { ButtonSkeleton } from './Button.Skeleton.js';
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
@@ -62,7 +62,7 @@ const ButtonSet = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
62
62
|
});
|
|
63
63
|
resizeObserver.observe(fluidInnerRef.current);
|
|
64
64
|
return () => resizeObserver.disconnect();
|
|
65
|
-
}, [
|
|
65
|
+
}, [fluid, stacked]);
|
|
66
66
|
useEffect(() => {
|
|
67
67
|
const newSortedChildren = React.Children.toArray(children);
|
|
68
68
|
newSortedChildren.sort((a, b) => {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import React, { Children,
|
|
10
|
+
import React, { Children, cloneElement } from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { deprecate } from '../../prop-types/deprecate.js';
|
|
13
13
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
@@ -61,7 +61,7 @@ const CheckboxGroup = ({
|
|
|
61
61
|
kind: 'default'
|
|
62
62
|
}) : candidate;
|
|
63
63
|
const clonedChildren = Children.map(children, child => {
|
|
64
|
-
if (
|
|
64
|
+
if (isComponentElement(child, Checkbox)) {
|
|
65
65
|
const childProps = {
|
|
66
66
|
...(typeof invalid !== 'undefined' && typeof child.props.invalid === 'undefined' ? {
|
|
67
67
|
invalid
|
|
@@ -283,8 +283,8 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
283
283
|
if (isMatchingSelection) {
|
|
284
284
|
return changes;
|
|
285
285
|
}
|
|
286
|
-
const nextSelectedItem = items.find(item => itemToString(item) === inputValue) ?? inputValue;
|
|
287
|
-
const isCustomSelection = typeof nextSelectedItem === 'string' && !items.some(item => isEqual(item, nextSelectedItem));
|
|
286
|
+
const nextSelectedItem = inputValue === '' ? null : items.find(item => itemToString(item) === inputValue) ?? inputValue;
|
|
287
|
+
const isCustomSelection = typeof nextSelectedItem === 'string' && nextSelectedItem !== '' && !items.some(item => isEqual(item, nextSelectedItem));
|
|
288
288
|
if (!isEqual(currentSelectedItem, nextSelectedItem) && onChange) {
|
|
289
289
|
onChange({
|
|
290
290
|
selectedItem: nextSelectedItem,
|
|
@@ -500,8 +500,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
500
500
|
onHighlightedIndexChange: ({
|
|
501
501
|
highlightedIndex
|
|
502
502
|
}) => {
|
|
503
|
-
|
|
504
|
-
if (highlightedIndex > -1 && typeof window !== undefined) {
|
|
503
|
+
if (highlightedIndex > -1) {
|
|
505
504
|
const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
|
|
506
505
|
const highlightedItem = itemArray[highlightedIndex];
|
|
507
506
|
if (highlightedItem) {
|
|
@@ -257,9 +257,6 @@ const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModal
|
|
|
257
257
|
const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
|
|
258
258
|
|
|
259
259
|
// Generate aria-label based on Modal Header label if one is not provided (L253)
|
|
260
|
-
//
|
|
261
|
-
// TODO: Confirm whether `ModalHeader` `label` should allow `ReactNode`. If
|
|
262
|
-
// so, define how to derive a string for `aria-label`.
|
|
263
260
|
let generatedAriaLabel;
|
|
264
261
|
const childrenWithProps = React.Children.toArray(children).map(child => {
|
|
265
262
|
if (isComponentElement(child, ModalHeader)) {
|
|
@@ -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 PropsWithChildren } from 'react';
|
|
7
|
+
import React, { type ComponentType, type PropsWithChildren } from 'react';
|
|
8
8
|
import { type PresenceContext } from '../../internal/usePresenceContext';
|
|
9
9
|
import { useComposedModalState } from './useComposedModalState';
|
|
10
10
|
export interface ComposedModalPresenceProps {
|
|
@@ -31,4 +31,12 @@ export declare const ComposedModalPresenceContext: React.Context<ComposedModalPr
|
|
|
31
31
|
* Handles occurrences where only a single composed modal must consume a context.
|
|
32
32
|
*/
|
|
33
33
|
export declare const useExclusiveComposedModalPresenceContext: (id: string) => ComposedModalPresenceContextProps | undefined;
|
|
34
|
+
type WithComposedModalPresenceProps = Pick<ComposedModalPresenceProps, 'open'>;
|
|
35
|
+
/**
|
|
36
|
+
* Higher-order function that wraps a component with ComposedModalPresence
|
|
37
|
+
*/
|
|
38
|
+
export declare const withComposedModalPresence: <TProps extends object>(Component: ComponentType<TProps>) => {
|
|
39
|
+
({ open, ...componentProps }: TProps & WithComposedModalPresenceProps): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
displayName: string;
|
|
41
|
+
};
|
|
34
42
|
export {};
|
|
@@ -38,5 +38,18 @@ const useExclusiveComposedModalPresenceContext = id => {
|
|
|
38
38
|
const ctx = useContext(ComposedModalPresenceContext);
|
|
39
39
|
return ctx?.isPresenceExclusive(id) ? ctx : undefined;
|
|
40
40
|
};
|
|
41
|
+
/**
|
|
42
|
+
* Higher-order function that wraps a component with ComposedModalPresence
|
|
43
|
+
*/
|
|
44
|
+
const withComposedModalPresence = Component => {
|
|
45
|
+
const WithComposedModalPresence = ({
|
|
46
|
+
open,
|
|
47
|
+
...componentProps
|
|
48
|
+
}) => /*#__PURE__*/React.createElement(ComposedModalPresence, {
|
|
49
|
+
open: open
|
|
50
|
+
}, /*#__PURE__*/React.createElement(Component, componentProps));
|
|
51
|
+
WithComposedModalPresence.displayName = `withComposedModalPresence(${Component.displayName || Component.name || 'Component'})`;
|
|
52
|
+
return WithComposedModalPresence;
|
|
53
|
+
};
|
|
41
54
|
|
|
42
|
-
export { ComposedModalPresence, ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext };
|
|
55
|
+
export { ComposedModalPresence, ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext, withComposedModalPresence };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import ComposedModal from './ComposedModal';
|
|
8
8
|
export { default as ComposedModal, type ComposedModalProps, ModalBody, type ModalBodyProps, } from './ComposedModal';
|
|
9
|
-
export { ComposedModalPresence, type ComposedModalPresenceProps, } from './ComposedModalPresence';
|
|
9
|
+
export { ComposedModalPresence, withComposedModalPresence, type ComposedModalPresenceProps, } from './ComposedModalPresence';
|
|
10
10
|
export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
|
|
11
11
|
export { ModalFooter, type ModalFooterProps } from './ModalFooter';
|
|
12
12
|
export default ComposedModal;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import React, { useContext, useState, useRef, Children, useEffect,
|
|
10
|
+
import React, { useContext, useState, useRef, Children, useEffect, cloneElement, isValidElement } from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { deprecate } from '../../prop-types/deprecate.js';
|
|
13
13
|
import { LayoutConstraint } from '../Layout/index.js';
|
|
@@ -16,6 +16,7 @@ import { ArrowRight, ArrowLeft, Enter, Space } from '../../internal/keyboard/key
|
|
|
16
16
|
import { matches } from '../../internal/keyboard/match.js';
|
|
17
17
|
import { getNextIndex } from '../../internal/keyboard/navigation.js';
|
|
18
18
|
import { PrefixContext } from '../../internal/usePrefix.js';
|
|
19
|
+
import { isComponentElement } from '../../internal/utils.js';
|
|
19
20
|
import '../Switch/Switch.js';
|
|
20
21
|
import IconSwitch from '../Switch/IconSwitch.js';
|
|
21
22
|
|
|
@@ -81,7 +82,7 @@ const ContentSwitcher = ({
|
|
|
81
82
|
}
|
|
82
83
|
};
|
|
83
84
|
const isIconOnly = Children.map(children, child => {
|
|
84
|
-
return
|
|
85
|
+
return isComponentElement(child, IconSwitch);
|
|
85
86
|
})?.every(val => val === true);
|
|
86
87
|
const classes = cx(`${prefix}--content-switcher`, className, {
|
|
87
88
|
[`${prefix}--content-switcher--light`]: light,
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import React, { forwardRef, Children
|
|
11
|
+
import React, { forwardRef, Children } from 'react';
|
|
12
12
|
import { ChevronRight } from '@carbon/icons-react';
|
|
13
13
|
import TableCell from './TableCell.js';
|
|
14
14
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
@@ -50,7 +50,7 @@ const TableExpandRow = /*#__PURE__*/forwardRef(({
|
|
|
50
50
|
}
|
|
51
51
|
});
|
|
52
52
|
const normalizedChildren = Children.toArray(children).map(child => {
|
|
53
|
-
if (
|
|
53
|
+
if (!isComponentElement(child, TableSlugRow) && !isComponentElement(child, TableDecoratorRow)) {
|
|
54
54
|
return child;
|
|
55
55
|
}
|
|
56
56
|
});
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import React, {
|
|
11
|
+
import React, { useRef, forwardRef, cloneElement } from 'react';
|
|
12
12
|
import { ArrowUp, ArrowsVertical } from '@carbon/icons-react';
|
|
13
13
|
import { useId } from '../../internal/useId.js';
|
|
14
14
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import React, {
|
|
9
|
+
import React, { Children, forwardRef } from 'react';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
@@ -11,7 +11,7 @@ import cx from 'classnames';
|
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
|
-
import OverflowMenu from '../OverflowMenu/index.js';
|
|
14
|
+
import { OverflowMenu } from '../OverflowMenu/index.js';
|
|
15
15
|
|
|
16
16
|
const defaultIconDescription = 'Settings';
|
|
17
17
|
const TableToolbarMenu = ({
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { AILabel } from '../../AILabel/index.js';
|
|
9
|
+
import { isComponentElement } from '../../../internal/utils.js';
|
|
9
10
|
import { getCellId } from './cells.js';
|
|
10
11
|
|
|
11
12
|
/**
|
|
@@ -60,7 +61,7 @@ const normalize = (rows, headers, prevState = {}) => {
|
|
|
60
61
|
isEditing: false,
|
|
61
62
|
isValid: true,
|
|
62
63
|
errors: null,
|
|
63
|
-
hasAILabelHeader: !!(slug || decorator
|
|
64
|
+
hasAILabelHeader: !!(slug || isComponentElement(decorator, AILabel)),
|
|
64
65
|
info: {
|
|
65
66
|
header: key
|
|
66
67
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
3
3
|
*
|
|
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.
|
|
@@ -7,11 +7,14 @@
|
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import { type HTMLAttributes } from 'react';
|
|
9
9
|
export interface DatePickerSkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
10
|
-
range?: boolean;
|
|
11
10
|
/**
|
|
12
|
-
* Specify whether the label
|
|
11
|
+
* Specify whether to hide the label.
|
|
13
12
|
*/
|
|
14
13
|
hideLabel?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Specify whether to render the range skeleton variant.
|
|
16
|
+
*/
|
|
17
|
+
range?: boolean;
|
|
15
18
|
}
|
|
16
19
|
declare const DatePickerSkeleton: {
|
|
17
20
|
({ range, id, hideLabel, className, ...rest }: DatePickerSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -21,7 +24,7 @@ declare const DatePickerSkeleton: {
|
|
|
21
24
|
*/
|
|
22
25
|
className: PropTypes.Requireable<string>;
|
|
23
26
|
/**
|
|
24
|
-
* Specify whether the label
|
|
27
|
+
* Specify whether to hide the label.
|
|
25
28
|
*/
|
|
26
29
|
hideLabel: PropTypes.Requireable<boolean>;
|
|
27
30
|
/**
|
|
@@ -29,7 +32,7 @@ declare const DatePickerSkeleton: {
|
|
|
29
32
|
*/
|
|
30
33
|
id: PropTypes.Requireable<string>;
|
|
31
34
|
/**
|
|
32
|
-
* Specify whether
|
|
35
|
+
* Specify whether to render the range skeleton variant.
|
|
33
36
|
*/
|
|
34
37
|
range: PropTypes.Requireable<boolean>;
|
|
35
38
|
};
|
|
@@ -46,7 +46,7 @@ DatePickerSkeleton.propTypes = {
|
|
|
46
46
|
*/
|
|
47
47
|
className: PropTypes.string,
|
|
48
48
|
/**
|
|
49
|
-
* Specify whether the label
|
|
49
|
+
* Specify whether to hide the label.
|
|
50
50
|
*/
|
|
51
51
|
hideLabel: PropTypes.bool,
|
|
52
52
|
/**
|
|
@@ -54,7 +54,7 @@ DatePickerSkeleton.propTypes = {
|
|
|
54
54
|
*/
|
|
55
55
|
id: PropTypes.string,
|
|
56
56
|
/**
|
|
57
|
-
* Specify whether
|
|
57
|
+
* Specify whether to render the range skeleton variant.
|
|
58
58
|
*/
|
|
59
59
|
range: PropTypes.bool
|
|
60
60
|
};
|
|
@@ -18,6 +18,7 @@ import { rangePlugin } from './plugins/rangePlugin.js';
|
|
|
18
18
|
import { deprecate } from '../../prop-types/deprecate.js';
|
|
19
19
|
import { Escape, Tab, Enter } from '../../internal/keyboard/keys.js';
|
|
20
20
|
import { match } from '../../internal/keyboard/match.js';
|
|
21
|
+
import { isComponentElement } from '../../internal/utils.js';
|
|
21
22
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
22
23
|
import { useSavedCallback } from '../../internal/useSavedCallback.js';
|
|
23
24
|
import '../FluidForm/FluidForm.js';
|
|
@@ -242,7 +243,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
242
243
|
const childrenWithProps = React.Children.toArray(children).map(
|
|
243
244
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
|
|
244
245
|
(child, index) => {
|
|
245
|
-
if (index === 0 && child
|
|
246
|
+
if (index === 0 && isComponentElement(child, DatePickerInput)) {
|
|
246
247
|
return /*#__PURE__*/React.cloneElement(child, {
|
|
247
248
|
datePickerType,
|
|
248
249
|
ref: startInputField,
|
|
@@ -251,7 +252,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
251
252
|
warn: effectiveWarn
|
|
252
253
|
});
|
|
253
254
|
}
|
|
254
|
-
if (index === 1 && child
|
|
255
|
+
if (index === 1 && isComponentElement(child, DatePickerInput)) {
|
|
255
256
|
return /*#__PURE__*/React.cloneElement(child, {
|
|
256
257
|
datePickerType,
|
|
257
258
|
ref: endInputField,
|
|
@@ -9,7 +9,7 @@ import { Calendar, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
|
|
|
9
9
|
import { warning } from '../../internal/warning.js';
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
|
-
import React, {
|
|
12
|
+
import React, { useContext, forwardRef, cloneElement } from 'react';
|
|
13
13
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
14
|
import '../FluidForm/FluidForm.js';
|
|
15
15
|
import { FormContext } from '../FluidForm/FormContext.js';
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import React, { useRef, useEffect,
|
|
10
|
+
import React, { useRef, useEffect, useContext, useState, createContext } from 'react';
|
|
11
11
|
import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
import cx from 'classnames';
|
|
@@ -172,9 +172,7 @@ const Dropdown = /*#__PURE__*/React.forwardRef(({
|
|
|
172
172
|
const {
|
|
173
173
|
highlightedIndex
|
|
174
174
|
} = changes;
|
|
175
|
-
if (highlightedIndex !== undefined && highlightedIndex > -1
|
|
176
|
-
// eslint-disable-next-line valid-typeof , no-constant-binary-expression -- https://github.com/carbon-design-system/carbon/issues/20452
|
|
177
|
-
typeof window !== undefined) {
|
|
175
|
+
if (highlightedIndex !== undefined && highlightedIndex > -1) {
|
|
178
176
|
const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
|
|
179
177
|
const highlightedItem = itemArray[highlightedIndex];
|
|
180
178
|
if (highlightedItem) {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import React, {
|
|
9
|
+
import React, { useState, useRef, useEffect, forwardRef } from 'react';
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import Search from '../Search/Search.js';
|
|
12
12
|
import '../Search/Search.Skeleton.js';
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2015,
|
|
2
|
+
* Copyright IBM Corp. 2015, 2026
|
|
3
3
|
*
|
|
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
7
|
import PropTypes from 'prop-types';
|
|
8
|
-
import
|
|
8
|
+
import { type ReactNode } from 'react';
|
|
9
9
|
export interface FeatureFlagsProps {
|
|
10
10
|
children?: ReactNode;
|
|
11
11
|
flags?: Record<string, boolean>;
|
|
@@ -20,19 +20,14 @@ export interface FeatureFlagsProps {
|
|
|
20
20
|
enableEnhancedFileUploader?: boolean;
|
|
21
21
|
enablePresence?: boolean;
|
|
22
22
|
}
|
|
23
|
-
/**
|
|
24
|
-
* Our FeatureFlagContext is used alongside the FeatureFlags component to enable
|
|
25
|
-
* or disable feature flags in a given React tree
|
|
26
|
-
*/
|
|
27
|
-
declare const FeatureFlagContext: React.Context<any>;
|
|
28
23
|
/**
|
|
29
24
|
* Supports an object of feature flag values with the `flags` prop, merging them
|
|
30
25
|
* along with the current `FeatureFlagContext` to provide consumers to check if
|
|
31
26
|
* a feature flag is enabled or disabled in a given React tree
|
|
32
27
|
*/
|
|
33
|
-
declare
|
|
34
|
-
|
|
35
|
-
|
|
28
|
+
export declare const FeatureFlags: {
|
|
29
|
+
({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, enableEnhancedFileUploader, enablePresence, }: FeatureFlagsProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
propTypes: {
|
|
36
31
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
37
32
|
/**
|
|
38
33
|
* Provide the feature flags to enabled or disabled in the current Rea,ct tree
|
|
@@ -49,18 +44,13 @@ declare namespace FeatureFlags {
|
|
|
49
44
|
enableEnhancedFileUploader: PropTypes.Requireable<boolean>;
|
|
50
45
|
enablePresence: PropTypes.Requireable<boolean>;
|
|
51
46
|
};
|
|
52
|
-
}
|
|
47
|
+
};
|
|
53
48
|
/**
|
|
54
49
|
* Access whether a given flag is enabled or disabled in a given
|
|
55
50
|
* FeatureFlagContext
|
|
56
|
-
*
|
|
57
|
-
* @returns {boolean}
|
|
58
51
|
*/
|
|
59
|
-
declare
|
|
52
|
+
export declare const useFeatureFlag: (flag: string) => boolean;
|
|
60
53
|
/**
|
|
61
54
|
* Access all feature flag information for the given FeatureFlagContext
|
|
62
|
-
*
|
|
63
|
-
* @returns {FeatureFlagScope}
|
|
64
55
|
*/
|
|
65
|
-
declare
|
|
66
|
-
export { FeatureFlags, FeatureFlagContext, useFeatureFlags, useFeatureFlag };
|
|
56
|
+
export declare const useFeatureFlags: () => import("@carbon/feature-flags/types/FeatureFlagScope").FeatureFlagScope;
|