@patternfly/react-core 6.1.1-prerelease.0 → 6.1.1-prerelease.2

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.1-prerelease.1","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.1-prerelease.1","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.1-prerelease.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.1.1-prerelease.0",
+  "version": "6.1.1-prerelease.2",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e161ac6d6f712b7c5692e981e79da71fdd85f011"
+  "gitHead": "9acfd98e73238e0a95cef9cc25834568637cf1b7"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -6,7 +6,7 @@ import { AboutModalBoxHeader } from './AboutModalBoxHeader';
 import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
-import { Modal, ModalVariant } from '../../deprecated/components/Modal';
+import { Modal, ModalVariant } from '../Modal';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
@@ -82,10 +82,8 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
           {...(productName && { 'aria-labelledby': ariaLabelledBy })}
           aria-label={ariaLabel}
           onEscapePress={onClose}
-          showClose={false}
           appendTo={appendTo}
           disableFocusTrap={disableFocusTrap}
-          hasNoBodyWrapper
         >
           <AboutModalBox
             style={

package/src/components/Card/CardHeader.tsx

@@ -9,6 +9,7 @@ import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { Radio } from '../Radio';
 import { Checkbox } from '../Checkbox';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface CardHeaderActionsObject {
   /** Actions of the card header */
@@ -87,122 +88,122 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   toggleButtonProps,
   isToggleRightAligned,
   ...props
-}: CardHeaderProps) => {
-  const uniqueId = React.useId();
-
-  return (
-    <CardContext.Consumer>
-      {({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
-        const cardHeaderToggle = (
-          <div className={css(styles.cardHeaderToggle)}>
-            <Button
-              variant="plain"
-              type="button"
-              onClick={(evt) => {
-                onExpand(evt, cardId);
-              }}
-              {...toggleButtonProps}
-              icon={
-                <span className={css(styles.cardHeaderToggleIcon)}>
-                  <AngleRightIcon />
-                </span>
-              }
-            />
-          </div>
-        );
-
-        const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
-        if (actions?.actions && isClickableOrSelectableOnly) {
-          // eslint-disable-next-line no-console
-          console.error(
-            `Card: ${
-              isClickable ? 'Clickable' : 'Selectable'
-            } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
+}: CardHeaderProps) => (
+  <GenerateId>
+    {(randomId) => (
+      <CardContext.Consumer>
+        {({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
+          const cardHeaderToggle = (
+            <div className={css(styles.cardHeaderToggle)}>
+              <Button
+                variant="plain"
+                type="button"
+                onClick={(evt) => {
+                  onExpand(evt, cardId);
+                }}
+                {...toggleButtonProps}
+                icon={
+                  <span className={css(styles.cardHeaderToggleIcon)}>
+                    <AngleRightIcon />
+                  </span>
+                }
+              />
+            </div>
           );
-        }
 
-        const isClickableOnlyCard = isClickable && !isSelectable;
-        if (
-          (isClickableOnlyCard || isSelectable) &&
-          !selectableActions?.selectableActionAriaLabel &&
-          !selectableActions?.selectableActionAriaLabelledby
-        ) {
-          // eslint-disable-next-line no-console
-          console.error(
-            `Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
-          );
-        }
+          const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
+          if (actions?.actions && isClickableOrSelectableOnly) {
+            // eslint-disable-next-line no-console
+            console.error(
+              `Card: ${
+                isClickable ? 'Clickable' : 'Selectable'
+              } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
+            );
+          }
 
-        const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
-        const getSelectableProps = () => ({
-          className: css('pf-m-standalone'),
-          inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
-          label: <></>,
-          'aria-label': selectableActions.selectableActionAriaLabel,
-          'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
-          id: selectableActions.selectableActionId ?? `card-selectable-${uniqueId}`,
-          name: selectableActions.name,
-          isDisabled: isCardDisabled,
-          onChange: selectableActions.onChange,
-          isChecked: selectableActions.isChecked ?? isSelected,
-          ...selectableActions.selectableActionProps
-        });
+          const isClickableOnlyCard = isClickable && !isSelectable;
+          if (
+            (isClickableOnlyCard || isSelectable) &&
+            !selectableActions?.selectableActionAriaLabel &&
+            !selectableActions?.selectableActionAriaLabelledby
+          ) {
+            // eslint-disable-next-line no-console
+            console.error(
+              `Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
+            );
+          }
 
-        const isClickableLinkCard = selectableActions?.to !== undefined;
-        const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
-        const getClickableProps = () => {
-          const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
-          const baseProps = {
-            className: css(
-              'pf-v6-c-card__clickable-action',
-              isDisabledLinkCard && styles.modifiers.disabled,
-              selectableActions?.isHidden && 'pf-v6-screen-reader'
-            ),
-            id: selectableActions.selectableActionId,
+          const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
+          const getSelectableProps = () => ({
+            className: css('pf-m-standalone'),
+            inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
+            label: <></>,
             'aria-label': selectableActions.selectableActionAriaLabel,
             'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
+            id: selectableActions.selectableActionId ?? `card-selectable-${randomId}`,
+            name: selectableActions.name,
+            isDisabled: isCardDisabled,
+            onChange: selectableActions.onChange,
+            isChecked: selectableActions.isChecked ?? isSelected,
             ...selectableActions.selectableActionProps
-          };
+          });
 
-          if (isClickableLinkCard) {
-            return {
-              ...baseProps,
-              href: selectableActions.to,
-              ...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
-              ...(selectableActions.isExternalLink && { target: '_blank' })
+          const isClickableLinkCard = selectableActions?.to !== undefined;
+          const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
+          const getClickableProps = () => {
+            const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
+            const baseProps = {
+              className: css(
+                'pf-v6-c-card__clickable-action',
+                isDisabledLinkCard && styles.modifiers.disabled,
+                selectableActions?.isHidden && 'pf-v6-screen-reader'
+              ),
+              id: selectableActions.selectableActionId,
+              'aria-label': selectableActions.selectableActionAriaLabel,
+              'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
+              ...selectableActions.selectableActionProps
             };
-          }
 
-          return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
-        };
+            if (isClickableLinkCard) {
+              return {
+                ...baseProps,
+                href: selectableActions.to,
+                ...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
+                ...(selectableActions.isExternalLink && { target: '_blank' })
+              };
+            }
 
-        return (
-          <div
-            className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
-            id={id}
-            {...props}
-          >
-            {onExpand && !isToggleRightAligned && cardHeaderToggle}
-            {(actions || (selectableActions && (isClickable || isSelectable))) && (
-              <CardActions
-                className={actions?.className}
-                hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
-              >
-                {actions?.actions}
-                {selectableActions && (isClickable || isSelectable) && (
-                  <CardSelectableActions className={selectableActions?.className}>
-                    {isSelectable && <SelectableCardInput {...getSelectableProps()} />}
-                    {isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
-                  </CardSelectableActions>
-                )}
-              </CardActions>
-            )}
-            {children && <CardHeaderMain>{children}</CardHeaderMain>}
-            {onExpand && isToggleRightAligned && cardHeaderToggle}
-          </div>
-        );
-      }}
-    </CardContext.Consumer>
-  );
-};
+            return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
+          };
+
+          return (
+            <div
+              className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
+              id={id}
+              {...props}
+            >
+              {onExpand && !isToggleRightAligned && cardHeaderToggle}
+              {(actions || (selectableActions && (isClickable || isSelectable))) && (
+                <CardActions
+                  className={actions?.className}
+                  hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
+                >
+                  {actions?.actions}
+                  {selectableActions && (isClickable || isSelectable) && (
+                    <CardSelectableActions className={selectableActions?.className}>
+                      {isSelectable && <SelectableCardInput {...getSelectableProps()} />}
+                      {isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
+                    </CardSelectableActions>
+                  )}
+                </CardActions>
+              )}
+              {children && <CardHeaderMain>{children}</CardHeaderMain>}
+              {onExpand && isToggleRightAligned && cardHeaderToggle}
+            </div>
+          );
+        }}
+      </CardContext.Consumer>
+    )}
+  </GenerateId>
+);
 CardHeader.displayName = 'CardHeader';

