@carbon/react 1.102.0 → 1.103.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 +1011 -1011
- 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/ComboBox/ComboBox.js +2 -2
- 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/DataTable/TableHeader.js +1 -1
- package/es/components/DataTable/TableRow.js +1 -1
- package/es/components/DataTable/TableToolbarMenu.js +1 -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.d.ts +4 -2
- package/es/components/DatePicker/DatePicker.js +9 -6
- package/es/components/DatePicker/index.js +1 -1
- package/es/components/DatePicker/plugins/rangePlugin.d.ts +1 -1
- package/es/components/DatePicker/plugins/rangePlugin.js +2 -1
- package/es/components/{UIShell/_utils.d.ts → DatePicker/utils.d.ts} +2 -2
- package/es/components/{UIShell/_utils.js → DatePicker/utils.js} +2 -2
- package/es/components/DatePickerInput/DatePickerInput.js +1 -1
- package/es/components/Dialog/Dialog.js +1 -1
- 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/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.js +230 -249
- package/es/components/Slider/SliderHandles.js +65 -53
- package/es/components/Switch/IconSwitch.js +1 -1
- package/es/components/Tabs/Tabs.js +10 -12
- 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.d.ts +2 -2
- package/es/components/Tile/Tile.js +7 -2
- 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/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/index.js +30 -30
- package/es/internal/useNoInteractiveChildren.js +25 -30
- 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/ComboBox/ComboBox.js +2 -2
- 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/DataTable/TableToolbarMenu.js +1 -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.d.ts +4 -2
- package/lib/components/DatePicker/DatePicker.js +9 -6
- package/lib/components/DatePicker/index.js +1 -1
- package/lib/components/DatePicker/plugins/rangePlugin.d.ts +1 -1
- package/lib/components/DatePicker/plugins/rangePlugin.js +2 -1
- package/lib/components/{UIShell/_utils.d.ts → DatePicker/utils.d.ts} +2 -2
- package/lib/components/{UIShell/_utils.js → DatePicker/utils.js} +2 -2
- 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/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.js +229 -248
- package/lib/components/Slider/SliderHandles.js +64 -52
- package/lib/components/Tabs/Tabs.js +9 -11
- 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/Tile/Tile.d.ts +2 -2
- package/lib/components/Tile/Tile.js +6 -1
- package/lib/components/Toggle/Toggle.Skeleton.js +0 -3
- package/lib/components/Toggletip/index.js +0 -3
- 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/index.js +102 -100
- package/lib/internal/useNoInteractiveChildren.js +25 -30
- package/lib/internal/usePresence.d.ts +1 -1
- package/lib/internal/usePresence.js +13 -16
- package/package.json +5 -5
- package/telemetry.yml +2 -1
|
@@ -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) => {
|
|
@@ -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,
|
|
@@ -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;
|
|
@@ -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 = ({
|
|
@@ -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
|
};
|
|
@@ -11,8 +11,10 @@ import { type SupportedLocale } from './DatePickerLocales';
|
|
|
11
11
|
export type DatePickerTypes = 'simple' | 'single' | 'range';
|
|
12
12
|
export interface DatePickerProps {
|
|
13
13
|
/**
|
|
14
|
-
* Flatpickr prop passthrough enables direct date input, and when set to
|
|
15
|
-
* we must clear dates manually by resetting the value prop to
|
|
14
|
+
* Flatpickr prop passthrough enables direct date input, and when set to
|
|
15
|
+
* false, we must clear dates manually by resetting the value prop to an empty
|
|
16
|
+
* value (such as `""`, `null`, or `undefined`) or an array of all empty
|
|
17
|
+
* values, making it a controlled input.
|
|
16
18
|
*/
|
|
17
19
|
allowInput?: boolean;
|
|
18
20
|
/**
|
|
@@ -26,6 +26,7 @@ import { FormContext } from '../FluidForm/FormContext.js';
|
|
|
26
26
|
import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
|
|
27
27
|
import { datePartsOrder } from '@carbon/utilities';
|
|
28
28
|
import { SUPPORTED_LOCALES } from './DatePickerLocales.js';
|
|
29
|
+
import { isEmptyDateValue } from './utils.js';
|
|
29
30
|
|
|
30
31
|
// Weekdays shorthand for English locale
|
|
31
32
|
// Ensure localization exists before trying to access it
|
|
@@ -591,9 +592,9 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
591
592
|
useEffect(() => {
|
|
592
593
|
// when value prop is manually reset, this clears the flatpickr calendar instance and text input
|
|
593
594
|
// run if both:
|
|
594
|
-
// 1. value prop is set to
|
|
595
|
+
// 1. value prop is set to an empty value (`""`, `undefined`, `null`, etc) OR an array of all empty values
|
|
595
596
|
// 2. flatpickr instance contains values in its `selectedDates` property so it hasn't already been cleared
|
|
596
|
-
if ((
|
|
597
|
+
if ((isEmptyDateValue(value) || Array.isArray(value) && value.every(isEmptyDateValue)) && calendarRef.current?.selectedDates.length) {
|
|
597
598
|
calendarRef.current?.clear();
|
|
598
599
|
if (startInputField.current) {
|
|
599
600
|
startInputField.current.value = '';
|
|
@@ -607,7 +608,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
607
608
|
if (calendarRef.current?.set) {
|
|
608
609
|
if (value !== undefined) {
|
|
609
610
|
// To make up for calendarRef.current.setDate not making provision for an empty string or array
|
|
610
|
-
if (value === '' || value === null || Array.isArray(value) && (value.length === 0 || value.every(
|
|
611
|
+
if (value === '' || value === null || Array.isArray(value) && (value.length === 0 || value.every(isEmptyDateValue))) {
|
|
611
612
|
// only clear if there are selected dates to avoid unnecessary operations
|
|
612
613
|
if (calendarRef.current.selectedDates.length > 0) {
|
|
613
614
|
calendarRef.current.clear();
|
|
@@ -618,7 +619,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
618
619
|
}
|
|
619
620
|
updateClassNames(calendarRef.current, prefix);
|
|
620
621
|
//for simple date picker w/o calendar; initial mount may not have value
|
|
621
|
-
} else if (!calendarRef.current && value) {
|
|
622
|
+
} else if (!calendarRef.current && typeof value !== 'undefined' && value !== null) {
|
|
622
623
|
startInputField.current.value = value;
|
|
623
624
|
}
|
|
624
625
|
}, [value, prefix, startInputField]);
|
|
@@ -652,8 +653,10 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
652
653
|
});
|
|
653
654
|
DatePicker.propTypes = {
|
|
654
655
|
/**
|
|
655
|
-
* Flatpickr prop passthrough enables direct date input, and when set to
|
|
656
|
-
* we must clear dates manually by resetting the value prop to
|
|
656
|
+
* Flatpickr prop passthrough enables direct date input, and when set to
|
|
657
|
+
* false, we must clear dates manually by resetting the value prop to an empty
|
|
658
|
+
* value (such as `""`, `null`, or `undefined`) or an array of all empty
|
|
659
|
+
* values, making it a controlled input.
|
|
657
660
|
*/
|
|
658
661
|
allowInput: PropTypes.bool,
|
|
659
662
|
/**
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import baseRangePlugin from 'flatpickr/dist/plugins/rangePlugin';
|
|
9
|
+
import { isEmptyDateValue } from '../utils.js';
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* @param config Plugin configuration.
|
|
@@ -38,7 +39,7 @@ const rangePlugin = (config = {}) => {
|
|
|
38
39
|
const inputToElement = typeof inputTo === 'string' ? document.querySelector(inputTo) : inputTo;
|
|
39
40
|
[inputFrom, inputToElement].forEach((input, i) => {
|
|
40
41
|
if (input && input instanceof HTMLInputElement) {
|
|
41
|
-
input.value =
|
|
42
|
+
input.value = isEmptyDateValue(dates[i]) ? '' : formatDate(new Date(dates[i]), fp.config.dateFormat);
|
|
42
43
|
}
|
|
43
44
|
});
|
|
44
45
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp.
|
|
2
|
+
* Copyright IBM Corp. 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
|
-
export const
|
|
7
|
+
export declare const isEmptyDateValue: (date: unknown) => date is "" | null | undefined;
|
|
@@ -5,6 +5,6 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const isEmptyDateValue = date => date === '' || date === null || typeof date === 'undefined';
|
|
9
9
|
|
|
10
|
-
export {
|
|
10
|
+
export { isEmptyDateValue };
|
|
@@ -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';
|
|
@@ -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;
|