@openshift-assisted/ui-lib 2.16.2-cim → 2.16.4-cim

package/lib/common/components/ui/OpenShiftSelectWithSearch.tsx

@@ -1,24 +1,36 @@
-import React from 'react';
-import { SelectOptionProps } from '@patternfly/react-core';
-import { useField } from 'formik';
+import React, { Dispatch, SetStateAction } from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  Divider,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { OpenshiftVersionOptionType } from '../../types';
 import { HelperTextType } from './OpenShiftVersionDropdown';
-import { useTranslation } from '../../hooks';
-import { SelectFieldWithSearch } from './formik';
-import { ClusterDetailsValues } from '../clusterWizard';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type OpenshiftSelectWithSearchProps = {
   versions: OpenshiftVersionOptionType[];
   getHelperText?: HelperTextType;
+  setCustomOpenshiftSelect: Dispatch<SetStateAction<OpenshiftVersionOptionType | undefined>>;
 };
 
 export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectWithSearchProps> = ({
   versions,
   getHelperText,
+  setCustomOpenshiftSelect,
 }: OpenshiftSelectWithSearchProps) => {
-  const { t } = useTranslation();
-  const [{ value }] =
-    useField<ClusterDetailsValues['customOpenshiftSelect']>('customOpenshiftSelect');
   const initialSelectOptions = React.useMemo(
     () =>
       versions.map((version) => ({
@@ -31,11 +43,22 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
     [versions],
   );
 
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('');
+  const [inputValue, setInputValue] = React.useState<string>('');
   const [filterValue, setFilterValue] = React.useState<string>('');
   const [selectOptions, setSelectOptions] =
     React.useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
+  const textInputRef = React.useRef<HTMLInputElement>();
+  const { t } = useTranslation();
 
-  const helperText = getHelperText && getHelperText(value, true);
+  React.useEffect(() => {
+    if (textInputRef.current) {
+      textInputRef.current.maxLength = 30;
+    }
+  }, []);
 
   React.useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
@@ -51,43 +74,221 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
         newSelectOptions = [
           {
             isDisabled: true,
-            children: t('ai:No results found for {{filter}}', { filter: filterValue }),
-            value: 'no_results',
+            children: `No results found for "${filterValue}"`,
+            value: 'no results',
           },
         ];
       }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isOpen) {
+        setIsOpen(true);
+      }
     }
 
-    const selectOptionsWithDividers = newSelectOptions.map((option, index) => {
-      const match = (option.value as string).match(/\d+\.(\d+)\.\d+/);
-      const y = match ? match[1] : null;
+    setSelectOptions(newSelectOptions);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
+  }, [filterValue, initialSelectOptions, isOpen]);
 
-      const previousY =
-        index > 0
-          ? ((newSelectOptions[index - 1].value as string).match(/\d+\.(\d+)\.\d+/) || [])[1]
-          : null;
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
 
-      return {
-        ...option,
-        showDivider: previousY !== null && y !== previousY,
-      };
-    });
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined,
+  ) => {
+    // Check if the specific value exists in newSelectOptions
+    const foundItem = selectOptions.find((menuItem) => String(menuItem.value) === String(value));
+    const newLabel = foundItem?.children;
+    if (value && value !== 'no results') {
+      setInputValue(newLabel as string);
+      setFilterValue('');
+      setSelected(value as string);
+      const filteredVersions = versions.filter((version) => version.value === value);
+      setCustomOpenshiftSelect({
+        label:
+          filteredVersions[0].supportLevel === 'beta'
+            ? filteredVersions[0].label + ' - ' + t('ai:Developer preview release')
+            : filteredVersions[0].label,
+        value: filteredVersions[0].value,
+        version: filteredVersions[0].version,
+        default: filteredVersions[0].default,
+        supportLevel: filteredVersions[0].supportLevel,
+      });
+    }
+    setIsOpen(false);
+    setFocusedItemIndex(null);
+    setActiveItem(null);
+  };
 
-    setSelectOptions(selectOptionsWithDividers);
-  }, [filterValue, initialSelectOptions, t]);
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+    setFilterValue(value);
+  };
 
