@carbon/react 1.77.0 → 1.78.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 (126) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +945 -858
  2. package/es/components/Accordion/AccordionItem.js +1 -1
  3. package/es/components/BadgeIndicator/index.d.ts +23 -0
  4. package/es/components/BadgeIndicator/index.js +45 -0
  5. package/es/components/Breadcrumb/Breadcrumb.d.ts +5 -0
  6. package/es/components/Breadcrumb/Breadcrumb.js +8 -2
  7. package/es/components/Button/Button.d.ts +9 -0
  8. package/es/components/Button/Button.js +13 -0
  9. package/es/components/ComboBox/ComboBox.js +13 -9
  10. package/es/components/Dropdown/Dropdown.d.ts +1 -1
  11. package/es/components/Dropdown/Dropdown.js +3 -2
  12. package/es/components/FileUploader/FileUploader.js +1 -1
  13. package/es/components/FileUploader/FileUploaderItem.js +1 -1
  14. package/es/components/IconButton/index.d.ts +7 -1
  15. package/es/components/IconButton/index.js +18 -2
  16. package/es/components/IconIndicator/index.d.ts +1 -1
  17. package/es/components/InlineLoading/InlineLoading.js +2 -5
  18. package/es/components/Menu/MenuItem.js +1 -1
  19. package/es/components/Modal/Modal.d.ts +3 -3
  20. package/es/components/Modal/Modal.js +9 -3
  21. package/es/components/Modal/next/index.d.ts +1 -5
  22. package/es/components/MultiSelect/MultiSelect.js +3 -2
  23. package/es/components/MultiSelect/MultiSelectPropTypes.d.ts +5 -2
  24. package/es/components/MultiSelect/tools/sorting.js +8 -7
  25. package/es/components/Notification/Notification.js +1 -1
  26. package/es/components/NumberInput/NumberInput.js +12 -12
  27. package/es/components/OverflowMenu/OverflowMenu.d.ts +8 -20
  28. package/es/components/OverflowMenu/OverflowMenu.js +7 -9
  29. package/es/components/OverflowMenuItem/OverflowMenuItem.js +1 -1
  30. package/es/components/ProgressIndicator/ProgressIndicator.js +1 -1
  31. package/es/components/RadioTile/RadioTile.js +1 -1
  32. package/es/components/Select/Select.js +11 -2
  33. package/es/components/ShapeIndicator/index.d.ts +29 -0
  34. package/es/components/ShapeIndicator/index.js +92 -0
  35. package/es/components/Tabs/Tabs.d.ts +6 -4
  36. package/es/components/Tabs/Tabs.js +27 -8
  37. package/es/components/Tag/OperationalTag.d.ts +1 -36
  38. package/es/components/Tag/OperationalTag.js +7 -5
  39. package/es/components/Text/Text.d.ts +11 -9
  40. package/es/components/Text/Text.js +6 -6
  41. package/es/components/Text/TextDirection.d.ts +7 -9
  42. package/es/components/Text/TextDirection.js +5 -2
  43. package/es/components/Text/TextDirectionContext.d.ts +14 -0
  44. package/es/components/Text/TextDirectionContext.js +6 -2
  45. package/es/components/Text/createTextComponent.d.ts +5 -5
  46. package/es/components/Text/createTextComponent.js +5 -4
  47. package/es/components/Text/index.d.ts +6 -7
  48. package/es/components/Text/index.js +3 -2
  49. package/es/components/Tile/Tile.d.ts +6 -0
  50. package/es/components/Tile/Tile.js +5 -9
  51. package/es/components/Toggletip/index.d.ts +3 -2
  52. package/es/components/Tooltip/DefinitionTooltip.d.ts +4 -0
  53. package/es/components/Tooltip/DefinitionTooltip.js +7 -1
  54. package/es/components/Tooltip/Tooltip.d.ts +5 -66
  55. package/es/components/Tooltip/Tooltip.js +26 -26
  56. package/es/components/UIShell/HeaderGlobalAction.d.ts +9 -0
  57. package/es/components/UIShell/HeaderGlobalAction.js +16 -1
  58. package/es/index.d.ts +4 -1
  59. package/es/index.js +2 -1
  60. package/es/internal/FloatingMenu.d.ts +83 -0
  61. package/es/internal/FloatingMenu.js +216 -408
  62. package/es/internal/wrapFocus.js +1 -1
  63. package/lib/components/Accordion/AccordionItem.js +1 -1
  64. package/lib/components/BadgeIndicator/index.d.ts +23 -0
  65. package/lib/components/BadgeIndicator/index.js +56 -0
  66. package/lib/components/Breadcrumb/Breadcrumb.d.ts +5 -0
  67. package/lib/components/Breadcrumb/Breadcrumb.js +8 -2
  68. package/lib/components/Button/Button.d.ts +9 -0
  69. package/lib/components/Button/Button.js +13 -0
  70. package/lib/components/ComboBox/ComboBox.js +13 -9
  71. package/lib/components/Dropdown/Dropdown.d.ts +1 -1
  72. package/lib/components/Dropdown/Dropdown.js +2 -1
  73. package/lib/components/FileUploader/FileUploader.js +1 -1
  74. package/lib/components/FileUploader/FileUploaderItem.js +1 -1
  75. package/lib/components/IconButton/index.d.ts +7 -1
  76. package/lib/components/IconButton/index.js +18 -2
  77. package/lib/components/IconIndicator/index.d.ts +1 -1
  78. package/lib/components/InlineLoading/InlineLoading.js +2 -5
  79. package/lib/components/Menu/MenuItem.js +1 -1
  80. package/lib/components/Modal/Modal.d.ts +3 -3
  81. package/lib/components/Modal/Modal.js +9 -3
  82. package/lib/components/Modal/next/index.d.ts +1 -5
  83. package/lib/components/MultiSelect/MultiSelect.js +2 -1
  84. package/lib/components/MultiSelect/MultiSelectPropTypes.d.ts +5 -2
  85. package/lib/components/MultiSelect/tools/sorting.js +8 -7
  86. package/lib/components/Notification/Notification.js +1 -1
  87. package/lib/components/NumberInput/NumberInput.js +12 -12
  88. package/lib/components/OverflowMenu/OverflowMenu.d.ts +8 -20
  89. package/lib/components/OverflowMenu/OverflowMenu.js +7 -9
  90. package/lib/components/OverflowMenuItem/OverflowMenuItem.js +1 -1
  91. package/lib/components/ProgressIndicator/ProgressIndicator.js +1 -1
  92. package/lib/components/RadioTile/RadioTile.js +1 -1
  93. package/lib/components/Select/Select.js +11 -2
  94. package/lib/components/ShapeIndicator/index.d.ts +29 -0
  95. package/lib/components/ShapeIndicator/index.js +104 -0
  96. package/lib/components/Tabs/Tabs.d.ts +6 -4
  97. package/lib/components/Tabs/Tabs.js +42 -23
  98. package/lib/components/Tag/OperationalTag.d.ts +1 -36
  99. package/lib/components/Tag/OperationalTag.js +6 -4
  100. package/lib/components/Text/Text.d.ts +11 -9
  101. package/lib/components/Text/Text.js +5 -5
  102. package/lib/components/Text/TextDirection.d.ts +7 -9
  103. package/lib/components/Text/TextDirection.js +5 -2
  104. package/lib/components/Text/TextDirectionContext.d.ts +14 -0
  105. package/lib/components/Text/TextDirectionContext.js +6 -2
  106. package/lib/components/Text/createTextComponent.d.ts +5 -5
  107. package/lib/components/Text/createTextComponent.js +5 -4
  108. package/lib/components/Text/index.d.ts +6 -7
  109. package/lib/components/Text/index.js +4 -3
  110. package/lib/components/Tile/Tile.d.ts +6 -0
  111. package/lib/components/Tile/Tile.js +5 -9
  112. package/lib/components/Toggletip/index.d.ts +3 -2
  113. package/lib/components/Tooltip/DefinitionTooltip.d.ts +4 -0
  114. package/lib/components/Tooltip/DefinitionTooltip.js +7 -1
  115. package/lib/components/Tooltip/Tooltip.d.ts +5 -66
  116. package/lib/components/Tooltip/Tooltip.js +26 -26
  117. package/lib/components/UIShell/HeaderGlobalAction.d.ts +9 -0
  118. package/lib/components/UIShell/HeaderGlobalAction.js +16 -1
  119. package/lib/index.d.ts +4 -1
  120. package/lib/index.js +42 -40
  121. package/lib/internal/FloatingMenu.d.ts +83 -0
  122. package/lib/internal/FloatingMenu.js +216 -409
  123. package/lib/internal/wrapFocus.js +1 -1
  124. package/package.json +5 -5
  125. package/scss/components/badge-indicator/_badge-indicator.scss +9 -0
  126. package/scss/components/badge-indicator/_index.scss +9 -0
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 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 { type MutableRefObject } from 'react';
8
+ export type TextDir = 'ltr' | 'rtl' | 'auto' | string;
9
+ export type GetTextDirection = (text: string | string[] | undefined) => TextDir;
10
+ export interface TextDirectionContextType {
11
+ direction: TextDir;
12
+ getTextDirection: MutableRefObject<GetTextDirection | undefined>;
13
+ }
14
+ export declare const TextDirectionContext: import("react").Context<TextDirectionContextType>;
@@ -7,7 +7,11 @@
7
7
 