package/src/components/DataList/DataListCheck.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { Checkbox, CheckboxProps } from '../Checkbox';
+import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface DataListCheckProps extends Omit<CheckboxProps, 'ref' | 'id'> {
   /** Id of the DataList checkbox. */
@@ -46,21 +47,23 @@ export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
   otherControls = false,
   ...props
 }: DataListCheckProps) => {
-  const uniqueId = React.useId();
-
   const check = (
     <div className={css(styles.dataListCheck)}>
-      <Checkbox
-        id={id ?? `datalist-check-${uniqueId}`}
-        isChecked={isChecked}
-        checked={checked}
-        defaultChecked={defaultChecked}
-        onChange={onChange}
-        aria-invalid={!isValid}
-        isDisabled={isDisabled}
-        isLabelWrapped
-        {...props}
-      />
+      <GenerateId>
+        {(randomId) => (
+          <Checkbox
+            id={id ?? `datalist-check-${randomId}`}
+            isChecked={isChecked}
+            checked={checked}
+            defaultChecked={defaultChecked}
+            onChange={onChange}
+            aria-invalid={!isValid}
+            isDisabled={isDisabled}
+            isLabelWrapped
+            {...props}
+          />
+        )}
+      </GenerateId>
     </div>
   );
   return (

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -7,8 +7,7 @@ import {
   FormGroup,
   HelperText,
   HelperTextItem,
-  DropEvent,
-  Icon
+  DropEvent
 } from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
@@ -94,14 +93,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           <FileUploadHelperText>
             <HelperText isLiveRegion>
               <HelperTextItem id="restricted-file-example-helpText" variant={isRejected ? 'error' : 'default'}>
-                {isRejected ? (
-                  <>
-                    <Icon status="danger" />
-                    {message}
-                  </>
-                ) : (
-                  'Upload a CSV file'
-                )}
+                {isRejected ? message : 'Upload a CSV file'}
               </HelperTextItem>
             </HelperText>
           </FileUploadHelperText>

package/src/demos/DatePicker/examples/DateTimePickerInModal.tsx

@@ -1,6 +1,16 @@
 import React from 'react';
-import { DatePicker, Button, TimePicker, InputGroup, InputGroupItem } from '@patternfly/react-core';
-import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
+import {
+  DatePicker,
+  Button,
+  TimePicker,
+  InputGroup,
+  InputGroupItem,
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '@patternfly/react-core';
 
 export const SimpleModal = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -26,31 +36,37 @@ export const SimpleModal = () => {
       <Button variant="primary" onClick={handleModalToggle}>
         Launch modal
       </Button>
-      <ModalDeprecated
+      <Modal
         id="date-time-picker-modal"
-        variant={ModalVariantDeprecated.small}
-        title="Generic modal header"
+        variant={ModalVariant.small}
         isOpen={isModalOpen}
         onEscapePress={onEscapePress}
         onClose={handleModalToggle}
-        actions={[
+      >
+        <ModalHeader title="Generic modal header" />
+        <ModalBody>
+          <InputGroup>
+            <InputGroupItem>
+              <DatePicker ref={dateRef} appendTo={() => document.body} />
+            </InputGroupItem>
+            <InputGroupItem>
+              <TimePicker
+                menuAppendTo={() => document.body}
+                isOpen={isTimePickerOpen}
+                setIsOpen={setIsTimePickerOpen}
+              />
+            </InputGroupItem>
+          </InputGroup>
+        </ModalBody>
+        <ModalFooter>
           <Button key="confirm" variant="primary" onClick={handleModalToggle}>
             Confirm
-          </Button>,
+          </Button>
           <Button key="cancel" variant="link" onClick={handleModalToggle}>
             Cancel
           </Button>
-        ]}
-      >
-        <InputGroup>
-          <InputGroupItem>
-            <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
-          </InputGroupItem>
-          <InputGroupItem>
-            <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
-          </InputGroupItem>
-        </InputGroup>
-      </ModalDeprecated>
+        </ModalFooter>
+      </Modal>
     </React.Fragment>
   );
 };

package/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx

@@ -6,9 +6,11 @@ import {
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
   Checkbox,
-  DropEvent
+  DropEvent,
+  Modal,
+  ModalHeader,
+  ModalBody
 } from '@patternfly/react-core';
-import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
@@ -135,16 +137,10 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
             ))}
           </MultipleFileUploadStatus>
         )}
