@patternfly/react-core 4.243.1 → 4.244.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.243.1",
+  "version": "4.244.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "eb89462c9bbd1414e2da9f3b77601f965ba03bf2"
+  "gitHead": "38e7a38cfcbb11b376302e90c1ac9df3a3f00711"
 }

package/src/components/Alert/Alert.tsx

@@ -18,40 +18,50 @@ export enum AlertVariant {
   default = 'default'
 }
 
+/** The main alert component. */
+
 export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'action' | 'title'>, OUIAProps {
-  /** Adds alert variant styles  */
-  variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
-  /** Flag to indicate if the alert is inline */
-  isInline?: boolean;
-  /** Flag to indicate if the alert is plain */
-  isPlain?: boolean;
-  /** Title of the alert  */
-  title: React.ReactNode;
-  /** Sets the heading level to use for the alert title. Default is h4. */
-  titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  /** Close button; use the alertActionCloseButton component  */
+  /** Close button; use the alert action close button component.  */
   actionClose?: React.ReactNode;
-  /** Action links; use a single alertActionLink component or multiple wrapped in an array or React.Fragment */
+  /** Action links; use a single alert action link component or multiple wrapped in an array
+   * or React.Fragment.
+   */
   actionLinks?: React.ReactNode;
-  /** Content rendered inside the alert */
+  /** Adds accessible text to the alert. */
+  'aria-label'?: string;
+  /** Content rendered inside the alert. */
   children?: React.ReactNode;
-  /** Additional classes added to the alert  */
+  /** Additional classes to add to the alert.  */
   className?: string;
-  /** Adds accessible text to the alert */
-  'aria-label'?: string;
-  /** Variant label text for screen readers */
-  variantLabel?: string;
-  /** Flag to indicate if the alert is in a live region */
+  /** Set a custom icon to the alert. If not set the icon is set according to the variant. */
+  customIcon?: React.ReactNode;
+  /** Uniquely identifies the alert. */
+  id?: string;
+  /** Flag indicating that the alert is expandable. */
+  isExpandable?: boolean;
+  /** Flag to indicate if the alert is inline. */
+  isInline?: boolean;
+  /** Flag to indicate if the alert is in a live region. */
   isLiveRegion?: boolean;
-  /** If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will be dismissed after that amount of time in milliseconds. */
+  /** Flag to indicate if the alert is plain. */
+  isPlain?: boolean;
+  /** Function to be executed on alert timeout. Relevant when the timeout prop is set. */
+  onTimeout?: () => void;
+  /** If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will
+   * be dismissed after that amount of time in milliseconds.
+   */
   timeout?: number | boolean;
-  /** If the user hovers over the alert and `timeout` expires, this is how long to wait before finally dismissing the alert */
+  /** If the user hovers over the alert and `timeout` expires, this is how long to wait
+   * before finally dismissing the alert.
+   */
   timeoutAnimation?: number;
-  /** Function to be executed on alert timeout. Relevant when the timeout prop is set */
-  onTimeout?: () => void;
-  /** Truncate title to number of lines */
-  truncateTitle?: number;
-  /** Position of the tooltip which is displayed if text is truncated */
+  /** Title of the alert.  */
+  title: React.ReactNode;
+  /** Sets the heading level to use for the alert title. Default is h4. */
+  titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Adds accessible text to the alert toggle. */
+  toggleAriaLabel?: string;
+  /** Position of the tooltip which is displayed if text is truncated. */
   tooltipPosition?:
     | TooltipPosition
     | 'auto'
@@ -67,14 +77,12 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** Set a custom icon to the alert. If not set the icon is set according to the variant */
-  customIcon?: React.ReactNode;
-  /** Flag indicating that the alert is expandable */
-  isExpandable?: boolean;
-  /** Adds accessible text to the alert Toggle */
-  toggleAriaLabel?: string;
-  /** Uniquely identifies the alert */
-  id?: string;
+  /** Truncate title to number of lines. */
+  truncateTitle?: number;
+  /** Adds alert variant styles.  */
+  variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
+  /** Variant label text for screen readers. */
+  variantLabel?: string;
 }
 
 export const Alert: React.FunctionComponent<AlertProps> = ({

package/src/components/Alert/AlertActionCloseButton.tsx

@@ -3,14 +3,18 @@ import { Button, ButtonVariant, ButtonProps } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { AlertContext } from './AlertContext';
 
+/** Renders a close button for a dismissable alert when this sub-component is passed into
+ * the alert's actionClose property.
+ */
+
 export interface AlertActionCloseButtonProps extends ButtonProps {
-  /** Additional classes added to the AlertActionCloseButton */
+  /** Accessible label for the close button */
+  'aria-label'?: string;
+  /** Additional classes added to the alert action close button. */
   className?: string;
-  /** A callback for when the close button is clicked */
+  /** A callback for when the close button is clicked. */
   onClose?: () => void;
-  /** Aria Label for the Close button */
-  'aria-label'?: string;
-  /** Variant Label for the Close button */
+  /** Variant Label for the close button. */
   variantLabel?: string;
 }
 

package/src/components/Alert/AlertActionLink.tsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import { Button, ButtonVariant, ButtonProps } from '../Button';
 
+/** Renders buttons styled as links beneath the alert title and description when this sub-component
+ * is passed into the alert's actionLinks property.
+ */
+
 export interface AlertActionLinkProps extends ButtonProps {
-  /** Content rendered inside the AlertLinkAction  */
+  /** Content rendered inside the alert action link.  */
   children?: string;
-  /** Additional classes added to the AlertActionLink  */
+  /** Additional classes added to the alert action link.  */
   className?: string;
 }
 

package/src/components/Alert/AlertIcon.tsx

@@ -16,12 +16,12 @@ export const variantIcons = {
 };
 
 export interface AlertIconProps extends React.HTMLProps<HTMLDivElement> {
-  /** variant */
-  variant: 'success' | 'danger' | 'warning' | 'info' | 'default';
-  /** className */
+  /** Additional class names added to the alert icon. */
   className?: string;
-  /** A custom icon. If not set the icon is set according to the variant */
+  /** A custom icon. If not set the icon is set according to the variant. */
   customIcon?: React.ReactNode;
+  /** Variant of the alert icon. */
+  variant: 'success' | 'danger' | 'warning' | 'info' | 'default';
 }
 
 export const AlertIcon = ({ variant, customIcon, className = '', ...props }: AlertIconProps) => {

package/src/components/Alert/AlertToggleExpandButton.tsx

@@ -6,13 +6,13 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
 export interface AlertToggleExpandButtonProps extends ButtonProps {
-  /** Aria label for the toggle button */
+  /** Accessible label for the toggle button. */
   'aria-label'?: string;
-  /** A callback for when the toggle button is clicked */
-  onToggleExpand?: () => void;
-  /** Flag to indicate if the content is expanded */
+  /** Flag to indicate if the content is expanded. */
   isExpanded?: boolean;
-  /** Variant label for the toggle button */
+  /** A callback for when the toggle button is clicked. */
+  onToggleExpand?: () => void;
+  /** Variant label for the toggle button. */
   variantLabel?: string;
 }
 

package/src/components/Badge/__tests__/Badge.test.tsx

@@ -1,10 +1,47 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Badge } from '../Badge';
-import React from 'react';
-import { render } from '@testing-library/react';
-
-Object.values([true, false]).forEach(isRead => {
-  test(`${isRead} Badge`, () => {
-    const { asFragment } = render(<Badge isRead={isRead}>{isRead ? 'read' : 'unread'} Badge</Badge>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="badge">
+      <Badge />
+    </div>
+  );
+  expect(screen.getByTestId('badge').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Badge>Test</Badge>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-c-badge', () => {
+  render(<Badge>Test</Badge>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-badge');
+});
+
+test('Renders with class name pf-m-unread by default', () => {
+  render(<Badge>Test</Badge>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-unread');
+});
+
+test('Renders with class name pf-m-read when isRead prop is true', () => {
+  render(<Badge isRead={true}>Test</Badge>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-read');
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Badge className="custom-class">Test</Badge>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<Badge aria-label="Test label">Test</Badge>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Badge>Test</Badge>);
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -1,21 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`false Badge 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <span
     class="pf-c-badge pf-m-unread"
   >
-    unread Badge
-  </span>
-</DocumentFragment>
-`;
-
-exports[`true Badge 1`] = `
-<DocumentFragment>
-  <span
-    class="pf-c-badge pf-m-read"
-  >
-    read Badge
+    Test
   </span>
 </DocumentFragment>
 `;

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -19,49 +19,55 @@ export enum Weekday {
   Saturday
 }
 
+/** Additional properties that extend from and can be passed to the main component. These
+ * properties allow customizing the calendar formatting and aria-labels.
+ */
+
 export interface CalendarFormat {
-  /** How to format months in Select */
-  monthFormat?: (date: Date) => React.ReactNode;
-  /** How to format week days in header */
-  weekdayFormat?: (date: Date) => React.ReactNode;
-  /** How to format days in header for screen readers */
-  longWeekdayFormat?: (date: Date) => React.ReactNode;
-  /** How to format days in buttons in table cells */
+  /** Accessible label for the date cells. */
+  cellAriaLabel?: (date: Date) => string;
+  /** How to format days in buttons in table cells. */
   dayFormat?: (date: Date) => React.ReactNode;
-  /** If using the default formatters which locale to use. Undefined defaults to current locale. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation */
+  /** If using the default formatters which locale to use. Undefined defaults to current locale.
+   * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
+   */
   locale?: string;
-  /** Day of week that starts the week. 0 is Sunday, 6 is Saturday. */
-  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday;
-  /** Which date to start range styles from */
-  rangeStart?: Date;
-  /** Aria-label for the previous month button */
+  /** How to format days in header for screen readers. */
+  longWeekdayFormat?: (date: Date) => React.ReactNode;
+  /** How to format months in month select. */
+  monthFormat?: (date: Date) => React.ReactNode;
+  /** Accessible label for the previous month button. */
   prevMonthAriaLabel?: string;
-  /** Aria-label for the next month button */
+  /** Accessible label for the next month button. */
   nextMonthAriaLabel?: string;
-  /** Aria-label for the year input */
+  /** Which date to start range styles from. */
+  rangeStart?: Date;
+  /** How to format week days in header. */
+  weekdayFormat?: (date: Date) => React.ReactNode;
+  /** Day of week that starts the week. 0 is Sunday, 6 is Saturday. */
+  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday;
+  /** Accessible label for the year input. */
   yearInputAriaLabel?: string;
-  /** Aria-label for the date cells */
-  cellAriaLabel?: (date: Date) => string;
 }
 
 export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
-  /** Month/year to base other dates around */
-  date?: Date;
-  /** Callback when date is selected */
-  onChange?: (date: Date) => void;
-  /** Functions that returns if a date is valid and selectable */
-  validators?: ((date: Date) => boolean)[];
-  /** Classname to add to outer div */
+  /** Additional classes to add to the outer div of the calendar month. */
   className?: string;
-  /** @hide Internal prop to allow pressing escape in select menu to not close popover */
-  onSelectToggle?: (open: boolean) => void;
-  /** Flag to set browser focus on the passed date **/
+  /** Month/year to base other dates around. */
+  date?: Date;
+  /** Flag to set browser focus on the passed date. **/
   isDateFocused?: boolean;
-  /** Callback when month or year is changed */
+  /** Callback when date is selected. */
+  onChange?: (date: Date) => void;
+  /** Callback when month or year is changed. */
   onMonthChange?: (
     newDate?: Date,
     event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>
   ) => void;
+  /** @hide Internal prop to allow pressing escape in select menu to not close popover. */
+  onSelectToggle?: (open: boolean) => void;
+  /** Functions that returns if a date is valid and selectable. */
+  validators?: ((date: Date) => boolean)[];
 }
 
 // Must be numeric given current header design
@@ -107,6 +113,8 @@ export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));
 
 const today = new Date();
 
+/** The main calendar month component. */
+
 export const CalendarMonth = ({
   date: dateProp,
   locale = undefined,

package/src/components/DatePicker/DatePicker.tsx

@@ -10,58 +10,67 @@ import { CalendarMonth, CalendarFormat, isValidDate } from '../CalendarMonth';
 import { useImperativeHandle } from 'react';
 import { KeyTypes } from '../../helpers';
 
+/** The main date picker component. */
+
 export interface DatePickerProps
   extends CalendarFormat,
     Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
-  /** Additional classes added to the date time picker. */
-  className?: string;
-  /** Accessible label for the date picker */
-  'aria-label'?: string;
-  /** How to format the date in the TextInput */
-  dateFormat?: (date: Date) => string;
-  /** How to format the date in the TextInput */
-  dateParse?: (value: string) => Date;
-  /** Flag indicating the date picker is disabled*/
-  isDisabled?: boolean;
-  /** String to display in the empty date picker field as a hint for the expected date format */
-  placeholder?: string;
-  /** Value of TextInput */
-  value?: string;
-  /** Error message to display when the TextInput cannot be parsed. */
-  invalidFormatText?: string;
-  /** Callback called every time the input value changes */
-  onChange?: (value: string, date?: Date) => void;
-  /** Callback called every time the input loses focus */
-  onBlur?: (value: string, date?: Date) => void;
-  /** Text for label */
-  helperText?: React.ReactNode;
-  /** Aria label for the button to open the date picker */
-  buttonAriaLabel?: string;
   /** The container to append the menu to. Defaults to 'parent'.
    * If your menu is being cut off you can append it to an element higher up the DOM tree.
    * Some examples:
-   * menuAppendTo={() => document.body}
+   * menuAppendTo={() => document.body};
    * menuAppendTo={document.getElementById('target')}
    */
   appendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'parent';
-  /** Props to pass to the Popover */
+  /** Accessible label for the date picker. */
+  'aria-label'?: string;
+  /** Accessible label for the button to open the date picker. */
+  buttonAriaLabel?: string;
+  /** Additional classes added to the date picker. */
+  className?: string;
+  /** How to format the date in the text input. */
+  dateFormat?: (date: Date) => string;
+  /** How to format the date in the text input. */
+  dateParse?: (value: string) => Date;
+  /** Helper text to display alongside the date picker. */
+  helperText?: React.ReactNode;
+  /** Additional props for the text input. */
+  inputProps?: TextInputProps;
+  /** Flag indicating the date picker is disabled. */
+  isDisabled?: boolean;
+  /** Error message to display when the text input cannot be parsed. */
+  invalidFormatText?: string;
+  /** Callback called every time the text input loses focus. */
+  onBlur?: (value: string, date?: Date) => void;
+  /** Callback called every time the text input value changes. */
+  onChange?: (value: string, date?: Date) => void;
+  /** String to display in the empty text input as a hint for the expected date format. */
+  placeholder?: string;
+  /** Props to pass to the popover that contains the calendar month component. */
   popoverProps?: Partial<Omit<PopoverProps, 'appendTo'>>;
-  /** Functions that returns an error message if a date is invalid */
+  /** Functions that returns an error message if a date is invalid. */
   validators?: ((date: Date) => string)[];
-  /** Additional props for input field */
-  inputProps?: TextInputProps;
+  /** Value of the text input. */
+  value?: string;
 }
 
+/** Allows finer control over the calendar's open state when a React ref is passed into the
+ * date picker component. Accessed via ref.current[property], e.g. ref.current.toggleCalendar().
+ */
+
 export interface DatePickerRef {
-  /** Sets the calendar open status */
+  /** Current calendar open status. */
+  isCalendarOpen: boolean;
+  /** Sets the calendar open status. */
   setCalendarOpen: (isOpen: boolean) => void;
-  /** Toggles the calendar open status. If no parameters are passed, the calendar will simply toggle its open status.
-   * If the isOpen parameter is passed, that will set the calendar open status to the value of the isOpen parameter.
-   * If the eventKey parameter is set to 'Escape', that will invoke the date pickers onEscapePress event to toggle the
-   * correct control appropriately. */
+  /** Toggles the calendar open status. If no parameters are passed, the calendar will simply
+   * toggle its open status.
+   * If the isOpen parameter is passed, that will set the calendar open status to the value
+   * of the isOpen parameter.
+   * If the eventKey parameter is set to 'Escape', that will invoke the date pickers
+   * onEscapePress event to toggle the correct control appropriately.
+   */
   toggleCalendar: (isOpen?: boolean, eventKey?: string) => void;
-  /** Current calendar open status */
-  isCalendarOpen: boolean;
 }
 
 export const yyyyMMddFormat = (date: Date) =>

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -10,42 +10,53 @@ export enum ExpandableSectionVariant {
   truncate = 'truncate'
 }
 
+/** The main expandable section component. */
+
 export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable section. */
   className?: string;
-  /** Flag to indicate if the content is expanded */
-  isExpanded?: boolean;
-  /** Text that appears in the attached toggle */
-  toggleText?: string;
-  /** Text that appears in the attached toggle when expanded (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text) */
-  toggleTextExpanded?: string;
-  /** Text that appears in the attached toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text) */
-  toggleTextCollapsed?: string;
-  /** React node that appears in the attached toggle in place of toggle text */
-  toggleContent?: React.ReactNode;
-  /** Callback function to toggle the expandable section. Detached expandable sections should use the onToggle property of the expandable section toggle sub-component. */
-  onToggle?: (isExpanded: boolean) => void;
-  /** Forces active state */
-  isActive?: boolean;
-  /** Indicates the expandable section has a detached toggle */
-  isDetached?: boolean;
-  /** ID of the content of the expandable section */
+  /** Id of the content of the expandable section. When passing in the isDetached property, this
+   * property's value should match the contenId property of the expandable section toggle sub-component.
+   */
   contentId?: string;
-  /** Display size variant. Set to large for disclosure styling. */
+  /** Display size variant. Set to "large" for disclosure styling. */
   displaySize?: 'default' | 'large';
-  /** Flag to indicate the width of the component is limited. Set to true for disclosure styling. */
-  isWidthLimited?: boolean;
-  /** Flag to indicate if the content is indented */
+  /** Forces active state. */
+  isActive?: boolean;
+  /** Indicates the expandable section has a detached toggle. */
+  isDetached?: boolean;
+  /** Flag to indicate if the content is expanded. */
+  isExpanded?: boolean;
+  /** Flag to indicate if the content is indented. */
   isIndented?: boolean;
+  /** Flag to indicate the width of the component is limited. Set to "true" for disclosure styling. */
+  isWidthLimited?: boolean;
+  /** Callback function to toggle the expandable section. Detached expandable sections should
+   * use the onToggle property of the expandable section toggle sub-component.
+   */
+  onToggle?: (isExpanded: boolean) => void;
+  /** React node that appears in the attached toggle in place of the toggleText property. */
+  toggleContent?: React.ReactNode;
+  /** Text that appears in the attached toggle. */
+  toggleText?: string;
+  /** Text that appears in the attached toggle when collapsed (will override toggleText if
+   * both are specified; used for uncontrolled expandable with dynamic toggle text).
+   */
+  toggleTextCollapsed?: string;
+  /** Text that appears in the attached toggle when expanded (will override toggleText if
+   * both are specified; used for uncontrolled expandable with dynamic toggle text).
+   */
+  toggleTextExpanded?: string;
+  /** @beta Truncates the expandable content to the specified number of lines when using the
+   * "truncate" variant.
+   */
+  truncateMaxLines?: number;
   /** @beta Determines the variant of the expandable section. When passing in "truncate" as the
    * variant, the expandable content will be truncated after 3 lines by default.
    */
   variant?: 'default' | 'truncate';
-  /** @beta Truncates the expandable content to the specified number of lines when using the
-   * "truncate" variant. */
-  truncateMaxLines?: number;
 }
 
 interface ExpandableSectionState {

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -3,21 +3,27 @@ import styles from '@patternfly/react-styles/css/components/ExpandableSection/ex
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
+/** Acts as the toggle sub-component when the main expandable section component has the isDetached
+ * property passed in. Allows for more custom control over the expandable section's toggle.
+ */
+
 export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the expandable toggle. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable toggle. */
   className?: string;
-  /** Flag indicating if the expandable section is expanded. */
-  isExpanded?: boolean;
-  /** Callback function to toggle the expandable content. */
-  onToggle?: (isExpanded: boolean) => void;
-  /** ID of the toggle's respective expandable section content. */
+  /** Id of the toggle's respective expandable section content. The value passed into this
+   * property should match the contentId property of the main expandable section component.
+   */
   contentId?: string;
   /** Direction the toggle arrow should point when the expandable section is expanded. */
   direction?: 'up' | 'down';
   /** @beta Flag to determine toggle styling when the expandable content is truncated. */
   hasTruncatedContent?: boolean;
+  /** Flag indicating if the expandable section is expanded. */
+  isExpanded?: boolean;
+  /** Callback function to toggle the expandable content. */
+  onToggle?: (isExpanded: boolean) => void;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({