8
8
  import { createContext } from 'react';
9
9
 
10
- /** @type any */
11
- const TextDirectionContext = /*#__PURE__*/createContext(null);
10
+ const TextDirectionContext = /*#__PURE__*/createContext({
11
+ direction: 'auto',
12
+ getTextDirection: {
13
+ current: undefined
14
+ }
15
+ });
12
16
 
13
17
  export { TextDirectionContext };
@@ -1,18 +1,18 @@
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 from 'react';
8
- import { TextProps } from './Text';
7
+ import { type ElementType } from 'react';
8
+ import { TextProps } from '.';
9
9
  /**
10
10
  * Create a text component wrapper for a given text node type. Useful for
11
11
  * returning a `Text` component for a text node like a `<label>`.
12
12
  * @param {string} element
13
13
  * @param {string} displayName
14
14
  */
15
- export declare function createTextComponent(element: React.ElementType, displayName: string): {
16
- (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
15
+ export declare const createTextComponent: (element: ElementType, displayName: string) => {
16
+ (props: TextProps<ElementType>): import("react/jsx-runtime").JSX.Element;
17
17
  displayName: string;
18
18
  };
@@ -7,6 +7,7 @@
7
7
 
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import React__default from 'react';
10
+ import './index.js';
10
11
  import { Text } from './Text.js';
11
12
 
12
13
  /**
@@ -15,16 +16,16 @@ import { Text } from './Text.js';
15
16
  * @param {string} element
16
17
  * @param {string} displayName
17
18
  */
18
- function createTextComponent(element, displayName) {
19
- function TextWrapper(props) {
19
+ const createTextComponent = (element, displayName) => {
20
+ const TextWrapper = props => {
20
21
  return /*#__PURE__*/React__default.createElement(Text, _extends({
21
22
  as: element
22
23
  }, props));
23
- }
24
+ };
24
25
  if (process.env.NODE_ENV !== "production") {
25
26
  TextWrapper.displayName = displayName;
26
27
  }
27
28
  return TextWrapper;
28
- }
29
+ };
29
30
 
30
31
  export { createTextComponent };
@@ -1,18 +1,17 @@
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 { TextDirection, TextDirectionProps, GetTextDirection, TextDir } from './TextDirection';
8
- import { Text, TextBaseProps, TextProps } from './Text';
9
- export { TextDirection, Text };
10
- export type { TextBaseProps, TextProps, TextDirectionProps, GetTextDirection, TextDir, };
7
+ export * from './Text';
8
+ export * from './TextDirection';
9
+ export * from './TextDirectionContext';
11
10
  export declare const Label: {
12
- (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
11
+ (props: import("./Text").TextProps<import("react").ElementType>): import("react/jsx-runtime").JSX.Element;
13
12
  displayName: string;
14
13
  };
15
14
  export declare const Legend: {
16
- (props: TextProps<React.ElementType>): import("react/jsx-runtime").JSX.Element;
15
+ (props: import("./Text").TextProps<import("react").ElementType>): import("react/jsx-runtime").JSX.Element;
17
16
  displayName: string;
18
17
  };
@@ -5,9 +5,10 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- export { TextDirection } from './TextDirection.js';
9
- export { Text } from './Text.js';
10
8
  import { createTextComponent } from './createTextComponent.js';
9
+ export { Text } from './Text.js';
10
+ export { TextDirection } from './TextDirection.js';
11
+ import 'react';
11
12
 
12
13
  createTextComponent('label', 'Label');
13
14
  const Legend = createTextComponent('legend', 'Legend');
@@ -1,3 +1,9 @@
1
+ /**
2
+ * Copyright IBM Corp. 2019, 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 KeyboardEvent, type HTMLAttributes, type ChangeEvent, type ComponentType } from 'react';
2
8
  export interface TileProps extends HTMLAttributes<HTMLDivElement> {
3
9
  children?: ReactNode;
@@ -20,8 +20,8 @@ import { useMergedRefs } from '../../internal/useMergedRefs.js';
20
20
  import { useFeatureFlag } from '../FeatureFlags/index.js';
21
21
  import { useId } from '../../internal/useId.js';
22
22
  import '../Text/index.js';
23
- import { Text } from '../Text/Text.js';
24
23
  import { matches } from '../../internal/keyboard/match.js';
24
+ import { Text } from '../Text/Text.js';
25
25
  import { Enter, Space } from '../../internal/keyboard/keys.js';
26
26
 
27
27
  var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
@@ -239,9 +239,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
239
239
  [`${prefix}--tile--decorator`]: decorator,
240
240
  [`${prefix}--tile--decorator-rounded`]: decorator && hasRoundedCorners
241
241
  }, className);
242
-
243
- // TODO: rename to handleClick when handleClick prop is deprecated
244
- function handleOnClick(evt) {
242
+ function handleClick(evt) {
245
243
  evt.preventDefault();
246
244
  evt?.persist?.();
247
245
  if (normalizedDecorator && decoratorRef.current && decoratorRef.current.contains(evt.target)) {
@@ -251,9 +249,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
251
249
  clickHandler(evt);
252
250
  onChange(evt, isSelected, id);
253
251
  }
254
-
255
- // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
256
- function handleOnKeyDown(evt) {
252
+ function handleKeyDown(evt) {
257
253
  evt?.persist?.();
258
254
  if (matches(evt, [Enter, Space])) {
259
255
  evt.preventDefault();
@@ -285,10 +281,10 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
285
281
  // eslint-disable-next-line jsx-a11y/interactive-supports-focus
286
282
  React__default.createElement("div", _extends({
287
283
  className: classes,
288
- onClick: !disabled ? handleOnClick : undefined,
284
+ onClick: !disabled ? handleClick : undefined,
289
285
  role: "checkbox",
290
286
  "aria-checked": isSelected,
291
- onKeyDown: !disabled ? handleOnKeyDown : undefined
287
+ onKeyDown: !disabled ? handleKeyDown : undefined
292
288
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
293
289
  ,
294
290
  tabIndex: !disabled ? tabIndex : undefined,
@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
8
8
  import React, { type ElementType, type ReactNode } from 'react';
9
9
  import { type PopoverAlignment } from '../Popover';
10
10
  import { PolymorphicProps } from '../../types/common';
11
+ import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
11
12
  type ToggletipLabelProps<E extends ElementType> = {
12
13
  as?: E;
13
14
  children?: ReactNode;
@@ -35,15 +36,15 @@ export declare namespace ToggletipLabel {
35
36
  className: PropTypes.Requireable<string>;
36
37
  };
37
38
  }
38
- export interface ToggletipProps<E extends ElementType> {
39
+ export interface ToggletipBaseProps {
39
40
  align?: PopoverAlignment;
40
41
  alignmentAxisOffset?: number;
41
- as?: E;
42
42
  autoAlign?: boolean;
43
43
  className?: string;
44
44
  children?: ReactNode;
45
45
  defaultOpen?: boolean;
46
46
  }
47
+ export type ToggletipProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, ToggletipBaseProps>;
47
48
  /**
48
49
  * Used as a container for the button and content of a toggletip. This component
49
50
  * is responsible for coordinating between interactions with the button and the
@@ -11,6 +11,10 @@ export interface DefinitionTooltipProps extends Omit<React.ButtonHTMLAttributes<
11
11
  * Specify how the trigger should align with the tooltip
12
12
  */
13
13
  align?: PopoverAlignment;
14
+ /**
15
+ * Will auto-align Definition Tooltip. This prop is currently experimental and is subject to future changes.
16
+ */
17
+ autoAlign?: boolean;
14
18
  /**
15
19
  * The `children` prop will be used as the value that is being defined
16
20
  */
@@ -18,7 +18,8 @@ import { Escape } from '../../internal/keyboard/keys.js';
18
18
 
19
19
  const DefinitionTooltip = _ref => {
20
20
  let {
21
- align = 'bottom-start',
21
+ align = 'bottom',
22
+ autoAlign,
22
23
  className,
23
24
  children,
24
25
  definition,
@@ -41,6 +42,7 @@ const DefinitionTooltip = _ref => {
41
42
  return /*#__PURE__*/React__default.createElement(Popover, {
42
43
  align: align,
43
44
  className: className,
45
+ autoAlign: autoAlign,
44
46
  dropShadow: false,
45
47
  highContrast: true,
46
48
  onMouseLeave: () => {
@@ -98,6 +100,10 @@ DefinitionTooltip.propTypes = {
98
100
 
99
101
  // new values to match floating-ui
100
102
  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
103
+ /**
104
+ * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
105
+ */
106
+ autoAlign: PropTypes.bool,
101
107
  /**
102
108
  * The `children` prop will be used as the value that is being defined
103
109
  */
@@ -4,10 +4,9 @@
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 PropTypes from 'prop-types';
8
7
  import React from 'react';
9
- import { PopoverAlignment } from '../Popover';
10
- import { type PolymorphicProps } from '../../types/common';
8
+ import { Popover, PopoverAlignment } from '../Popover';
9
+ import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
11
10
  interface TooltipBaseProps {
12
11
  /**
13
12
  * Specify how the trigger should align with the tooltip
@@ -67,67 +66,7 @@ interface TooltipBaseProps {
67
66
  */
68
67
  leaveDelayMs?: number;
69
68
  }
70
- export type TooltipProps<T extends React.ElementType> = PolymorphicProps<T, TooltipBaseProps>;
71
- declare function Tooltip<T extends React.ElementType>({ align, className: customClassName, children, label, description, enterDelayMs, leaveDelayMs, defaultOpen, closeOnActivation, dropShadow, highContrast, ...rest }: TooltipProps<T>): import("react/jsx-runtime").JSX.Element;
72
- declare namespace Tooltip {
73
- var propTypes: {
74
- /**
75
- * Specify how the trigger should align with the tooltip
76
- */
77
- align: PropTypes.Requireable<string>;
78
- /**
79
- * Pass in the child to which the tooltip will be applied
80
- */
81
- children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
82
- /**
83
- * Specify an optional className to be applied to the container node
84
- */
85
- className: PropTypes.Requireable<string>;
86
- /**
87
- * Determines wether the tooltip should close when inner content is activated (click, Enter or Space)
88
- */
89
- closeOnActivation: PropTypes.Requireable<boolean>;
90
- /**
91
- * Specify whether the tooltip should be open when it first renders
92
- */
93
- defaultOpen: PropTypes.Requireable<boolean>;
94
- /**
95
- * Provide the description to be rendered inside of the Tooltip. The
96
- * description will use `aria-describedby` and will describe the child node
97
- * in addition to the text rendered inside of the child. This means that if you
98
- * have text in the child node, that it will be announced alongside the
99
- * description to the screen reader.
100
- *
101
- * Note: if label and description are both provided, label will be used and
102
- * description will not be used
103
- */
104
- description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
105
- /**
106
- * Specify whether a drop shadow should be rendered
107
- */
108
- dropShadow: PropTypes.Requireable<boolean>;
109
- /**
110
- * Specify the duration in milliseconds to delay before displaying the tooltip
111
- */
112
- enterDelayMs: PropTypes.Requireable<number>;
113
- /**
114
- * Render the component using the high-contrast theme
115
- */
116
- highContrast: PropTypes.Requireable<boolean>;
117
- /**
118
- * Provide the label to be rendered inside of the Tooltip. The label will use
119
- * `aria-labelledby` and will fully describe the child node that is provided.
120
- * This means that if you have text in the child node, that it will not be
121
- * announced to the screen reader.
122
- *
123
- * Note: if label and description are both provided, description will not be
124
- * used
125
- */
126
- label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
127
- /**
128
- * Specify the duration in milliseconds to delay before hiding the tooltip
129
- */
130
- leaveDelayMs: PropTypes.Requireable<number>;
131
- };
132
- }
69
+ export type TooltipProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, TooltipBaseProps>;
70
+ type TooltipComponent = <T extends React.ElementType = typeof Popover>(props: TooltipProps<T>) => React.ReactElement | any;
71
+ declare const Tooltip: TooltipComponent;
133
72
  export { Tooltip };
@@ -22,8 +22,9 @@ import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
22
22
  * Event types that trigger a "drag" to stop.
23
23
  */
24
24
  const DRAG_STOP_EVENT_TYPES = new Set(['mouseup', 'touchend', 'touchcancel']);
25
- function Tooltip(_ref) {
25
+ const Tooltip = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
26
26
  let {
27
+ as,
27
28
  align = 'top',
28
29
  className: customClassName,
29
30
  children,
@@ -150,31 +151,30 @@ function Tooltip(_ref) {
150
151
  });
151
152
  };
152
153
  }, [isDragging, onDragStop]);
153
- return (
154
- /*#__PURE__*/
155
- // @ts-ignore-error Popover throws a TS error everytime is imported
156
- React__default.createElement(Popover, _extends({}, rest, {
157
- align: align,
158
- className: cx(`${prefix}--tooltip`, customClassName),
159
- dropShadow: dropShadow,
160
- highContrast: highContrast,
161
- onKeyDown: onKeyDown,
162
- onMouseLeave: onMouseLeave,
163
- open: open
164
- }), /*#__PURE__*/React__default.createElement("div", {
165
- className: `${prefix}--tooltip-trigger__wrapper`
166
- }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
167
- ...triggerProps,
168
- ...getChildEventHandlers(child.props)
169
- }) : null), /*#__PURE__*/React__default.createElement(PopoverContent, {
170
- "aria-hidden": open ? 'false' : 'true',
171
- className: `${prefix}--tooltip-content`,
172
- id: id,
173
- onMouseEnter: onMouseEnter,
174
- role: "tooltip"
175
- }, label || description))
176
- );
177
- }
154
+ return /*#__PURE__*/React__default.createElement(Popover, _extends({
155
+ as: as,
156
+ ref: ref
157
+ }, rest, {
158
+ align: align,
159
+ className: cx(`${prefix}--tooltip`, customClassName),
160
+ dropShadow: dropShadow,
161
+ highContrast: highContrast,
162
+ onKeyDown: onKeyDown,
163
+ onMouseLeave: onMouseLeave,
164
+ open: open
165
+ }), /*#__PURE__*/React__default.createElement("div", {
166
+ className: `${prefix}--tooltip-trigger__wrapper`
167
+ }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
168
+ ...triggerProps,
169
+ ...getChildEventHandlers(child.props)
170
+ }) : null), /*#__PURE__*/React__default.createElement(PopoverContent, {
171
+ "aria-hidden": open ? 'false' : 'true',
172
+ className: `${prefix}--tooltip-content`,
173
+ id: id,
174
+ onMouseEnter: onMouseEnter,
175
+ role: "tooltip"
176
+ }, label || description));
177
+ });
178
178
  Tooltip.propTypes = {
179
179
  /**
180
180
  * Specify how the trigger should align with the tooltip
@@ -37,6 +37,15 @@ export interface HeaderGlobalActionProps {
37
37
  * Can be one of: start, center, or end.
38
38
  */
39
39
  tooltipAlignment?: 'start' | 'center' | 'end';
40
+ /**
41
+ * Enable drop shadow for tooltips for icon-only buttons.
42
+ */
43
+ tooltipDropShadow?: boolean;
44
+ /**
45
+ * Render the tooltip using the high-contrast theme
46
+ * Default is true
47
+ */
48
+ tooltipHighContrast?: boolean;
40
49
  }
41
50
  /**
42
51
  * HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is
@@ -29,6 +29,8 @@ const HeaderGlobalAction = /*#__PURE__*/React__default.forwardRef(function Heade
29
29
  children,
30
30
  className: customClassName,
31
31
  onClick,
32
+ tooltipHighContrast = true,
33
+ tooltipDropShadow,
32
34
  isActive,
33
35
  tooltipAlignment,
34
36
  ...rest
@@ -48,9 +50,13 @@ const HeaderGlobalAction = /*#__PURE__*/React__default.forwardRef(function Heade
48
50
  onClick: onClick,
49
51
  type: "button",
50
52
  hasIconOnly: true,
53
+ size: "lg",
54
+ kind: "ghost",
51
55
  iconDescription: ariaLabel,
52
56
  tooltipPosition: "bottom",
53
57
  tooltipAlignment: tooltipAlignment,
58
+ tooltipDropShadow: tooltipDropShadow,
59
+ tooltipHighContrast: tooltipHighContrast,
54
60
  ref: ref
55
61
  }), children);
