@carbon/react 1.79.0 → 1.80.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.
Files changed (125) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +960 -904
  2. package/es/components/CodeSnippet/CodeSnippet.js +1 -1
  3. package/es/components/ComposedModal/ComposedModal.d.ts +6 -0
  4. package/es/components/ComposedModal/ModalFooter.d.ts +6 -0
  5. package/es/components/ContainedList/index.js +1 -1
  6. package/es/components/DataTable/DataTable.d.ts +3 -1
  7. package/es/components/DatePicker/DatePicker.d.ts +1 -1
  8. package/es/components/DatePicker/DatePicker.js +1 -1
  9. package/es/components/FluidTextArea/FluidTextArea.Skeleton.d.ts +6 -0
  10. package/es/components/Layer/LayerLevel.d.ts +6 -0
  11. package/es/components/Menu/Menu.d.ts +1 -1
  12. package/es/components/Menu/MenuItem.d.ts +1 -1
  13. package/es/components/Modal/Modal.js +1 -1
  14. package/es/components/ModalWrapper/ModalWrapper.d.ts +1 -1
  15. package/es/components/ModalWrapper/ModalWrapper.js +2 -1
  16. package/es/components/Notification/Notification.js +1 -1
  17. package/es/components/NumberInput/NumberInput.d.ts +1 -1
  18. package/es/components/OverflowMenu/OverflowMenu.js +1 -1
  19. package/es/components/OverflowMenuItem/OverflowMenuItem.js +1 -3
  20. package/es/components/OverflowMenuV2/index.js +1 -1
  21. package/es/components/PageHeader/PageHeader.d.ts +101 -0
  22. package/es/components/PageHeader/PageHeader.js +241 -0
  23. package/es/components/PageHeader/index.d.ts +8 -0
  24. package/es/components/PageHeader/index.js +8 -0
  25. package/es/components/PasswordInput/index.d.ts +6 -0
  26. package/es/components/Popover/index.js +1 -1
  27. package/es/components/Slider/SliderHandles.d.ts +6 -0
  28. package/es/components/Tag/Tag.js +2 -2
  29. package/es/components/Text/createTextComponent.js +1 -1
  30. package/es/components/TextArea/TextArea.d.ts +3 -3
  31. package/es/components/TextArea/TextArea.js +5 -2
  32. package/es/components/TextInput/ControlledPasswordInput.d.ts +6 -0
  33. package/es/components/TextInput/ControlledPasswordInput.js +1 -1
  34. package/es/components/TextInput/PasswordInput.d.ts +6 -0
  35. package/es/components/TextInput/index.js +1 -1
  36. package/es/components/Tile/Tile.d.ts +1 -1
  37. package/es/components/Tile/Tile.js +1 -4
  38. package/es/components/UIShell/Switcher.d.ts +1 -7
  39. package/es/components/UIShell/SwitcherDivider.d.ts +6 -0
  40. package/es/components/UIShell/SwitcherItem.d.ts +6 -0
  41. package/es/index.d.ts +5 -1
  42. package/es/index.js +3 -1
  43. package/es/internal/FloatingMenu.js +2 -2
  44. package/es/internal/PolymorphicProps.d.ts +6 -0
  45. package/es/internal/deprecateFieldOnObject.d.ts +12 -0
  46. package/es/internal/deprecateFieldOnObject.js +4 -4
  47. package/es/internal/useControllableState.js +2 -2
  48. package/es/internal/useEvent.js +1 -1
  49. package/es/internal/useMergedRefs.d.ts +9 -6
  50. package/es/internal/useMergedRefs.js +8 -9
  51. package/es/internal/useNoInteractiveChildren.js +2 -2
  52. package/es/internal/useSavedCallback.d.ts +15 -0
  53. package/es/internal/useSavedCallback.js +9 -12
  54. package/es/internal/warning.d.ts +17 -0
  55. package/es/internal/warning.js +16 -12
  56. package/es/internal/wrapFocus.js +1 -1
  57. package/es/prop-types/isRequiredOneOf.js +1 -1
  58. package/es/prop-types/requiredIfGivenPropIsTruthy.js +1 -1
  59. package/es/tools/events.js +1 -6
  60. package/es/tools/toggleClass.js +6 -0
  61. package/es/types/common.d.ts +6 -0
  62. package/lib/components/CodeSnippet/CodeSnippet.js +1 -1
  63. package/lib/components/ComposedModal/ComposedModal.d.ts +6 -0
  64. package/lib/components/ComposedModal/ModalFooter.d.ts +6 -0
  65. package/lib/components/ContainedList/index.js +1 -1
  66. package/lib/components/DataTable/DataTable.d.ts +3 -1
  67. package/lib/components/DatePicker/DatePicker.d.ts +1 -1
  68. package/lib/components/DatePicker/DatePicker.js +1 -1
  69. package/lib/components/FluidTextArea/FluidTextArea.Skeleton.d.ts +6 -0
  70. package/lib/components/Layer/LayerLevel.d.ts +6 -0
  71. package/lib/components/Menu/Menu.d.ts +1 -1
  72. package/lib/components/Menu/MenuItem.d.ts +1 -1
  73. package/lib/components/Modal/Modal.js +1 -1
  74. package/lib/components/ModalWrapper/ModalWrapper.d.ts +1 -1
  75. package/lib/components/ModalWrapper/ModalWrapper.js +2 -1
  76. package/lib/components/Notification/Notification.js +1 -1
  77. package/lib/components/NumberInput/NumberInput.d.ts +1 -1
  78. package/lib/components/OverflowMenu/OverflowMenu.js +1 -1
  79. package/lib/components/OverflowMenuItem/OverflowMenuItem.js +1 -3
  80. package/lib/components/OverflowMenuV2/index.js +1 -1
  81. package/lib/components/PageHeader/PageHeader.d.ts +101 -0
  82. package/lib/components/PageHeader/PageHeader.js +260 -0
  83. package/lib/components/PageHeader/index.d.ts +8 -0
  84. package/lib/components/PageHeader/index.js +25 -0
  85. package/lib/components/PasswordInput/index.d.ts +6 -0
  86. package/lib/components/Popover/index.js +1 -1
  87. package/lib/components/Slider/SliderHandles.d.ts +6 -0
  88. package/lib/components/Tag/Tag.js +2 -2
  89. package/lib/components/Text/createTextComponent.js +1 -1
  90. package/lib/components/TextArea/TextArea.d.ts +3 -3
  91. package/lib/components/TextArea/TextArea.js +4 -1
  92. package/lib/components/TextInput/ControlledPasswordInput.d.ts +6 -0
  93. package/lib/components/TextInput/ControlledPasswordInput.js +1 -1
  94. package/lib/components/TextInput/PasswordInput.d.ts +6 -0
  95. package/lib/components/TextInput/index.js +1 -1
  96. package/lib/components/Tile/Tile.d.ts +1 -1
  97. package/lib/components/Tile/Tile.js +1 -4
  98. package/lib/components/UIShell/Switcher.d.ts +1 -7
  99. package/lib/components/UIShell/SwitcherDivider.d.ts +6 -0
  100. package/lib/components/UIShell/SwitcherItem.d.ts +6 -0
  101. package/lib/index.d.ts +5 -1
  102. package/lib/index.js +62 -57
  103. package/lib/internal/FloatingMenu.js +2 -2
  104. package/lib/internal/PolymorphicProps.d.ts +6 -0
  105. package/lib/internal/deprecateFieldOnObject.d.ts +12 -0
  106. package/lib/internal/deprecateFieldOnObject.js +4 -4
  107. package/lib/internal/useControllableState.js +2 -2
  108. package/lib/internal/useEvent.js +1 -1
  109. package/lib/internal/useMergedRefs.d.ts +9 -6
  110. package/lib/internal/useMergedRefs.js +8 -9
  111. package/lib/internal/useNoInteractiveChildren.js +2 -2
  112. package/lib/internal/useSavedCallback.d.ts +15 -0
  113. package/lib/internal/useSavedCallback.js +9 -12
  114. package/lib/internal/warning.d.ts +17 -0
  115. package/lib/internal/warning.js +16 -12
  116. package/lib/internal/wrapFocus.js +1 -1
  117. package/lib/prop-types/isRequiredOneOf.js +1 -1
  118. package/lib/prop-types/requiredIfGivenPropIsTruthy.js +1 -1
  119. package/lib/tools/events.js +1 -6
  120. package/lib/tools/toggleClass.js +6 -0
  121. package/lib/types/common.d.ts +6 -0
  122. package/package.json +7 -7
  123. package/scss/components/page-header/_index.scss +9 -0
  124. package/scss/components/page-header/_page-header.scss +9 -0
  125. package/telemetry.yml +62 -23