-        <ModalDeprecated
-          isOpen={!!modalText}
-          title="Unsupported file"
-          titleIconVariant="warning"
-          showClose
-          aria-label="unsupported file upload attempted"
-          onClose={() => setModalText('')}
-        >
-          {modalText}
-        </ModalDeprecated>
+        <Modal isOpen={!!modalText} aria-label="unsupported file upload attempted" onClose={() => setModalText('')}>
+          <ModalHeader title="Unsupported file" titleIconVariant="warning" />
+          <ModalBody>{modalText}</ModalBody>
+        </Modal>
       </MultipleFileUpload>
       <Checkbox
         id="horizontal-checkbox"

package/src/deprecated/components/DualListSelector/DualListSelector.tsx

@@ -59,7 +59,7 @@ export interface DualListSelectorProps {
   addSelectedAriaLabel?: string;
   /** Tooltip content for the dynamically built add selected button */
   addSelectedTooltip?: React.ReactNode;
-  /** Additonal tooltip properties for the dynamically built add selected tooltip */
+  /** Additional tooltip properties for the dynamically built add selected tooltip */
   addSelectedTooltipProps?: any;
   /** Callback fired every time dynamically built options are chosen or removed */
   onListChange?: (
@@ -73,7 +73,7 @@ export interface DualListSelectorProps {
   addAllAriaLabel?: string;
   /** Tooltip content for the dynamically built add all button */
   addAllTooltip?: React.ReactNode;
-  /** Additonal tooltip properties for the dynamically built add all tooltip */
+  /** Additional tooltip properties for the dynamically built add all tooltip */
   addAllTooltipProps?: any;
   /** Optional callback for the dynamically built remove selected button */
   removeSelected?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
@@ -81,7 +81,7 @@ export interface DualListSelectorProps {
   removeSelectedAriaLabel?: string;
   /** Tooltip content for the dynamically built remove selected button */
   removeSelectedTooltip?: React.ReactNode;
-  /** Additonal tooltip properties for the dynamically built remove selected tooltip  */
+  /** Additional tooltip properties for the dynamically built remove selected tooltip  */
   removeSelectedTooltipProps?: any;
   /** Optional callback for the dynamically built remove all button */
   removeAll?: (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void;
@@ -89,7 +89,7 @@ export interface DualListSelectorProps {
   removeAllAriaLabel?: string;
   /** Tooltip content for the dynamically built remove all button */
   removeAllTooltip?: React.ReactNode;
-  /** Additonal tooltip properties for the dynamically built remove all tooltip */
+  /** Additional tooltip properties for the dynamically built remove all tooltip */
   removeAllTooltipProps?: any;
   /** Optional callback fired when a dynamically built option is selected */
   onOptionSelect?: (
@@ -286,8 +286,8 @@ class DualListSelector extends React.Component<DualListSelectorProps, DualListSe
         chosenFilteredOptions: newChosen,
         availableOptions: newAvailable,
         availableFilteredOptions: newAvailable,
-        chosenOptionsSelected: [],
-        availableOptionsSelected: []
+        chosenOptionsSelected: [] as number[],
+        availableOptionsSelected: [] as number[]
       };
     });
   };
@@ -319,8 +319,8 @@ class DualListSelector extends React.Component<DualListSelectorProps, DualListSe
         chosenFilteredOptions: newChosen,
         availableOptions: newAvailable,
         availableFilteredOptions: newAvailable,
-        availableTreeOptionsChecked: [],
-        chosenTreeOptionsChecked: []
+        availableTreeOptionsChecked: [] as string[],
+        chosenTreeOptionsChecked: [] as string[]
       };
     });
   };