56
62
  });
@@ -81,7 +87,16 @@ HeaderGlobalAction.propTypes = {
81
87
  * Specify the alignment of the tooltip to the icon-only button.
82
88
  * Can be one of: start, center, or end.
83
89
  */
84
- tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end'])
90
+ tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
91
+ /**
92
+ * Enable drop shadow for tooltips for icon-only buttons.
93
+ */
94
+ tooltipDropShadow: PropTypes.bool,
95
+ /**
96
+ * Render the tooltip using the high-contrast theme
97
+ * Default is true
98
+ */
99
+ tooltipHighContrast: PropTypes.bool
85
100
  };
86
101
  HeaderGlobalAction.displayName = 'HeaderGlobalAction';
87
102
 
package/es/index.d.ts CHANGED
@@ -117,6 +117,8 @@ export { PageSelector as unstable_PageSelector, Pagination as unstable_Paginatio
117
117
  export * from './components/Popover';
118
118
  export * from './components/ProgressBar';
119
119
  export { AILabel, AILabelContent, AILabelActions } from './components/AILabel';
120
+ export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator';
121
+ export { ShapeIndicator as unstable__ShapeIndicator } from './components/ShapeIndicator';
120
122
  export { AILabel as unstable__Slug, AILabelContent as unstable__SlugContent, AILabelActions as unstable__SlugActions, } from './components/AILabel';
121
123
  export { ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, } from './components/ChatButton';
122
124
  export { AISkeletonText, AISkeletonIcon, AISkeletonPlaceholder, } from './components/AISkeleton';
@@ -224,6 +226,7 @@ export type { RowProps } from './components/Grid/Row';
224
226
  export type { SectionProps } from './components/Heading/index';
225
227
  export type { IconSkeletonProps } from './components/Icon/Icon.Skeleton';
226
228
  export type { IconButtonProps } from './components/IconButton/index';
229
+ export type { IconIndicatorProps } from './components/IconIndicator/index';
227
230
  export type { IdPrefixProps } from './components/IdPrefix/index';
228
231
  export type { InlineCheckboxProps } from './components/InlineCheckbox';
229
232
  export type { InlineLoadingProps } from './components/InlineLoading/InlineLoading';
@@ -282,6 +285,7 @@ export type { SelectProps } from './components/Select/Select';
282
285
  export type { SelectSkeletonProps } from './components/Select/Select.Skeleton';
283
286
  export type { SelectItemProps } from './components/SelectItem/SelectItem';
284
287
  export type { SelectItemGroupProps } from './components/SelectItemGroup/SelectItemGroup';
288
+ export type { ShapeIndicatorProps } from './components/ShapeIndicator/index';
285
289
  export type { SkeletonIconProps } from './components/SkeletonIcon/SkeletonIcon';
286
290
  export type { SkeletonPlaceholderProps } from './components/SkeletonPlaceholder/SkeletonPlaceholder';
287
291
  export type { SkeletonTextProps } from './components/SkeletonText/SkeletonText';
@@ -367,4 +371,3 @@ export type { BaseSwitcherProps } from './components/UIShell/Switcher';
367
371
  export type { SwitcherDividerProps } from './components/UIShell/SwitcherDivider';
368
372
  export type { SwitcherItemProps } from './components/UIShell/SwitcherItem';
369
373
  export type { UnorderedListProps } from './components/UnorderedList/UnorderedList';
370
- export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator';
package/es/index.js CHANGED
@@ -190,6 +190,8 @@ export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/Overflow
190
190
  export { Popover, PopoverContent } from './components/Popover/index.js';
191
191
  export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
192
192
  export { AILabel, AILabelActions, AILabelContent, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent } from './components/AILabel/index.js';
193
+ export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator/index.js';
194
+ export { ShapeIndicator as unstable__ShapeIndicator } from './components/ShapeIndicator/index.js';
193
195
  export { default as unstable__ChatButton } from './components/ChatButton/ChatButton.js';
194
196
  export { default as unstable__ChatButtonSkeleton } from './components/ChatButton/ChatButton.Skeleton.js';
195
197
  export { default as AISkeletonPlaceholder, default as unstable__AiSkeletonPlaceholder } from './components/AISkeleton/AISkeletonPlaceholder.js';
@@ -201,7 +203,6 @@ import './components/Text/index.js';
201
203
  export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from './components/Theme/index.js';
202
204
  export { PrefixContext, usePrefix } from './internal/usePrefix.js';
203
205
  export { useIdPrefix } from './internal/useIdPrefix.js';
204
- export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator/index.js';
205
206
  export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
206
207
  export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
207
208
  export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
@@ -0,0 +1,83 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 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 { type CSSProperties, type ReactElement, type RefObject } from 'react';
8
+ export declare const DIRECTION_LEFT = "left";
9
+ export declare const DIRECTION_TOP = "top";
10
+ export declare const DIRECTION_RIGHT = "right";
11
+ export declare const DIRECTION_BOTTOM = "bottom";
12
+ export interface Offset {
13
+ top?: number;
14
+ left?: number;
15
+ }
16
+ interface Container {
17
+ rect: DOMRect;
18
+ position: string;
19
+ }
20
+ export type MenuDirection = typeof DIRECTION_LEFT | typeof DIRECTION_TOP | typeof DIRECTION_RIGHT | typeof DIRECTION_BOTTOM;
21
+ export type MenuOffset = Offset | ((menuBody: HTMLElement, menuDirection: MenuDirection, triggerEl?: HTMLElement | null, flipped?: boolean) => Offset);
22
+ interface FloatingMenuProps {
23
+ /**
24
+ * Contents of the floating menu.
25
+ */
26
+ children: ReactElement;
27
+ /**
28
+ * Whether the menu alignment should be flipped.
29
+ */
30
+ flipped?: boolean;
31
+ /**
32
+ * Enable or disable focus trap behavior.
33
+ */
34
+ focusTrap?: boolean;
35
+ /**
36
+ * Where to put the menu relative to the trigger.
37
+ */
38
+ menuDirection?: MenuDirection;
39
+ /**
40
+ * The adjustment of the floating menu's position.
41
+ */
42
+ menuOffset?: MenuOffset;
43
+ /**
44
+ * Callback when the menu body is mounted/unmounted.
45
+ */
46
+ menuRef?: (menuBody: HTMLElement | null) => void;
47
+ /**
48
+ * Callback when the menu body has been placed.
49
+ */
50
+ onPlace?: (menuBody: HTMLElement) => void;
51
+ /**
52
+ * CSS selector for the element to focus when the menu opens.
53
+ */
54
+ selectorPrimaryFocus?: string;
55
+ /**
56
+ * Additional styles to apply to the menu.
57
+ */
58
+ styles?: CSSProperties;
59
+ /**
60
+ * Function returning the element where the floating menu is rendered.
61
+ * @default () => document.body
62
+ */
63
+ target?: () => Element;
64
+ /**
65
+ * The `ref` of the tooltip’s trigger element. It is assumed to be a
66
+ * `RefObject` pointing to an `HTMLElement`.
67
+ */
68
+ triggerRef: RefObject<HTMLElement>;
69
+ /**
70
+ * Optional function to adjust orientation
71
+ */
72
+ updateOrientation?: (params: {
73
+ menuSize: DOMRect;
74
+ refPosition: DOMRect | undefined;
75
+ direction: string;
76
+ offset: Offset;
77
+ scrollX: number;
78
+ scrollY: number;
79
+ container: Container;
80
+ }) => void;
81
+ }
82
+ export declare const FloatingMenu: ({ children, flipped, focusTrap, menuDirection, menuOffset, menuRef: externalMenuRef, onPlace, selectorPrimaryFocus, styles, target, triggerRef, updateOrientation, }: FloatingMenuProps) => any;
83
+ export {};