@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
9
9
  import PropTypes from 'prop-types';
10
10
  import React__default, { useState, useRef, useCallback, useEffect } from 'react';
11
11
  import cx from 'classnames';
12
- import useResizeObserver from 'use-resize-observer/polyfilled';
12
+ import useResizeObserver from 'use-resize-observer';
13
13
  import { ChevronDown } from '@carbon/icons-react';
14
14
  import Copy from '../Copy/Copy.js';
15
15
  import Button from '../Button/Button.js';
@@ -1,3 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2023, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
1
7
  import React, { type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ReactNode, type RefObject } from 'react';
2
8
  export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
3
9
  /** Specify the content to be placed in the ModalBody. */
@@ -1,3 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2023, 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
1
7
  import React, { type ReactNode, type MouseEvent, type Ref } from 'react';
2
8
  import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
3
9
  export interface SecondaryButtonProps {
@@ -12,6 +12,6 @@ import ContainedListItem from './ContainedListItem/ContainedListItem.js';
12
12
  export { default as ContainedListItem } from './ContainedListItem/ContainedListItem.js';
13
13
 
14
14
  ContainedList.ContainedListItem = ContainedListItem;
15
- if (process.env.NODE_ENV !== "production") {
15
+ if (process.env.NODE_ENV !== 'production') {
16
16
  deprecateFieldOnObject(ContainedList, 'ContainedListItem', ContainedListItem);
17
17
  }
@@ -201,10 +201,12 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
201
201
  render?: (renderProps: DataTableRenderProps<RowType, ColTypes>) => React.ReactElement;
202
202
  rows: Array<Omit<DataTableRow<ColTypes>, 'cells'>>;
203
203
  size?: DataTableSize;
204
- sortRow?: (cellA: DataTableCell<any>, cellB: DataTableCell<any>, sortRowOptions: {
204
+ sortRow?: (cellA: any, cellB: any, sortRowOptions: {
205
205
  sortDirection: DataTableSortState;
206
206
  sortStates: Record<DataTableSortState, DataTableSortState>;
207
207
  locale: string;
208
+ key: string;
209
+ compare: (a: number | string, b: number | string, locale?: string) => number;
208
210
  }) => number;
209
211
  stickyHeader?: boolean;
210
212
  useStaticWidth?: boolean;
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
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.
@@ -357,7 +357,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
357
357
  nextArrow: rightArrowHTML,
358
358
  prevArrow: leftArrowHTML,
359
359
  onChange: function () {
360
- if (savedOnChange && !readOnly) {
360
+ if (!readOnly) {
361
361
  savedOnChange(...arguments);
362
362
  }
363
363
  },
@@ -1,3 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
1
7
  import React from 'react';
2
8
  export interface FluidTextAreaSkeletonProps {
3
9
  /**
@@ -1,3 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
1
7
  export declare const levels: readonly ["one", "two", "three"];
2
8
  export declare const MIN_LEVEL = 0;
3
9
  export declare const MAX_LEVEL: number;
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2023
2
+ * Copyright IBM Corp. 2023, 2025
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.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2025
2
+ * Copyright IBM Corp. 2023, 2025
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.
@@ -198,7 +198,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
198
198
  if (!enableDialogElement) {
199
199
  const initialFocus = focusContainerElement => {
200
200
  const containerElement = focusContainerElement || innerModal.current;
201
- const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
201
+ const primaryFocusElement = containerElement && (containerElement.querySelector(selectorPrimaryFocus) || danger && containerElement.querySelector(`.${prefix}--btn--secondary`));
202
202
  if (primaryFocusElement) {
203
203
  return primaryFocusElement;
204
204
  }
@@ -36,7 +36,7 @@ interface ModelWrapperState {
36
36
  isOpen: boolean;
37
37
  }
38
38
  export default class ModalWrapper extends React.Component<ModalWrapperProps, ModelWrapperState> {
39
- if(__DEV__: any): void;
39
+ if(isDev: any): void;
40
40
  static propTypes: {
41
41
  buttonTriggerClassName: PropTypes.Requireable<string>;
42
42
  buttonTriggerText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -17,6 +17,7 @@ import { Escape } from '../../internal/keyboard/keys.js';
17
17
  import { match } from '../../internal/keyboard/match.js';
18
18
 
19
19
  let didWarnAboutDeprecation = false;
20
+ process.env.NODE_ENV !== 'production';
20
21
  class ModalWrapper extends React__default.Component {
21
22
  constructor() {
22
23
  super(...arguments);
@@ -52,7 +53,7 @@ class ModalWrapper extends React__default.Component {
52
53
  handleSubmit?.(evt);
53
54
  });
54
55
  }
55
- if(__DEV__) {
56
+ if(isDev) {
56
57
  process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<ModalWrapper>` has been deprecated in favor of `<ComposedModal/>` and will be removed in the next major version, `@carbon/react@v2.x`') : void 0;
57
58
  didWarnAboutDeprecation = true;
58
59
  }
@@ -812,7 +812,7 @@ Callout.propTypes = {
812
812
 
813
813
  let didWarnAboutDeprecation = false;
814
814
  const StaticNotification = props => {
815
- if (process.env.NODE_ENV !== "production") {
815
+ if (process.env.NODE_ENV !== 'production') {
816
816
  process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`StaticNotification` has been renamed to `Callout`.' + 'Run the following codemod to automatically update usages in your' + 'project: `npx @carbon/upgrade migrate refactor-to-callout --write`') : void 0;
817
817
  didWarnAboutDeprecation = true;
818
818
  }
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
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.
@@ -64,7 +64,7 @@ const triggerButtonPositionFactors = {
64
64
  const getMenuOffset = (menuBody, direction, trigger, flip) => {
65
65
  const triggerButtonPositionProp = triggerButtonPositionProps[direction];
66
66
  const triggerButtonPositionFactor = triggerButtonPositionFactors[direction];
67
- if (process.env.NODE_ENV !== "production") {
67
+ if (process.env.NODE_ENV !== 'production') {
68
68
  !(triggerButtonPositionProp && triggerButtonPositionFactor) ? process.env.NODE_ENV !== "production" ? invariant(false, '[OverflowMenu] wrong floating menu direction: `%s`', direction) : invariant(false) : void 0;
69
69
  }
70
70
  const {
@@ -55,9 +55,7 @@ const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function Overflo
55
55
  closeMenu();
56
56
  }
57
57
  }
58
- if (process.env.NODE_ENV !== "production") {
59
- process.env.NODE_ENV !== "production" ? warning(closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
60
- }
58
+ process.env.NODE_ENV !== "production" ? warning(!!closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
61
59
  const overflowMenuBtnClasses = cx(`${prefix}--overflow-menu-options__btn`, className);
62
60
  const overflowMenuItemClasses = cx(`${prefix}--overflow-menu-options__option`, {
63
61
  [`${prefix}--overflow-menu--divider`]: hasDivider,
@@ -12,7 +12,7 @@ import OverflowMenu from '../OverflowMenu/index.js';
12
12
 
13
13
  let didWarnAboutDeprecation = false;
14
14
  function OverflowMenuV2(props) {
15
- if (process.env.NODE_ENV !== "production") {
15
+ if (process.env.NODE_ENV !== 'production') {
16
16
  process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<OverflowMenuV2>` is deprecated and will be removed in the next major version. Use `<OverflowMenu>` with the `enable-v12-overflowmenu` feature flag instead.') : void 0;
17
17
  didWarnAboutDeprecation = true;
18
18
  }
@@ -0,0 +1,101 @@
1
+ /**
2
+ * Copyright IBM Corp. 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import React, { type ComponentType, type FunctionComponent } from 'react';
8
+ /**
9
+ * ----------
10
+ * PageHeader
11
+ * ----------
12
+ */
13
+ interface PageHeaderProps {
14
+ children?: React.ReactNode;
15
+ className?: string;
16
+ }
17
+ declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
18
+ /**
19
+ * -----------------------
20
+ * PageHeaderBreadcrumbBar
21
+ * -----------------------
22
+ */
23
+ interface PageHeaderBreadcrumbBarProps {
24
+ children?: React.ReactNode;
25
+ className?: string;
26
+ }
27
+ declare const PageHeaderBreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
28
+ /**
29
+ * -----------------
30
+ * PageHeaderContent
31
+ * -----------------
32
+ */
33
+ interface PageHeaderContentProps {
34
+ /**
35
+ * Provide child elements to be rendered inside PageHeaderContent.
36
+ */
37
+ children?: React.ReactNode;
38
+ /**
39
+ * Specify an optional className to be added to your PageHeaderContent
40
+ */
41
+ className?: string;
42
+ /**
43
+ * Provide an optional icon to render in front of the PageHeaderContent's title.
44
+ */
45
+ renderIcon?: ComponentType | FunctionComponent;
46
+ /**
47
+ * The PageHeaderContent's title
48
+ */
49
+ title: string;
50
+ /**
51
+ * The PageHeaderContent's subtitle
52
+ */
53
+ subtitle?: string;
54
+ /**
55
+ * The PageHeaderContent's contextual actions
56
+ */
57
+ contextualActions?: React.ReactNode;
58
+ /**
59
+ * The PageHeaderContent's page actions
60
+ */
61
+ pageActions?: React.ReactNode;
62
+ }
63
+ declare const PageHeaderContent: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
64
+ /**
65
+ * ----------------
66
+ * PageHeaderHeroImage
67
+ * ----------------
68
+ */
69
+ interface PageHeaderHeroImageProps {
70
+ /**
71
+ * Provide child elements to be rendered inside PageHeaderHeroImage.
72
+ */
73
+ children?: React.ReactNode;
74
+ /**
75
+ * Specify an optional className to be added to your PageHeaderHeroImage
76
+ */
77
+ className?: string;
78
+ }
79
+ declare const PageHeaderHeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
80
+ /**
81
+ * ----------------
82
+ * PageHeaderTabBar
83
+ * ----------------
84
+ */
85
+ interface PageHeaderTabBarProps {
86
+ children?: React.ReactNode;
87
+ className?: string;
88
+ }
89
+ declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
90
+ /**
91
+ * -------
92
+ * Exports
93
+ * -------
94
+ */
95
+ declare const Root: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
96
+ declare const BreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
97
+ declare const Content: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
98
+ declare const HeroImage: React.ForwardRefExoticComponent<PageHeaderHeroImageProps & React.RefAttributes<HTMLDivElement>>;
99
+ declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
100
+ export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, HeroImage, TabBar, };
101
+ export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };
@@ -0,0 +1,241 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
+ import React__default, { useRef, useState, useLayoutEffect } from 'react';
10
+ import PropTypes from 'prop-types';
11
+ import cx from 'classnames';
12
+ import { usePrefix } from '../../internal/usePrefix.js';
13
+ import { breakpoints } from '@carbon/layout';
14
+ import { useMatchMedia } from '../../internal/useMatchMedia.js';
15
+ import '../Text/index.js';
16
+ import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
17
+ import '../Tooltip/Tooltip.js';
18
+ import AspectRatio from '../AspectRatio/AspectRatio.js';
19
+ import { Text } from '../Text/Text.js';
20
+
21
+ var _p, _p2, _p3;
22
+
23
+ /**
24
+ * ----------
25
+ * PageHeader
26
+ * ----------
27
+ */
28
+
29
+ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_ref, ref) {
30
+ let {
31
+ className,
32
+ children,
33
+ ...other
34
+ } = _ref;
35
+ const prefix = usePrefix();
36
+ const classNames = cx({
37
+ [`${prefix}--page-header`]: true
38
+ }, className);
39
+ return /*#__PURE__*/React__default.createElement("div", _extends({
40
+ className: classNames,
41
+ ref: ref
42
+ }, other), _p || (_p = /*#__PURE__*/React__default.createElement("p", null, "page header")), children);
43
+ });
44
+ PageHeader.displayName = 'PageHeader';
45
+
46
+ /**
47
+ * -----------------------
48
+ * PageHeaderBreadcrumbBar
49
+ * -----------------------
50
+ */
51
+
52
+ const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderBreadcrumbBar(_ref2, ref) {
53
+ let {
54
+ className,
55
+ children,
56
+ ...other
57
+ } = _ref2;
58
+ const prefix = usePrefix();
59
+ const classNames = cx({
60
+ [`${prefix}--page-header__breadcrumb-bar`]: true
61
+ }, className);
62
+ return /*#__PURE__*/React__default.createElement("div", _extends({
63
+ className: classNames,
64
+ ref: ref
65
+ }, other), _p2 || (_p2 = /*#__PURE__*/React__default.createElement("p", null, "page header breadcrumb bar")), children);
66
+ });
67
+ PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
68
+
69
+ /**
70
+ * -----------------
71
+ * PageHeaderContent
72
+ * -----------------
73
+ */
74
+
75
+ const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHeaderContent(_ref3, ref) {
76
+ let {
77
+ className,
78
+ children,
79
+ title,
80
+ subtitle,
81
+ renderIcon: IconElement,
82
+ contextualActions,
83
+ pageActions,
84
+ ...other
85
+ } = _ref3;
86
+ const prefix = usePrefix();
87
+ const classNames = cx({
88
+ [`${prefix}--page-header__content`]: true
89
+ }, className);
90
+ const titleRef = useRef(null);
91
+ const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
92
+ const isEllipsisActive = element => {
93
+ setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
94
+ return element.offsetHeight < element.scrollHeight;
95
+ };
96
+ useLayoutEffect(() => {
97
+ titleRef.current && isEllipsisActive(titleRef.current);
98
+ }, [title]);
99
+ return /*#__PURE__*/React__default.createElement("div", _extends({
100
+ className: classNames,
101
+ ref: ref
102
+ }, other), /*#__PURE__*/React__default.createElement("div", {
103
+ className: `${prefix}--page-header__content__title-wrapper`
104
+ }, /*#__PURE__*/React__default.createElement("div", {
105
+ className: `${prefix}--page-header__content__start`
106
+ }, /*#__PURE__*/React__default.createElement("div", {
107
+ className: `${prefix}--page-header__content__title-container`
108
+ }, IconElement && /*#__PURE__*/React__default.createElement("div", {
109
+ className: `${prefix}--page-header__content__icon`
110
+ }, /*#__PURE__*/React__default.createElement(IconElement, null)), isEllipsisApplied ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
111
+ definition: title
112
+ }, /*#__PURE__*/React__default.createElement(Text, {
113
+ ref: titleRef,
114
+ as: "h4",
115
+ className: `${prefix}--page-header__content__title`
116
+ }, title)) : /*#__PURE__*/React__default.createElement(Text, {
117
+ ref: titleRef,
118
+ as: "h4",
119
+ className: `${prefix}--page-header__content__title`
120
+ }, title)), contextualActions && /*#__PURE__*/React__default.createElement("div", {
121
+ className: `${prefix}--page-header__content__contextual-actions`
122
+ }, contextualActions)), /*#__PURE__*/React__default.createElement("div", {
123
+ className: `${prefix}--page-header__content__end`
124
+ }, pageActions && /*#__PURE__*/React__default.createElement("div", {
125
+ className: `${prefix}--page-header__content__page-actions`
126
+ }, pageActions))), subtitle && /*#__PURE__*/React__default.createElement(Text, {
127
+ as: "h3",
128
+ className: `${prefix}--page-header__content__subtitle`
129
+ }, subtitle), children && /*#__PURE__*/React__default.createElement("div", {
130
+ className: `${prefix}--page-header__content__body`
131
+ }, children));
132
+ });
133
+ PageHeaderContent.displayName = 'PageHeaderContent';
134
+ PageHeaderContent.propTypes = {
135
+ /**
136
+ * Provide child elements to be rendered inside PageHeaderContent.
137
+ */
138
+ children: PropTypes.node,
139
+ /**
140
+ * Specify an optional className to be added to your PageHeaderContent
141
+ */
142
+ className: PropTypes.string,
143
+ /**
144
+ * Provide an optional icon to render in front of the PageHeaderContent's title.
145
+ */
146
+ // @ts-expect-error: PropTypes are not expressive enough to cover this case
147
+ renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
148
+ /**
149
+ * The PageHeaderContent's title
150
+ */
151
+ title: PropTypes.string.isRequired,
152
+ /**
153
+ * The PageHeaderContent's subtitle
154
+ */
155
+ subtitle: PropTypes.string,
156
+ /**
157
+ * The PageHeaderContent's contextual actions
158
+ */
159
+ contextualActions: PropTypes.node,
160
+ /**
161
+ * The PageHeaderContent's page actions
162
+ */
163
+ pageActions: PropTypes.node
164
+ };
165
+
166
+ /**
167
+ * ----------------
168
+ * PageHeaderHeroImage
169
+ * ----------------
170
+ */
171
+
172
+ const PageHeaderHeroImage = /*#__PURE__*/React__default.forwardRef(function PageHeaderHeroImage(_ref4, ref) {
173
+ let {
174
+ className,
175
+ children,
176
+ ...other
177
+ } = _ref4;
178
+ const prefix = usePrefix();
179
+ const classNames = cx({
180
+ [`${prefix}--page-header__hero-image`]: true
181
+ }, className);
182
+ const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
183
+ const isLg = useMatchMedia(lgMediaQuery);
184
+ return /*#__PURE__*/React__default.createElement(AspectRatio, _extends({
185
+ className: classNames
186
+ }, other, {
187
+ ratio: isLg ? '2x1' : '3x2'
188
+ }), children);
189
+ });
190
+ PageHeaderHeroImage.displayName = 'PageHeaderHeroImage';
191
+ PageHeaderHeroImage.propTypes = {
192
+ /**
193
+ * Provide child elements to be rendered inside PageHeaderHeroImage.
194
+ */
195
+ children: PropTypes.node,
196
+ /**
197
+ * Specify an optional className to be added to your PageHeaderHeroImage
198
+ */
199
+ className: PropTypes.string
200
+ };
201
+
202
+ /**
203
+ * ----------------
204
+ * PageHeaderTabBar
205
+ * ----------------
206
+ */
207
+
208
+ const PageHeaderTabBar = /*#__PURE__*/React__default.forwardRef(function PageHeaderTabBar(_ref5, ref) {
209
+ let {
210
+ className,
211
+ children,
212
+ ...other
213
+ } = _ref5;
214
+ const prefix = usePrefix();
215
+ const classNames = cx({
216
+ [`${prefix}--page-header__tab-bar`]: true
217
+ }, className);
218
+ return /*#__PURE__*/React__default.createElement("div", _extends({
219
+ className: classNames,
220
+ ref: ref
221
+ }, other), _p3 || (_p3 = /*#__PURE__*/React__default.createElement("p", null, "page header tab bar")), children);
222
+ });
223
+ PageHeaderTabBar.displayName = 'PageHeaderTabBar';
224
+
225
+ /**
226
+ * -------
227
+ * Exports
228
+ * -------
229
+ */
230
+ const Root = PageHeader;
231
+ Root.displayName = 'PageHeader.Root';
232
+ const BreadcrumbBar = PageHeaderBreadcrumbBar;
233
+ BreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
234
+ const Content = PageHeaderContent;
235
+ Content.displayName = 'PageHeaderContent';
236
+ const HeroImage = PageHeaderHeroImage;
237
+ HeroImage.displayName = 'PageHeaderHeroImage';
238
+ const TabBar = PageHeaderTabBar;
239
+ TabBar.displayName = 'PageHeaderTabBar';
240
+
241
+ export { BreadcrumbBar, Content, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar };
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2025
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, TabBar, HeroImage, } from './PageHeader';
8
+ export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ export { BreadcrumbBar, Content, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar } from './PageHeader.js';
@@ -1,3 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
1
7
  import ControlledPasswordInput from '../TextInput/ControlledPasswordInput';