-  return (
-    <SelectFieldWithSearch
-      selectOptions={selectOptions}
-      filterValue={filterValue}
-      setFilterValue={setFilterValue}
-      name={'customOpenshiftSelect'}
-      helperText={
-        helperText ??
-        t(
-          'ai:Select an OpenShift version from the list or use the type ahead to narrow down the list.',
-        )
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus;
+
+    if (isOpen) {
+      if (key === 'ArrowUp') {
+        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+        if (focusedItemIndex === null || focusedItemIndex === 0) {
+          indexToFocus = selectOptions.length - 1;
+        } else {
+          indexToFocus = focusedItemIndex - 1;
+        }
+      }
+
+      if (key === 'ArrowDown') {
+        // When no index is set or at the last index, focus to the first, otherwise increment focus index
+        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+          indexToFocus = 0;
+        } else {
+          indexToFocus = focusedItemIndex + 1;
+        }
       }
-    />
+
+      setFocusedItemIndex(indexToFocus ?? 0);
+      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus ?? 0];
+      setActiveItem(`select-typeahead-${(focusedItem.value as string).replace(' ', '-')}`);
+    }
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
+    const [firstMenuItem] = enabledMenuItems;
+    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+
+    switch (event.key) {
+      // Select the first available option
+      case 'Enter':
+        if (isOpen && focusedItem.value !== 'no results') {
+          setInputValue(String(focusedItem.children));
+          setFilterValue('');
+          setSelected(String(focusedItem.children));
+        }
+
+        setIsOpen((prevIsOpen) => !prevIsOpen);
+        setFocusedItemIndex(null);
+        setActiveItem(null);
+
+        break;
+      case 'Tab':
+      case 'Escape':
+        setIsOpen(false);
+        setActiveItem(null);
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+      data-testid="openshift-version-dropdown-toggle"
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={onToggleClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id="typeahead-select-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder=""
+          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-typeahead-listbox"
+        />
+
+        <TextInputGroupUtilities>
+          {!!inputValue && (
+            <Button
+              icon={<TimesIcon aria-hidden />}
+              variant="plain"
+              onClick={() => {
+                setSelected('');
+                setInputValue('');
+                setFilterValue('');
+                textInputRef?.current?.focus();
+              }}
+              aria-label="Clear input value"
+            />
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  const helperText = getHelperText && getHelperText(selected, true);
+
+  return (
+    <>
+      <Select
+        id="customOpenshiftSelect"
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={onSelect}
+        onOpenChange={() => {
+          setIsOpen(false);
+        }}
+        toggle={toggle}
+        isScrollable
+      >
+        <SelectList id="select-typeahead-listbox">
+          {selectOptions.reverse().map((option, index) => {
+            const match = (option.value as string).match(/\d+\.(\d+)\.\d+/);
+            const y = match ? match[1] : null;
+
+            const previousY =
+              index > 0
+                ? ((selectOptions[index - 1].value as string).match(/\d+\.(\d+)\.\d+/) || [])[1]
+                : null;
+
+            const showDivider = previousY !== null && y !== previousY;
+            return (
+              <React.Fragment key={index}>
+                {showDivider && (
+                  <Divider
+                    component="li"
+                    id={`divider-${option.value as string}`}
+                    key={`divider-${option.value as string}`}
+                  />
+                )}
+                <SelectOption
+                  key={option.value as string}
+                  isFocused={focusedItemIndex === index}
+                  className={option.className}
+                  onClick={() => setSelected(option.value as string)}
+                  id={`select-typeahead-${(option.value as string).replace(' ', '-')}`}
+                  {...option}
+                  ref={null}
+                />
+              </React.Fragment>
+            );
+          })}
+        </SelectList>
+      </Select>
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem variant="default" data-testid="openshift-select-with-search-helper-text">
+            {helperText ??
+              'Select an OpenShift version from the list or use the type ahead to narrow down the list.'}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    </>
   );
 };

package/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -21,7 +21,7 @@ import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
 import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
 
-export type HelperTextType = (value: string | null, inModal?: boolean) => JSX.Element | null;
+export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
 type OpenShiftVersionDropdownProps = {
   name: string;
@@ -30,7 +30,7 @@ type OpenShiftVersionDropdownProps = {
   getHelperText?: HelperTextType;
   showReleasesLink: boolean;
   showOpenshiftVersionModal: () => void;
-  customItem?: OpenshiftVersionOptionType;
+  customItems: ItemDropdown;
 };
 
 const getParsedVersions = (items: ItemDropdown) => {
@@ -49,7 +49,7 @@ export const OpenShiftVersionDropdown = ({
   getHelperText,
   showReleasesLink,
   showOpenshiftVersionModal,
-  customItem,
+  customItems,
 }: OpenShiftVersionDropdownProps) => {
   const [field, , { setValue }] = useField<string>(name);
   const [isOpen, setOpen] = React.useState(false);
@@ -61,13 +61,9 @@ export const OpenShiftVersionDropdown = ({
   const [current, setCurrent] = React.useState<string>();
 
   React.useEffect(() => {
-    let defaultVersion = versions.find((item) => item.default);
-    if (customOpenshiftSelect && customItem) {
-      defaultVersion = customItem;
-    } else if (customOpenshiftSelect) {
-      defaultVersion = versions.find((item) => item.value === customOpenshiftSelect);
-    }
-
+    const defaultVersion = customOpenshiftSelect
+      ? customOpenshiftSelect
+      : versions.find((item) => item.default);
     setCurrent(defaultVersion?.label || '');
     setValue(defaultVersion?.value || '');
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -89,17 +85,30 @@ export const OpenShiftVersionDropdown = ({
     return items;
   });
 
+  const parsedVersionsForCustomItems = getParsedVersions(customItems);
+  let lastCustomY: string | undefined = '';
+  const customDropdownItems = parsedVersionsForCustomItems.parsedVersions.map(({ y, versions }) => {
+    const customItems = versions.map(({ value, label }) => (
+      <DropdownItem key={value} id={value} value={value}>
+        {label}
+      </DropdownItem>
+    ));
+    if (lastCustomY !== null && y !== lastCustomY) {
+      customItems.push(<Divider key={`separator-${y || ''}`} />);
+    }
+    lastCustomY = y;
+    return customItems;
+  });
+
   const dropdownGroup = [
     dropdownItems.length && (
       <DropdownGroup label="Latest releases" key="latest-releases">
         {dropdownItems}
       </DropdownGroup>
     ),
-    customItem && (
+    customDropdownItems.length && (
       <DropdownGroup label="Custom releases" key="custom-releases">
-        <DropdownItem key={customItem.value} id={customItem.value} value={customItem.value}>
-          {customItem.label}
-        </DropdownItem>
+        {customDropdownItems}
       </DropdownGroup>
     ),
     <DropdownGroup key="all-available-versions">
@@ -107,7 +116,10 @@ export const OpenShiftVersionDropdown = ({
         <Button
           variant="link"
           isInline
-          onClick={() => showOpenshiftVersionModal()}
+          onClick={() => {
+            setOpen(false);
+            showOpenshiftVersionModal();
+          }}
           id="show-all-versions"
         >
           {t('ai:Show all available versions')}
@@ -132,11 +144,13 @@ export const OpenShiftVersionDropdown = ({
   const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
       ref={toggleRef}
       isFullWidth
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
+      data-testid="openshift-version-dropdown-toggle"
     >
       {current || t('ai:OpenShift version')}
     </MenuToggle>
@@ -166,16 +180,20 @@ export const OpenShiftVersionDropdown = ({
       {helperText && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem variant="default">{helperText}</HelperTextItem>
+            <HelperTextItem variant="default" data-testid="openshift-version-dropdown-helper-text">
+              {helperText}
+            </HelperTextItem>
           </HelperText>
         </FormHelperText>
       )}
       {showReleasesLink && (
-        <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
-          <span data-ouia-id="openshift-releases-link">
-            {t('ai:Learn more about OpenShift releases')}
-          </span>
-        </ExternalLink>
+        <div className="pf-v6-u-mt-sm">
+          <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
+            <span data-ouia-id="openshift-releases-link">
+              {t('ai:Learn more about OpenShift releases')}
+            </span>
+          </ExternalLink>
+        </div>
       )}
     </FormGroup>
   );

package/lib/common/components/ui/OpenShiftVersionModal.css

@@ -2,6 +2,6 @@
   height: 44vh;
   display: flex;
 }
-#customOpenshiftSelect .pf-v5-c-menu__content {
+#customOpenshiftSelect .pf-v6-c-menu__content {
   max-height: 22vh;
 }

package/lib/common/components/ui/OpenShiftVersionModal.tsx

@@ -1,5 +1,14 @@
-import React from 'react';
-import { Button, ButtonVariant, FormGroup, Modal, ModalVariant } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import {
+  Button,
+  ButtonVariant,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { OpenShiftSelectWithSearch } from './OpenShiftSelectWithSearch';
 import { HelperTextType } from './OpenShiftVersionDropdown';
 import { useFormikContext } from 'formik';
@@ -18,40 +27,46 @@ export const OpenShiftVersionModal = ({
   getHelperText,
 }: OpenShiftVersionModalProps) => {
   const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
+  const onClose = () => setOpenshiftVersionModalOpen(false);
+  const [customOpenshiftSelect, setCustomOpenshiftSelect] = useState<OpenshiftVersionOptionType>(); // Cambiar el tipo según lo que esperes aquí
 
-  const onCancel = () => {
-    setFieldValue('customOpenshiftSelect', null);
-    setOpenshiftVersionModalOpen(false);
+  const handleSelect = () => {
+    if (customOpenshiftSelect) {
+      setFieldValue('customOpenshiftSelect', customOpenshiftSelect);
+    }
+    onClose();
   };
 
   return (
     <Modal
-      title="Available OpenShift Versions"
       id="available-openshift-versions-modal"
       isOpen
-      actions={[
-        <Button
-          key="select-custom-ocp"
-          variant={ButtonVariant.primary}
-          onClick={() => setOpenshiftVersionModalOpen(false)}
+      onClose={onClose}
+      variant={ModalVariant.small}
+    >
+      <ModalHeader title="Available OpenShift Versions" />
+      <ModalBody>
+        <FormGroup
+          id={`form-control__customOpenshiftSelect`}
+          fieldId={'customOpenshiftSelect'}
+          label={'OpenShift version'}
+          isRequired
         >
+          <OpenShiftSelectWithSearch
+            versions={allVersions}
+            getHelperText={getHelperText}
+            setCustomOpenshiftSelect={setCustomOpenshiftSelect}
+          />
+        </FormGroup>
+      </ModalBody>
+      <ModalFooter>
+        <Button key="select-custom-ocp" variant={ButtonVariant.primary} onClick={handleSelect}>
           Select
-        </Button>,
-        <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onCancel}>
+        </Button>
+        <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onClose}>
           Cancel
-        </Button>,
-      ]}
-      onClose={onCancel}
-      variant={ModalVariant.small}
-    >
-      <FormGroup
-        id={`form-control__customOpenshiftSelect`}
-        fieldId={'customOpenshiftSelect'}
-        label={'OpenShift version'}
-        isRequired
-      >
-        <OpenShiftSelectWithSearch versions={allVersions} getHelperText={getHelperText} />
-      </FormGroup>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/common/components/ui/PopoverIcon.tsx

@@ -27,17 +27,18 @@ const PopoverIcon: React.FC<PopoverIconProps> = ({
 }) => (
   <Popover {...props}>
     <Button
+      icon={
+        <Icon isInline={noVerticalAlign}>
+          <IconComponent />
+        </Icon>
+      }
       component={component}
       variant={variant}
       onClick={(e) => e.preventDefault()}
-      className={classNames('pf-v5-c-form__group-label-help', 'pf-v5-u-p-0', buttonClassName)}
+      className={classNames('pf-v6-c-form__group-label-help', 'pf-v6-u-p-0', buttonClassName)}
       ouiaId={buttonOuiaId}
       style={buttonStyle}
-    >
-      <Icon isInline={noVerticalAlign}>
-        <IconComponent />
-      </Icon>
-    </Button>
+    />
   </Popover>
 );
 

package/lib/common/components/ui/PreviewBadge.tsx

@@ -21,7 +21,7 @@ export type PreviewBadgeProps = {
 
 export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
   position = PreviewBadgePosition.inline,
-  className = 'pf-v5-u-ml-md',
+  className = 'pf-v6-u-ml-md',
   text,
   popoverContent,
   externalLink,
@@ -31,15 +31,15 @@ export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
   const { t } = useTranslation();
   switch (position) {
     case PreviewBadgePosition.inlineRight:
-      clsName += ' pf-v5-u-float-right';
+      clsName += ' pf-v6-u-float-right';
       break;
     case PreviewBadgePosition.inline:
-      clsName += ' pf-v5-u-display-inline';
+      clsName += ' pf-v6-u-display-inline';
       break;
   }
   const bodyContent = (
     <>
-      <div style={{ marginBottom: 'var(--pf-v5-global--spacer--sm)' }}>{popoverContent}</div>
+      <div style={{ marginBottom: 'var(--pf-t--global--spacer--sm)' }}>{popoverContent}</div>
       {externalLink && (
         <>
           <ExternalLink href={externalLink}>{t('ai:Learn more')}</ExternalLink>
@@ -53,7 +53,7 @@ export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
         <Label
           style={{ cursor: 'pointer' }}
           color="orange"
-          icon={<InfoCircleIcon color="var(--pf-v5-c-label__content--Color)" />}
+          icon={<InfoCircleIcon />}
           className={clsName}
           {...(testId ? { 'data-testid': testId } : {})}
         >

package/lib/common/components/ui/PrismCode.css

@@ -1,4 +1,4 @@
 pre.prism-code {
-  padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md);
+  padding: var(--pf-v6-global--spacer--sm) var(--pf-v6-global--spacer--md);
   overflow-x: auto;
 }

package/lib/common/components/ui/PrismCode.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import Highlight, { defaultProps, Language, PrismTheme } from 'prism-react-renderer';
-import { Text, TextVariants, ClipboardCopy, clipboardCopyFunc } from '@patternfly/react-core';
-import { global_Color_100 } from '@patternfly/react-tokens/dist/js/global_Color_100';
-import { global_palette_purple_400 } from '@patternfly/react-tokens/dist/js/global_palette_purple_400';
-import { global_palette_blue_300 } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import { Content, ClipboardCopy, clipboardCopyFunc } from '@patternfly/react-core';
+import { t_global_color_nonstatus_purple_300 } from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_purple_300';
+import { t_global_color_nonstatus_blue_default as globalBlue } from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_blue_default';
 import defaultTheme from 'prism-react-renderer/themes/github';
 import './PrismCode.css';
 export const SimpleAIPrismTheme = {
   plain: {
-    color: global_Color_100.value,
+    color: '#333333',
     backgroundColor: defaultTheme.plain.backgroundColor,
     fontSize: '.93em',
   },
@@ -16,13 +15,13 @@ export const SimpleAIPrismTheme = {
     {
       types: ['variable'],
       style: {
-        color: global_palette_blue_300.value,
+        color: globalBlue.value,
       },
     },
     {
       types: ['class-name', 'function', 'tag', 'attr-name'],
       style: {
-        color: global_palette_purple_400.value,
+        color: t_global_color_nonstatus_purple_300.value,
       },
     },
   ],
@@ -41,7 +40,7 @@ const PrismCode: React.FC<PrismCodeProps> = ({
 }) => (
   <Highlight {...defaultProps} code={code} language={language} theme={theme}>
     {({ className, style, tokens, getLineProps, getTokenProps }) => (
-      <Text component={TextVariants.pre} className={className} style={style}>
+      <Content component="pre" className={className} style={style}>
         {copiable && (
           <ClipboardCopy
             isReadOnly
@@ -59,7 +58,7 @@ const PrismCode: React.FC<PrismCodeProps> = ({
             ))}
           </div>
         ))}
-      </Text>
+      </Content>
     )}
   </Highlight>
 );