@@ -342,8 +342,8 @@ class DualListSelector extends React.Component<DualListSelectorProps, DualListSe
       this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
-        chosenOptionsSelected: [],
-        availableOptionsSelected: [],
+        chosenOptionsSelected: [] as number[],
+        availableOptionsSelected: [] as number[],
         chosenOptions: newChosen,
         chosenFilteredOptions: newChosen,
         availableOptions: newAvailable,
@@ -374,8 +374,8 @@ class DualListSelector extends React.Component<DualListSelectorProps, DualListSe
       this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
-        availableTreeOptionsChecked: [],
-        chosenTreeOptionsChecked: [],
+        availableTreeOptionsChecked: [] as string[],
+        chosenTreeOptionsChecked: [] as string[],
         availableOptions: newAvailable,
         chosenOptions: newChosen
       };
@@ -404,8 +404,8 @@ class DualListSelector extends React.Component<DualListSelectorProps, DualListSe
         chosenFilteredOptions: newChosen,
         availableOptions: newAvailable,
         availableFilteredOptions: newAvailable,
-        chosenOptionsSelected: [],
-        availableOptionsSelected: []
+        chosenOptionsSelected: [] as number[],
+        availableOptionsSelected: [] as number[]
       };
     });
   };
@@ -433,8 +433,8 @@ class DualListSelector extends React.Component<DualListSelectorProps, DualListSe
       return {
         chosenOptions: newChosen,
         availableOptions: newAvailable,
-        availableTreeOptionsChecked: [],
-        chosenTreeOptionsChecked: []
+        availableTreeOptionsChecked: [] as string[],
+        chosenTreeOptionsChecked: [] as string[]
       };
     });
   };
@@ -456,8 +456,8 @@ class DualListSelector extends React.Component<DualListSelectorProps, DualListSe
       this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
-        chosenOptionsSelected: [],
-        availableOptionsSelected: [],
+        chosenOptionsSelected: [] as number[],
+        availableOptionsSelected: [] as number[],
         chosenOptions: newChosen,
         chosenFilteredOptions: newChosen,
         availableOptions: newAvailable,
@@ -488,8 +488,8 @@ class DualListSelector extends React.Component<DualListSelectorProps, DualListSe
       this.props.onListChange && this.props.onListChange(event, newAvailable, newChosen);
 
       return {
-        availableTreeOptionsChecked: [],
-        chosenTreeOptionsChecked: [],
+        availableTreeOptionsChecked: [] as string[],
+        chosenTreeOptionsChecked: [] as string[],
         availableOptions: newAvailable,
         chosenOptions: newChosen
       };