2
8
  import PasswordInput from '../TextInput/PasswordInput';
3
9
  export { ControlledPasswordInput, PasswordInput };
@@ -264,7 +264,7 @@ const Popover = /*#__PURE__*/React__default.forwardRef(function PopoverRenderFun
264
264
 
265
265
  // Note: this displayName is temporarily set so that Storybook ArgTable
266
266
  // correctly displays the name of this component
267
- if (process.env.NODE_ENV !== "production") {
267
+ if (process.env.NODE_ENV !== 'production') {
268
268
  Popover.displayName = 'Popover';
269
269
  }
270
270
  Popover.propTypes = {
@@ -1,3 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2023, 2024
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
1
7
  export declare const LowerHandle: (props: any) => import("react/jsx-runtime").JSX.Element;
2
8
  export declare const LowerHandleFocus: (props: any) => import("react/jsx-runtime").JSX.Element;
3
9
  export declare const UpperHandle: (props: any) => import("react/jsx-runtime").JSX.Element;
@@ -17,7 +17,7 @@ import deprecate from '../../prop-types/deprecate.js';
17
17
  import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
18
18
  import '../Tooltip/Tooltip.js';
19
19
  import { isEllipsisActive } from './isEllipsisActive.js';
20
- import { useMergeRefs } from '@floating-ui/react';
20
+ import { useMergedRefs } from '../../internal/useMergedRefs.js';
21
21
  import { Text } from '../Text/Text.js';
22
22
 
23
23
  var _Close;
@@ -62,7 +62,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, forwardRef) => {
62
62
  } = _ref;
63
63
  const prefix = usePrefix();
64
64
  const tagRef = useRef();
65
- const ref = useMergeRefs([forwardRef, tagRef]);
65
+ const ref = useMergedRefs([forwardRef, tagRef]);
66
66
  const tagId = id || `tag-${useId()}`;
67
67
  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
68
68
  useLayoutEffect(() => {
@@ -22,7 +22,7 @@ const createTextComponent = (element, displayName) => {
22
22
  as: element
23
23
  }, props));
24
24
  };
25
- if (process.env.NODE_ENV !== "production") {
25
+ if (process.env.NODE_ENV !== 'production') {
26
26
  TextWrapper.displayName = displayName;
27
27
  }
28
28
  return TextWrapper;
@@ -1,10 +1,10 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
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
- import React, { ReactNode } from 'react';
7
+ import React, { type ReactNode } from 'react';
8
8
  export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
9
9
  /**
10
10
  * Provide a custom className that is applied directly to the underlying
@@ -115,5 +115,5 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
115
115
  */
116
116
  counterMode?: 'character' | 'word';
117
117
  }
118
- declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<unknown>>;
118
+ declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
119
119
  export default TextArea;