Merge branch 'main' into fix_16916_switcher_fragment

e2e/components/Menu/Menu-test.avt.e2e.js

@@ -22,7 +22,7 @@ test.describe('@avt Menu', () => {
     await expect(page).toHaveNoACViolations('Menu @avt-default-state');
   });
 
-  test('@avt-keyboard-nav Menu', async ({ page }) => {
+  test.fixme('@avt-keyboard-nav Menu', async ({ page }) => {
     await visitStory(page, {
       component: 'Menu',
       id: 'components-menu--playground',

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

@@ -11,9 +11,18 @@ import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
-function FluidNumberInputSkeleton({ className, ...other }) {
-  const prefix = usePrefix();
+export interface FluidNumberInputSkeletonProps {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className?: string;
+}
 
+const FluidNumberInputSkeleton: React.FC<FluidNumberInputSkeletonProps> = ({
+  className,
+  ...other
+}) => {
+  const prefix = usePrefix();
   return (
     <FormContext.Provider value={{ isFluid: true }}>
       <div
@@ -27,7 +36,7 @@ function FluidNumberInputSkeleton({ className, ...other }) {
       </div>
     </FormContext.Provider>
   );
-}
+};
 
 FluidNumberInputSkeleton.propTypes = {
   /**

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

@@ -12,10 +12,115 @@ import { NumberInput } from '../NumberInput';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
-const FluidNumberInput = React.forwardRef(function FluidNumberInput(
-  { className, ...other },
-  ref
-) {
+export interface FluidNumberInputProps {
+  /**
+   * `true` to allow empty string.
+   */
+  allowEmpty?: boolean;
+
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className?: string;
+
+  /**
+   * Optional starting value for uncontrolled state
+   */
+  defaultValue?: number | string;
+
+  /**
+   * Specify if the wheel functionality for the input should be disabled, or not
+   */
+  disableWheel?: boolean;
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled?: boolean;
+
+  /**
+   * Provide a description for up/down icons that can be read by screen readers
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: string;
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid?: boolean;
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText?: React.ReactNode;
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label?: React.ReactNode;
+
+  /**
+   * The maximum value.
+   */
+  max?: number;
+
+  /**
+   * The minimum value.
+   */
+  min?: number;
+
+  onChange?: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    state: { value: number | string; direction: string }
+  ) => void;
+
+  /**
+   * Provide an optional function to be called when the up/down button is clicked
+   */
+  onClick?: (
+    event: React.MouseEvent<HTMLElement>,
+    state?: { value: number | string; direction: string }
+  ) => void;
+  /**
+   * Provide an optional function to be called when a key is pressed in the number input
+   */
+  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+
+  /**
+   * Specify how much the values should increase/decrease upon clicking on up/down button
+   */
+  step?: number;
+
+  /**
+   * Provide custom text for the component for each translation id
+   */
+  translateWithId?: (id: string) => string;
+
+  /**
+   * Specify the value of the input
+   */
+  value?: number | 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 FluidNumberInput: React.FC<FluidNumberInputProps> = React.forwardRef<
+  HTMLInputElement,
+  FluidNumberInputProps
+>(function FluidNumberInput({ className, ...other }, ref) {
   const prefix = usePrefix();
   const classNames = classnames(`${prefix}--number-input--fluid`, className);
 

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

@@ -4,7 +4,9 @@
  * 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 { FluidNumberInputProps } from './FluidNumberInput';
+import { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton';
+export { type FluidNumberInputProps, type FluidNumberInputSkeletonProps };
 export { default, default as FluidNumberInput } from './FluidNumberInput';
 
 export { default as FluidNumberInputSkeleton } from './FluidNumberInput.Skeleton';

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

@@ -11,9 +11,18 @@ import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
-function FluidSearchSkeleton({ className, ...other }) {
-  const prefix = usePrefix();
+export interface FluidSearchSkeletonProps {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className?: string;
+}
 
+const FluidSearchSkeleton: React.FC<FluidSearchSkeletonProps> = ({
+  className,
+  ...other
+}) => {
+  const prefix = usePrefix();
   return (
     <FormContext.Provider value={{ isFluid: true }}>
       <div
@@ -27,7 +36,7 @@ function FluidSearchSkeleton({ className, ...other }) {
       </div>
     </FormContext.Provider>
   );
-}
+};
 
 FluidSearchSkeleton.propTypes = {
   /**

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

@@ -12,10 +12,72 @@ import Search from '../Search';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
-const FluidSearch = React.forwardRef(function FluidSearch(
-  { className, ...other },
-  ref
-) {
+export interface FluidSearchProps {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete?: string;
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className?: string;
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText?: string;
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue?: string | number;
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+  /**
+   * Specify a custom `id` for the input
+   */
+  id?: string;
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: React.ReactNode;
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange?(e: { target: HTMLInputElement; type: 'change' }): void;
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear?: () => void;
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder?: string;
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role?: string;
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type?: string;
+  /**
+   * Specify the value of the `<input>`
+   */
+  value?: string | number;
+}
+
+const FluidSearch: React.FC<FluidSearchProps> = React.forwardRef<
+  HTMLInputElement,
+  FluidSearchProps
+>(function FluidSearch({ className, ...other }, ref) {
   const prefix = usePrefix();
   const classNames = classnames(`${prefix}--search--fluid`, className);
 

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

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { FluidSearchProps } from './FluidSearch';
+import { FluidSearchSkeletonProps } from './FluidSearch.Skeleton';
 export { default, default as FluidSearch } from './FluidSearch';
-
+export { type FluidSearchProps, type FluidSearchSkeletonProps };
 export { default as FluidSearchSkeleton } from './FluidSearch.Skeleton';

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

@@ -9,8 +9,17 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+export interface FluidSelectSkeletonProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+}
 
-const FluidSelectSkeleton = ({ className, ...rest }) => {
+const FluidSelectSkeleton: React.FC<FluidSelectSkeletonProps> = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const wrapperClasses = cx(
     className,