` element that is tied to the
diff --git a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
index de6e62746430..aefd4f0794aa 100644
--- a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
+++ b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
@@ -13,7 +13,10 @@ import {
ToggletipButton,
ToggletipContent,
} from '../Toggletip';
-import { Information } from '@carbon/icons-react';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
+import { Button } from '../Button';
+import { Information, View, FolderOpen, Folders } from '@carbon/icons-react';
export default {
title: 'Experimental/Fluid Components/unstable__FluidComboBox',
@@ -92,6 +95,51 @@ export const Condensed = () => (
);
+const aiLabel = (
+
+
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+
+
Model type
+
Foundation model
+
+
+
+
+
+
+
+ View details
+
+
+
+);
+
+export const withAILabel = () => (
+
+ {}}
+ id="default"
+ titleText="Label"
+ label="Choose an option"
+ items={items}
+ itemToString={(item) => (item ? item.text : '')}
+ decorator={aiLabel}
+ />
+
+);
+
export const Playground = (args) => (
(
);
+const aiLabel = (
+
+
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+
+
Model type
+
Foundation model
+
+
+
+
+
+
+
+ View details
+
+
+
+);
+
+export const withAILabel = () => (
+
+ (item ? item.text : '')}
+ decorator={aiLabel}
+ />
+
+);
+
export const Playground = (args) => (
(
);
+const aiLabel = (
+
+
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+
+
Model type
+
Foundation model
+
+
+
+
+
+
+
+ View details
+
+
+
+);
+
+export const withAILabel = () => (
+
+ {}}
+ initialSelectedItem={items[2]}
+ id="default"
+ titleText="Label"
+ label="Choose an option"
+ items={items}
+ itemToString={(item) => (item ? item.text : '')}
+ decorator={aiLabel}
+ />
+
+);
+
export const Playground = (args) => (
(
);
+const aiLabel = (
+
+
+
+
AI Explained
+
84%
+
Confidence score
+
+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+
+
+
Model type
+
Foundation model
+
+
+
+
+
+
+
+ View details
+
+
+
+);
+
+export const withAILabel = () => (
+
+
+
+
+);
+
export const Playground = (args) => (
diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js
index 506a6fe1f75e..ac7d51780a1f 100644
--- a/packages/react/src/components/Form/Form.stories.js
+++ b/packages/react/src/components/Form/Form.stories.js
@@ -338,7 +338,7 @@ export const withAILabel = (args) => {
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- slug={aiLabel}
+ decorator={aiLabel}
{...rest}
/>
{
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- slug={aiLabel}
+ decorator={aiLabel}
{...rest}
/>
{
itemToString={(item) => (item ? item.text : '')}
titleText="ComboBox title"
helperText="Combobox helper text"
- slug={aiLabel}
+ decorator={aiLabel}
{...rest}
/>
{
label="Choose an option"
items={items}
itemToString={(item) => (item ? item.text : '')}
- slug={aiLabel}
+ decorator={aiLabel}
{...rest}
/>
@@ -456,7 +456,7 @@ export const withAILabel = (args) => {
label="Choose an option"
items={items}
itemToString={(item) => (item ? item.text : '')}
- slug={aiLabel}
+ decorator={aiLabel}
{...rest}
/>
@@ -471,12 +471,12 @@ export const withAILabel = (args) => {
label="Choose an option"
items={items}
itemToString={(item) => (item ? item.text : '')}
- slug={aiLabel}
+ decorator={aiLabel}
{...rest}
/>
-
+
+
+
-
-
-
+
```
@@ -92,7 +92,7 @@ The `MenuItemDivider` renders a thin dividing line, visually separating menu
items. Use this to enhance grouping of related items.
```jsx
-
+
+
+
{
expect(screen.getByTestId('modal-2')).not.toHaveClass('is-visible');
});
+ it('should call onKeyDown with escape', async () => {
+ const onKeyDown = jest.fn();
+ render(
+
+ Modal content here
+
+ );
+
+ await userEvent.tab();
+ await userEvent.keyboard('{Escape}');
+ expect(onKeyDown).toHaveBeenCalledTimes(1);
+ });
+
it('should set open state to false when close button is clicked', async () => {
render(
{
modalHeading="Modal heading"
modalLabel="Label"
handleSubmit={handleSubmit}
+ shouldCloseAfterSubmit
open
data-testid="modal-5">
Modal content here
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
index a61fa77b9518..e1a5893ab4be 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -131,6 +131,11 @@ export interface FilterableMultiSelectProps
*/
clearSelectionText?: string;
+ /**
+ * **Experimental**: Provide a `decorator` component to be rendered inside the `FilterableMultiSelect` component
+ */
+ decorator?: ReactNode;
+
/**
* Specify the direction of the multiselect dropdown.
*/
@@ -281,6 +286,7 @@ export interface FilterableMultiSelectProps
size?: 'sm' | 'md' | 'lg';
/**
+ * @deprecated please use decorator instead.
* **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
*/
slug?: ReactNode;
@@ -318,6 +324,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
clearSelectionDescription = 'Total items selected: ',
clearSelectionText = 'To clear selection, press Delete or Backspace',
compareItems = defaultCompareItems,
+ decorator,
direction = 'bottom',
disabled = false,
downshiftProps,
@@ -467,6 +474,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
[`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
[`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
[`${prefix}--list-box__wrapper--slug`]: slug,
+ [`${prefix}--list-box__wrapper--decorator`]: decorator,
[`${prefix}--autoalign`]: autoAlign,
}
);
@@ -674,12 +682,20 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
}
}
- // Slug is always size `mini`
- let normalizedSlug;
- if (slug && slug['type']?.displayName === 'AILabel') {
- normalizedSlug = React.cloneElement(slug as React.ReactElement, {
- size: 'mini',
- });
+ // AILabel always size `mini`
+ let normalizedDecorator = React.isValidElement(slug ?? decorator)
+ ? (slug ?? decorator)
+ : null;
+ if (
+ normalizedDecorator &&
+ normalizedDecorator['type']?.displayName === 'AILabel'
+ ) {
+ normalizedDecorator = React.cloneElement(
+ normalizedDecorator as React.ReactElement,
+ {
+ size: 'mini',
+ }
+ );
}
const className = cx(
@@ -916,7 +932,15 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
translateWithId={translateWithId}
/>
+ {normalizedDecorator}
+
+ ) : (
+ ''
+ )}
{isOpen
@@ -1016,6 +1040,11 @@ FilterableMultiSelect.propTypes = {
*/
clearSelectionText: PropTypes.string,
+ /**
+ * **Experimental**: Provide a decorator component to be rendered inside the `FilterableMultiSelect` component
+ */
+ decorator: PropTypes.node,
+
/**
* Specify the direction of the multiselect dropdown. Can be either top or bottom.
*/
@@ -1139,10 +1168,10 @@ FilterableMultiSelect.propTypes = {
*/
size: ListBoxPropTypes.ListBoxSize,
- /**
- * **Experimental**: Provide a `Slug` component to be rendered inside the `FilterableMultiSelect` component
- */
- slug: PropTypes.node,
+ slug: deprecate(
+ PropTypes.node,
+ 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'
+ ),
...sortingPropTypes,
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index b6ffbae7c858..819d32671c8c 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -18,7 +18,6 @@ import ButtonSet from '../ButtonSet';
import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
import { IconButton } from '../IconButton';
import { View, FolderOpen, Folders } from '@carbon/icons-react';
-import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
export default {
title: 'Components/MultiSelect',
@@ -483,7 +482,7 @@ export const withAILabel = () => (
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- slug={aiLabel}
+ decorator={aiLabel}
/>
);
@@ -498,7 +497,7 @@ export const FilterableWithAILabel = () => (
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- slug={aiLabel}
+ decorator={aiLabel}
/>
);
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
index d9d18bddc023..f9917dd75d92 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -128,6 +128,11 @@ export interface MultiSelectProps
*/
clearSelectionText?: string;
+ /**
+ * **Experimental**: Provide a `decorator` component to be rendered inside the `MultiSelect` component
+ */
+ decorator?: ReactNode;
+
/**
* Specify the direction of the multiselect dropdown. Can be either top or bottom.
*/
@@ -260,6 +265,7 @@ export interface MultiSelectProps
size?: ListBoxSize;
/**
+ * @deprecated please use decorator instead.
* **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
*/
slug?: ReactNode;
@@ -296,6 +302,7 @@ const MultiSelect = React.forwardRef(
{
autoAlign = false,
className: containerClassName,
+ decorator,
id,
items,
itemToElement,
@@ -538,6 +545,7 @@ const MultiSelect = React.forwardRef(
[`${prefix}--list-box__wrapper--fluid--focus`]:
!isOpen && isFluid && isFocused,
[`${prefix}--list-box__wrapper--slug`]: slug,
+ [`${prefix}--list-box__wrapper--decorator`]: decorator,
}
);
const titleClasses = cx(`${prefix}--label`, {
@@ -679,12 +687,20 @@ const MultiSelect = React.forwardRef(
}
: {};
- // Slug is always size `mini`
- let normalizedSlug;
- if (slug && slug['type']?.displayName === 'AILabel') {
- normalizedSlug = React.cloneElement(slug as React.ReactElement, {
- size: 'mini',
- });
+ // AILabel always size `mini`
+ let normalizedDecorator = React.isValidElement(slug ?? decorator)
+ ? (slug ?? decorator)
+ : null;
+ if (
+ normalizedDecorator &&
+ normalizedDecorator['type']?.displayName === 'AILabel'
+ ) {
+ normalizedDecorator = React.cloneElement(
+ normalizedDecorator as React.ReactElement,
+ {
+ size: 'mini',
+ }
+ );
}
const itemsSelectedText =
@@ -773,7 +789,15 @@ const MultiSelect = React.forwardRef(
translateWithId={translateWithId}
/>
- {normalizedSlug}
+ {slug ? (
+ normalizedDecorator
+ ) : decorator ? (
+
+ {normalizedDecorator}
+
+ ) : (
+ ''
+ )}
{isOpen &&
@@ -886,6 +910,11 @@ MultiSelect.propTypes = {
*/
compareItems: PropTypes.func,
+ /**
+ * **Experimental**: Provide a decorator component to be rendered inside the `MultiSelect` component
+ */
+ decorator: PropTypes.node,
+
/**
* Specify the direction of the multiselect dropdown. Can be either top or bottom.
*/
@@ -1019,10 +1048,10 @@ MultiSelect.propTypes = {
*/
size: ListBoxPropTypes.ListBoxSize,
- /**
- * **Experimental**: Provide a `Slug` component to be rendered inside the `MultiSelect` component
- */
- slug: PropTypes.node,
+ slug: deprecate(
+ PropTypes.node,
+ 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'
+ ),
/**
* Provide a method that sorts all options in the control. Overriding this
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index d992d5b61927..b7287b9d6dbb 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -250,6 +250,7 @@ describe('FilterableMultiSelect', () => {
});
it('should respect slug prop', async () => {
+ const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
const { container } = render(
@@ -211,4 +213,193 @@ describe('OverflowMenu', () => {
expect(handleClick).toHaveBeenCalledTimes(1);
});
});
+ it('should not open menu when disabled', async () => {
+ render(
+
+
+ );
+
+ const button = screen.getByRole('button');
+ await userEvent.click(button);
+ expect(button).toHaveAttribute('aria-expanded', 'false');
+ });
+ it('should close the menu when clicking outside', async () => {
+ render(
+
+
+
+
Outside Element
+
+
+ );
+ const button = screen.getByRole('button', { name: iconDescription });
+ const svgIcon = button.querySelector('.cds--overflow-menu__icon');
+ expect(svgIcon).toHaveAttribute('aria-label', iconDescription);
+ });
+ it('should align menu based on direction prop', async () => {
+ const { rerender } = render(
+
+
+ );
+ const button = screen.getByRole('button', { name: 'custom-icon' });
+ fireEvent.click(button);
+ const menu = await waitFor(() =>
+ screen.getByRole('menu', { hidden: true })
+ );
+ expect(menu).toHaveAttribute('data-floating-menu-direction', 'top');
+
+ rerender(
+
+
+ );
+ const newMenu = await waitFor(() =>
+ screen.getByRole('menu', { hidden: true })
+ );
+ expect(newMenu).toHaveAttribute('data-floating-menu-direction', 'bottom');
+ });
+ it('focuses the next enabled menu item when pressing ArrowDown', async () => {
+ render(
+
+
+ );
+ const button = screen.getByRole('button', { name: 'custom-icon' });
+ fireEvent.click(button);
+
+ const menuItem1 = screen.getByText('Item 1').closest('button');
+ const menuItem3 = screen.getByText('Item 3').closest('button');
+
+ menuItem1.focus();
+ fireEvent.keyDown(menuItem1, { key: 'ArrowDown', code: 'ArrowDown' });
+ expect(menuItem3).toHaveFocus();
+ });
+ it('focuses the next enabled menu item when pressing ArrowUp', async () => {
+ render(
+
+
+ );
+ const button = screen.getByRole('button', { name: 'custom-icon' });
+ fireEvent.click(button);
+
+ const menuItem1 = screen.getByText('Item 1').closest('button');
+ const menuItem3 = screen.getByText('Item 3').closest('button');
+
+ menuItem3.focus();
+ expect(menuItem3).toHaveFocus();
+ fireEvent.keyDown(menuItem3, { key: 'ArrowUp', code: 'ArrowUp' });
+ expect(menuItem1).toHaveFocus();
+ });
+ it('focuses the last enabled item when moving backwards from the first enabled item (case -1)', () => {
+ render(
+
+
+ );
+
+ const button = screen.getByRole('button', { name: 'custom-icon' });
+ fireEvent.click(button);
+
+ const menuItem1 = screen.getByText('Item 1').closest('button');
+ const menuItem3 = screen.getByText('Item 3').closest('button');
+ menuItem1.focus();
+ expect(menuItem1).toHaveFocus();
+ fireEvent.keyDown(menuItem1, { key: 'ArrowUp', code: 'ArrowUp' });
+ expect(menuItem3).toHaveFocus();
+ });
+
+ it('focuses the first enabled item when moving forward from the last enabled item (case enabledIndices.length)', () => {
+ render(
+
+
+ );
+
+ const button = screen.getByRole('button', { name: 'custom-icon' });
+ fireEvent.click(button);
+
+ const menuItem1 = screen.getByText('Item 1').closest('button');
+ const menuItem3 = screen.getByText('Item 3').closest('button');
+ menuItem3.focus();
+ expect(menuItem3).toHaveFocus();
+ fireEvent.keyDown(menuItem3, { key: 'ArrowDown', code: 'ArrowDown' });
+ expect(menuItem1).toHaveFocus();
+ });
+ it('closes the menu on Escape key press', async () => {
+ render(
+
+
+ );
+ const button = screen.getByRole('button', { name: 'custom-icon' });
+ expect(button).toHaveClass('cds--overflow-menu--open');
+
+ const menu = await waitFor(() =>
+ screen.getByRole('menu', { hidden: true })
+ );
+ fireEvent.keyDown(menu, { key: 'Escape', code: 'Escape' });
+ expect(button).not.toHaveClass('cds--overflow-menu--open');
+ expect(button).toHaveFocus();
+ });
});
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.tsx b/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
index 502736020fed..eaa954b05161 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
@@ -5,23 +5,24 @@
* LICENSE file in the root directory of this source tree.
*/
-import invariant from 'invariant';
-import PropTypes from 'prop-types';
-import React, { ComponentType } from 'react';
-import classNames from 'classnames';
-import ClickListener from '../../internal/ClickListener';
import FloatingMenu, {
- DIRECTION_TOP,
DIRECTION_BOTTOM,
+ DIRECTION_TOP,
} from '../../internal/FloatingMenu';
+import React, { ComponentType } from 'react';
+import { matches as keyCodeMatches, keys } from '../../internal/keyboard';
+
+import ClickListener from '../../internal/ClickListener';
+import { IconButton } from '../IconButton';
import { OverflowMenuVertical } from '@carbon/icons-react';
-import { keys, matches as keyCodeMatches } from '../../internal/keyboard';
-import mergeRefs from '../../tools/mergeRefs';
import { PrefixContext } from '../../internal/usePrefix';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
import deprecate from '../../prop-types/deprecate';
-import { IconButton } from '../IconButton';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import invariant from 'invariant';
+import mergeRefs from '../../tools/mergeRefs';
import { noopFn } from '../../internal/noopFn';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
const getInstanceId = setupGetInstanceId();
@@ -81,15 +82,6 @@ export const getMenuOffset = (menuBody, direction, trigger, flip) => {
top: 0,
};
}
- case 'left':
- case 'right': {
- // TODO: Ensure `trigger` is there for ``
- const triggerHeight = !trigger ? 0 : trigger.offsetHeight;
- return {
- left: 0,
- top: (!flip ? 1 : -1) * (menuHeight / 2 - triggerHeight / 2),
- };
- }
default:
break;
diff --git a/packages/react/src/components/OverflowMenuV2/OverFlowMenuV2-test.js b/packages/react/src/components/OverflowMenuV2/OverFlowMenuV2-test.js
new file mode 100644
index 000000000000..500fdfe350f7
--- /dev/null
+++ b/packages/react/src/components/OverflowMenuV2/OverFlowMenuV2-test.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { act, render, screen } from '@testing-library/react';
+
+import { FeatureFlags } from '../FeatureFlags';
+import { MenuItem } from '../Menu';
+import { OverflowMenuV2 } from './';
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import userEvent from '@testing-library/user-event';
+
+describe('
+
+ );
+
+ // Check if the deprecation warning is logged
+ expect(consoleWarnSpy).toHaveBeenCalledWith(
+ expect.stringContaining(
+ '`` is deprecated and will be removed in the next major version.'
+ )
+ );
+ });
+
+ it('should render correctly with feature flag enabled', async () => {
+ const { getByRole, findByText } = render(
+
+
+
+
+ );
+
+ await act(async () => {
+ const button = getByRole('button', { name: /options/i });
+ button.click();
+ });
+
+ expect(await findByText('Stop app')).toBeInTheDocument();
+ expect(await findByText('Delete app')).toBeInTheDocument();
+ });
+
+ it('should respect align prop', () => {
+ const { container } = render(
+
+
+ );
+
+ expect(container.firstChild).toHaveClass('cds--autoalign');
+ });
+
+ it('should render OverflowMenu with MenuItem children', async () => {
+ render(
+
+
+
+
+ );
+
+ const button = screen.getByRole('button', { name: /options/i });
+
+ await act(async () => {
+ await userEvent.click(button);
+ });
+
+ const stopAppMenuItem = await screen.findByRole('menuitem', {
+ name: /Stop app/i,
+ });
+ const deleteAppMenuItem = await screen.findByRole('menuitem', {
+ name: /Delete app/i,
+ });
+
+ expect(stopAppMenuItem).toBeInTheDocument();
+ expect(deleteAppMenuItem).toBeInTheDocument();
+ });
+});
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
index 4ba2f2a73d43..306a73243ca3 100644
--- a/packages/react/src/components/Pagination/Pagination.tsx
+++ b/packages/react/src/components/Pagination/Pagination.tsx
@@ -388,7 +388,7 @@ const Pagination = React.forwardRef(function Pagination(
