Merge branch 'main' into main

package.json

@@ -24,6 +24,7 @@
     "lint": "eslint actions config packages www",
     "lint:styles": "stylelint '**/*.scss' --report-needless-disables --report-invalid-scope-disables",
     "sync": "carbon-cli sync",
+    "telemetry:config": "lerna run telemetry:config",
     "test": "cross-env BABEL_ENV=test jest",
     "test:e2e": "cross-env BABEL_ENV=test jest -c jest.e2e.config.js",
     "postinstall": "husky"

packages/react/package.json

@@ -39,7 +39,8 @@
     "clean": "rimraf es lib icons/index.js icons/index.d.ts icons/index.esm.js storybook-static",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
     "storybook": "storybook dev -p 3000",
-    "storybook:build": "storybook build"
+    "storybook:build": "storybook build",
+    "telemetry:config": "npx -y @ibm/telemetry-js-config-generator generate --id fd89d12b-6a39-48b4-adf4-30c94dc0dddd --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)"
   },
   "peerDependencies": {
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -81,7 +81,8 @@ export interface OnChangeData<ItemType> {
 
 export interface DropdownProps<ItemType>
   extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>,
-    TranslateWithId<ListBoxMenuIconTranslationKey> {
+    TranslateWithId<ListBoxMenuIconTranslationKey>,
+    React.RefAttributes<HTMLDivElement> {
   /**
    * Specify a label to be read by screen readers on the container node
    * 'aria-label' of the ListBox component.

packages/react/src/components/FluidDropdown/FluidDropdown.Skeleton.js → packages/react/src/components/FluidDropdown/FluidDropdown.Skeleton.tsx

@@ -10,7 +10,17 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-const FluidDropdownSkeleton = ({ className, ...rest }) => {
+export interface FluidDropdownSkeletonProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+}
+
+const FluidDropdownSkeleton: React.FC<FluidDropdownSkeletonProps> = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const wrapperContainerClasses = cx(
     className,

packages/react/src/components/FluidDropdown/FluidDropdown.js → packages/react/src/components/FluidDropdown/FluidDropdown.tsx

@@ -6,15 +6,125 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ForwardedRef } from 'react';
 import classnames from 'classnames';
-import Dropdown from '../Dropdown';
+import Dropdown, { DropdownProps } from '../Dropdown';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
+export interface OnChangeData<ItemType> {
+  selectedItem: ItemType | null;
+}
 
-const FluidDropdown = React.forwardRef(function FluidDropdown(
-  { className, isCondensed, ...other },
-  ref
+export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType> {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className?: string;
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
+   */
+  direction?: 'top' | 'bottom';
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: string;
+
+  /**
+   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+   * from their collection that are pre-selected
+   */
+  initialSelectedItem?: ItemType;
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText?: React.ReactNode;
+
+  /**
+   * Specify if the `FluidDropdown` should render its menu items in condensed mode
+   */
+  isCondensed?: boolean;
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement?: React.JSXElementConstructor<ItemType> | null;
+
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list.
+   */
+  itemToString?(item: ItemType | null): string;
+
+  /**
+   * We try to stay as generic as possible here to allow individuals to pass
+   * in a collection of whatever kind of data structure they prefer
+   */
+  items: ItemType[];
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: NonNullable<React.ReactNode>;
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component what kind of internal state changes are occurring.
+   */
+  onChange?(data: OnChangeData<ItemType>): void;
+
+  /**
+   * An optional callback to render the currently selected item as a react element instead of only
+   * as a string.
+   */
+  renderSelectedItem?(item: ItemType): React.ReactNode;
+
+  /**
+   * In the case you want to control the dropdown selection entirely.
+   * This value is the selected item from the list of items
+   */
+  selectedItem?: ItemType;
+
+  /**
+   * Provide the title text that will be read by a screen reader when
+   * visiting this control
+   */
+  titleText: React.ReactNode;
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId?: (id: string) => string;
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn?: boolean;
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText?: React.ReactNode;
+}
+
+const FluidDropdown = React.forwardRef(function FluidDropdown<ItemType>(
+  { className, isCondensed, ...other }: FluidDropdownProps<ItemType>,
+  ref: ForwardedRef<HTMLButtonElement>
 ) {
   const prefix = usePrefix();
   const classNames = classnames(

packages/react/src/components/FluidDropdown/index.js → packages/react/src/components/FluidDropdown/index.tsx

@@ -6,7 +6,9 @@
  */
 
 import FluidDropdown from './FluidDropdown';
-
+import { type FluidDropdownProps } from './FluidDropdown';
+import { type FluidDropdownSkeletonProps } from './FluidDropdown.Skeleton';
+export type { FluidDropdownProps, FluidDropdownSkeletonProps };
 export default FluidDropdown;
 export { FluidDropdown };
 export { default as FluidDropdownSkeleton } from './FluidDropdown.Skeleton';

packages/react/src/components/Notification/Notification.tsx

@@ -493,9 +493,7 @@ export function ToastNotification({
         <NotificationButton
           notificationType="toast"
           onClick={handleCloseButtonClick}
-          aria-hidden="true"
           aria-label={deprecatedAriaLabel || ariaLabel}
-          tabIndex={-1}
         />
       )}
     </div>
@@ -739,9 +737,7 @@ export function InlineNotification({
         <NotificationButton
           notificationType="inline"
           onClick={handleCloseButtonClick}
-          aria-hidden="true"
           aria-label={ariaLabel}
-          tabIndex={-1}
         />
       )}
     </div>

packages/react/src/components/Notification/__tests__/Notification-test.js

@@ -124,17 +124,6 @@ describe('ToastNotification', () => {
     spy.mockRestore();
   });
 
-  it('close button is rendered by default and includes aria-hidden=true', () => {
-    render(<ToastNotification title="Notification title" />);
-
-    const closeButton = screen.queryByRole('button', {
-      hidden: true,
-    });
-
-    expect(closeButton).toBeInTheDocument();
-    expect(closeButton).toHaveAttribute('aria-hidden', 'true');
-  });
-
   it('does not render close button when `hideCloseButton` is provided', () => {
     render(<ToastNotification title="Notification title" hideCloseButton />);
     const closeButton = screen.queryByRole('button', {
@@ -255,16 +244,6 @@ describe('InlineNotification', () => {
     spy.mockRestore();
   });
 
-  it('close button is rendered by default and includes aria-hidden=true', () => {
-    render(<InlineNotification title="Notification title" />);
-
-    const closeButton = screen.queryByRole('button', {
-      hidden: true,
-    });
-    expect(closeButton).toBeInTheDocument();
-    expect(closeButton).toHaveAttribute('aria-hidden', 'true');
-  });
-
   it('does not render close button when `hideCloseButton` is provided', () => {
     render(<InlineNotification title="Notification title" hideCloseButton />);
     const closeButton = screen.queryByRole('button', {

packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap

@@ -135,10 +135,8 @@ exports[`InlineNotification should render 1`] = `
       </div>
     </div>
     <button
-      aria-hidden="true"
       aria-label="close notification"
       class="cds--inline-notification__close-button"
-      tabindex="-1"
       title="close notification"
       type="button"
     >
@@ -202,10 +200,8 @@ exports[`ToastNotification should render 1`] = `
       </div>
     </div>
     <button
-      aria-hidden="true"
       aria-label="close notification"
       class="cds--toast-notification__close-button"
-      tabindex="-1"
       title="close notification"
       type="button"
     >