@patternfly/chatbot 6.3.0 → 6.4.0-prerelease.2

package/src/ResponseActions/ResponseActions.tsx

@@ -6,7 +6,8 @@ import {
   OutlinedThumbsUpIcon,
   OutlinedThumbsDownIcon,
   OutlinedCopyIcon,
-  DownloadIcon
+  DownloadIcon,
+  PencilAltIcon
 } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
@@ -50,6 +51,7 @@ export interface ResponseActionProps {
     share?: ActionProps;
     download?: ActionProps;
     listen?: ActionProps;
+    edit?: ActionProps;
   };
 }
 
@@ -58,7 +60,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
   const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
   useEffect(() => {
     // Define the order of precedence for checking initial `isClicked`
-    const actionPrecedence = ['positive', 'negative', 'copy', 'share', 'download', 'listen'];
+    const actionPrecedence = ['positive', 'negative', 'copy', 'edit', 'share', 'download', 'listen'];
     let initialActive: string | undefined;
 
     // Check predefined actions first based on precedence
@@ -83,7 +85,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
     setActiveButton(initialActive);
   }, [actions]);
 
-  const { positive, negative, copy, share, download, listen, ...additionalActions } = actions;
+  const { positive, negative, copy, edit, share, download, listen, ...additionalActions } = actions;
   const responseActions = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -165,6 +167,24 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           aria-controls={copy['aria-controls']}
         ></ResponseActionButton>
       )}
+      {edit && (
+        <ResponseActionButton
+          {...edit}
+          ariaLabel={edit.ariaLabel ?? 'Edit'}
+          clickedAriaLabel={edit.ariaLabel ?? 'Editing'}
+          onClick={(e) => handleClick(e, 'edit', edit.onClick)}
+          className={edit.className}
+          isDisabled={edit.isDisabled}
+          tooltipContent={edit.tooltipContent ?? 'Edit '}
+          clickedTooltipContent={edit.clickedTooltipContent ?? 'Editing'}
+          tooltipProps={edit.tooltipProps}
+          icon={<PencilAltIcon />}
+          isClicked={activeButton === 'edit'}
+          ref={edit.ref}
+          aria-expanded={edit['aria-expanded']}
+          aria-controls={edit['aria-controls']}
+        ></ResponseActionButton>
+      )}
       {share && (
         <ResponseActionButton
           {...share}
@@ -219,6 +239,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           aria-controls={listen['aria-controls']}
         ></ResponseActionButton>
       )}
+
       {Object.keys(additionalActions).map((action) => (
         <ResponseActionButton
           {...additionalActions[action]}

package/src/index.ts

@@ -63,6 +63,9 @@ export * from './MessageBar';
 export { default as MessageBox } from './MessageBox';
 export * from './MessageBox';
 
+export { default as MessageDivider } from './MessageDivider';
+export * from './MessageDivider';
+
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 

package/src/main.scss

@@ -26,6 +26,7 @@
 @import './Message/UserFeedback/UserFeedback';
 @import './MessageBar/MessageBar';
 @import './MessageBox/MessageBox';
+@import './MessageDivider/MessageDivider';
 @import './MessageBox/JumpButton';
 @import './ResponseActions/ResponseActions';
 @import './Settings/Settings';
@@ -33,58 +34,6 @@
 @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
 @import './TermsOfUse/TermsOfUse';
 
-:where(:root) {
-  // ============================================================================
-  // Chatbot Custom Default Tokens
-  // ============================================================================
-
-  --pf-t--chatbot--heading--font-family: var(
-    --pf-v6-c-content--heading--FontFamily,
-    redhatdisplayvf,
-    redhatdisplay,
-    helvetica,
-    arial,
-    sans-serif
-  );
-
-  --pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
-  --pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
-
-  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
-
-  --pf-t--chatbot--blue-icon--background--color--hover: rgba(
-    146,
-    197,
-    249,
-    0.25
-  ); // --pf-t--global--color--nonstatus--blue--default @ 25%
-  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
-
-  // ============================================================================
-  // Chatbot Default tokens using PF semantic tokens
-  // ============================================================================
-  --pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
-  --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
-  --pf-t--chatbot--border: var(--pf-t--global--border--color--default);
-
-  --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
-
-  --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
-}
-
-// ============================================================================
-// Chatbot Custom Dark Theme Tokens
-// ============================================================================
-:where(.pf-v6-theme-dark) {
-  --pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
-  --pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
-
-  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--20);
-
-  --pf-t--chatbot--blue-icon--background--color--hover: var(--pf-t--global--color--brand--hover);
-  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--icon--color--inverse);
-}
-
 .ws-full-page-utils {
   left: 0 !important;
   right: auto !important;

package/dist/cjs/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.d.ts

@@ -1,62 +0,0 @@
-import { Component } from 'react';
-import { PickOptional } from '@patternfly/react-core';
-export declare enum ExpandableSectionVariant {
-    default = "default",
-    truncate = "truncate"
-}
-/** The main expandable section component. */
-export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
-    /** Content rendered inside the expandable section. */
-    children?: React.ReactNode;
-    /** Additional classes added to the expandable section. */
-    className?: string;
-    /** Id of the content of the expandable section. When passing in the isDetached property, this
-     * property's value should match the contentId property of the expandable section toggle sub-component.
-     */
-    contentId?: string;
-    /** Id of the toggle of the expandable section, which provides an accessible name to the
-     * expandable section content via the aria-labelledby attribute. When the isDetached property
-     * is also passed in, the value of this property must match the toggleId property of the
-     * expandable section toggle sub-component.
-     */
-    toggleId?: string;
-    /** Display size variant. Set to "lg" for disclosure styling. */
-    displaySize?: 'default' | 'lg';
-    /** 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;
-    /** Truncates the expandable content to the specified number of lines when using the
-     * "truncate" variant.
-     */
-    truncateMaxLines?: number;
-    /** 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';
-    language?: string;
-}
-interface ExpandableSectionState {
-    isExpanded: boolean;
-    hasToggle: boolean;
-    previousWidth: number | undefined;
-}
-declare class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionProps, ExpandableSectionState> {
-    static displayName: string;
-    constructor(props: ExpandableSectionProps);
-    expandableContentRef: import("react").RefObject<HTMLDivElement>;
-    observer: any;
-    static defaultProps: PickOptional<ExpandableSectionProps>;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ExpandableSectionProps): void;
-    componentWillUnmount(): void;
-    checkToggleVisibility: () => void;
-    resize: () => void;
-    handleResize: (...args: any[]) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export { ExpandableSectionForSyntaxHighlighter };

package/dist/cjs/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js

@@ -1,139 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpandableSectionForSyntaxHighlighter = exports.ExpandableSectionVariant = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const expandable_section_1 = __importDefault(require("@patternfly/react-styles/css/components/ExpandableSection/expandable-section"));
-const react_styles_1 = require("@patternfly/react-styles");
-const c_expandable_section_m_truncate__content_LineClamp_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp"));
-const react_core_1 = require("@patternfly/react-core");
-var ExpandableSectionVariant;
-(function (ExpandableSectionVariant) {
-    ExpandableSectionVariant["default"] = "default";
-    ExpandableSectionVariant["truncate"] = "truncate";
-})(ExpandableSectionVariant || (exports.ExpandableSectionVariant = ExpandableSectionVariant = {}));
-const setLineClamp = (element, lines, language, isExpanded) => {
-    if (!element || !lines || lines < 1 || typeof isExpanded === 'undefined') {
-        return;
-    }
-    if (language) {
-        const selector = `.language-${language.toLowerCase()}`;
-        const childElement = element.querySelector(selector);
-        if (!childElement) {
-            return;
-        }
-        if (isExpanded) {
-            // Reset all truncation-related styles to their default values
-            childElement.style.removeProperty('-webkit-line-clamp');
-            childElement.style.removeProperty('display');
-            childElement.style.removeProperty('-webkit-box-orient');
-            childElement.style.removeProperty('overflow');
-        }
-        else {
-            childElement.style.setProperty('-webkit-line-clamp', lines.toString());
-            childElement.style.setProperty('display', '-webkit-box');
-            childElement.style.setProperty('-webkit-box-orient', 'vertical');
-            childElement.style.setProperty('overflow', 'hidden');
-        }
-    }
-};
-class ExpandableSectionForSyntaxHighlighter extends react_1.Component {
-    constructor(props) {
-        var _a;
-        super(props);
-        this.expandableContentRef = (0, react_1.createRef)();
-        /* eslint-disable-next-line */
-        this.observer = () => { };
-        this.checkToggleVisibility = () => {
-            var _a;
-            if ((_a = this.expandableContentRef) === null || _a === void 0 ? void 0 : _a.current) {
-                const maxLines = this.props.truncateMaxLines || parseInt(c_expandable_section_m_truncate__content_LineClamp_1.default.value);
-                const totalLines = this.expandableContentRef.current.scrollHeight /
-                    parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
-                this.setState({
-                    hasToggle: totalLines > maxLines
-                });
-            }
-        };
-        this.resize = () => {
-            if (this.expandableContentRef.current) {
-                const { offsetWidth } = this.expandableContentRef.current;
-                if (this.state.previousWidth !== offsetWidth) {
-                    this.setState({ previousWidth: offsetWidth });
-                    this.checkToggleVisibility();
-                }
-            }
-        };
-        this.handleResize = (0, react_core_1.debounce)(this.resize, 250);
-        this.state = {
-            isExpanded: (_a = props.isExpanded) !== null && _a !== void 0 ? _a : false,
-            hasToggle: true,
-            previousWidth: undefined
-        };
-    }
-    componentDidMount() {
-        if (this.props.variant === ExpandableSectionVariant.truncate) {
-            const expandableContent = this.expandableContentRef.current;
-            if (expandableContent) {
-                this.setState({ previousWidth: expandableContent.offsetWidth });
-                this.observer = (0, react_core_1.getResizeObserver)(expandableContent, this.handleResize, false);
-                if (this.props.truncateMaxLines) {
-                    setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.state.isExpanded);
-                }
-            }
-            this.checkToggleVisibility();
-        }
-    }
-    componentDidUpdate(prevProps) {
-        if (this.props.variant === ExpandableSectionVariant.truncate &&
-            (prevProps.truncateMaxLines !== this.props.truncateMaxLines ||
-                prevProps.children !== this.props.children ||
-                prevProps.isExpanded !== this.props.isExpanded)) {
-            const expandableContent = this.expandableContentRef.current;
-            setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.props.isExpanded);
-            this.checkToggleVisibility();
-        }
-    }
-    componentWillUnmount() {
-        if (this.props.variant === ExpandableSectionVariant.truncate) {
-            this.observer();
-        }
-    }
-    render() {
-        const _a = this.props, { className, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, toggleId, variant, 
-        // Gets rid of console error about it being on a DOM element
-        // eslint-disable-next-line
-        truncateMaxLines } = _a, props = __rest(_a, ["className", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId", "toggleId", "variant", "truncateMaxLines"]);
-        if (isDetached && !toggleId) {
-            /* eslint-disable no-console */
-            console.warn('ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.');
-        }
-        const uniqueContentId = contentId || (0, react_core_1.getUniqueId)('expandable-section-content');
-        const uniqueToggleId = toggleId || (0, react_core_1.getUniqueId)('expandable-section-toggle');
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_styles_1.css)(expandable_section_1.default.expandableSection, isExpanded && expandable_section_1.default.modifiers.expanded, displaySize === 'lg' && expandable_section_1.default.modifiers.displayLg, isWidthLimited && expandable_section_1.default.modifiers.limitWidth, isIndented && expandable_section_1.default.modifiers.indented, variant === ExpandableSectionVariant.truncate && expandable_section_1.default.modifiers.truncate, className) }, props, { children: (0, jsx_runtime_1.jsx)("div", { ref: this.expandableContentRef, className: (0, react_styles_1.css)(expandable_section_1.default.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !isExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region", children: children }) })));
-    }
-}
-exports.ExpandableSectionForSyntaxHighlighter = ExpandableSectionForSyntaxHighlighter;
-ExpandableSectionForSyntaxHighlighter.displayName = 'ExpandableSection';
-ExpandableSectionForSyntaxHighlighter.defaultProps = {
-    className: '',
-    isDetached: false,
-    displaySize: 'default',
-    isWidthLimited: false,
-    isIndented: false,
-    variant: 'default'
-};

package/dist/esm/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.d.ts

@@ -1,62 +0,0 @@
-import { Component } from 'react';
-import { PickOptional } from '@patternfly/react-core';
-export declare enum ExpandableSectionVariant {
-    default = "default",
-    truncate = "truncate"
-}
-/** The main expandable section component. */
-export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
-    /** Content rendered inside the expandable section. */
-    children?: React.ReactNode;
-    /** Additional classes added to the expandable section. */
-    className?: string;
-    /** Id of the content of the expandable section. When passing in the isDetached property, this
-     * property's value should match the contentId property of the expandable section toggle sub-component.
-     */
-    contentId?: string;
-    /** Id of the toggle of the expandable section, which provides an accessible name to the
-     * expandable section content via the aria-labelledby attribute. When the isDetached property
-     * is also passed in, the value of this property must match the toggleId property of the
-     * expandable section toggle sub-component.
-     */
-    toggleId?: string;
-    /** Display size variant. Set to "lg" for disclosure styling. */
-    displaySize?: 'default' | 'lg';
-    /** 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;
-    /** Truncates the expandable content to the specified number of lines when using the
-     * "truncate" variant.
-     */
-    truncateMaxLines?: number;
-    /** 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';
-    language?: string;
-}
-interface ExpandableSectionState {
-    isExpanded: boolean;
-    hasToggle: boolean;
-    previousWidth: number | undefined;
-}
-declare class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionProps, ExpandableSectionState> {
-    static displayName: string;
-    constructor(props: ExpandableSectionProps);
-    expandableContentRef: import("react").RefObject<HTMLDivElement>;
-    observer: any;
-    static defaultProps: PickOptional<ExpandableSectionProps>;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ExpandableSectionProps): void;
-    componentWillUnmount(): void;
-    checkToggleVisibility: () => void;
-    resize: () => void;
-    handleResize: (...args: any[]) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export { ExpandableSectionForSyntaxHighlighter };

package/dist/esm/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js

@@ -1,133 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Component, createRef } from 'react';
-import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
-import { css } from '@patternfly/react-styles';
-import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
-import { debounce, getResizeObserver, getUniqueId } from '@patternfly/react-core';
-export var ExpandableSectionVariant;
-(function (ExpandableSectionVariant) {
-    ExpandableSectionVariant["default"] = "default";
-    ExpandableSectionVariant["truncate"] = "truncate";
-})(ExpandableSectionVariant || (ExpandableSectionVariant = {}));
-const setLineClamp = (element, lines, language, isExpanded) => {
-    if (!element || !lines || lines < 1 || typeof isExpanded === 'undefined') {
-        return;
-    }
-    if (language) {
-        const selector = `.language-${language.toLowerCase()}`;
-        const childElement = element.querySelector(selector);
-        if (!childElement) {
-            return;
-        }
-        if (isExpanded) {
-            // Reset all truncation-related styles to their default values
-            childElement.style.removeProperty('-webkit-line-clamp');
-            childElement.style.removeProperty('display');
-            childElement.style.removeProperty('-webkit-box-orient');
-            childElement.style.removeProperty('overflow');
-        }
-        else {
-            childElement.style.setProperty('-webkit-line-clamp', lines.toString());
-            childElement.style.setProperty('display', '-webkit-box');
-            childElement.style.setProperty('-webkit-box-orient', 'vertical');
-            childElement.style.setProperty('overflow', 'hidden');
-        }
-    }
-};
-class ExpandableSectionForSyntaxHighlighter extends Component {
-    constructor(props) {
-        var _a;
-        super(props);
-        this.expandableContentRef = createRef();
-        /* eslint-disable-next-line */
-        this.observer = () => { };
-        this.checkToggleVisibility = () => {
-            var _a;
-            if ((_a = this.expandableContentRef) === null || _a === void 0 ? void 0 : _a.current) {
-                const maxLines = this.props.truncateMaxLines || parseInt(lineClamp.value);
-                const totalLines = this.expandableContentRef.current.scrollHeight /
-                    parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
-                this.setState({
-                    hasToggle: totalLines > maxLines
-                });
-            }
-        };
-        this.resize = () => {
-            if (this.expandableContentRef.current) {
-                const { offsetWidth } = this.expandableContentRef.current;
-                if (this.state.previousWidth !== offsetWidth) {
-                    this.setState({ previousWidth: offsetWidth });
-                    this.checkToggleVisibility();
-                }
-            }
-        };
-        this.handleResize = debounce(this.resize, 250);
-        this.state = {
-            isExpanded: (_a = props.isExpanded) !== null && _a !== void 0 ? _a : false,
-            hasToggle: true,
-            previousWidth: undefined
-        };
-    }
-    componentDidMount() {
-        if (this.props.variant === ExpandableSectionVariant.truncate) {
-            const expandableContent = this.expandableContentRef.current;
-            if (expandableContent) {
-                this.setState({ previousWidth: expandableContent.offsetWidth });
-                this.observer = getResizeObserver(expandableContent, this.handleResize, false);
-                if (this.props.truncateMaxLines) {
-                    setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.state.isExpanded);
-                }
-            }
-            this.checkToggleVisibility();
-        }
-    }
-    componentDidUpdate(prevProps) {
-        if (this.props.variant === ExpandableSectionVariant.truncate &&
-            (prevProps.truncateMaxLines !== this.props.truncateMaxLines ||
-                prevProps.children !== this.props.children ||
-                prevProps.isExpanded !== this.props.isExpanded)) {
-            const expandableContent = this.expandableContentRef.current;
-            setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.props.isExpanded);
-            this.checkToggleVisibility();
-        }
-    }
-    componentWillUnmount() {
-        if (this.props.variant === ExpandableSectionVariant.truncate) {
-            this.observer();
-        }
-    }
-    render() {
-        const _a = this.props, { className, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, toggleId, variant, 
-        // Gets rid of console error about it being on a DOM element
-        // eslint-disable-next-line
-        truncateMaxLines } = _a, props = __rest(_a, ["className", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId", "toggleId", "variant", "truncateMaxLines"]);
-        if (isDetached && !toggleId) {
-            /* eslint-disable no-console */
-            console.warn('ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.');
-        }
-        const uniqueContentId = contentId || getUniqueId('expandable-section-content');
-        const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
-        return (_jsx("div", Object.assign({ className: css(styles.expandableSection, isExpanded && styles.modifiers.expanded, displaySize === 'lg' && styles.modifiers.displayLg, isWidthLimited && styles.modifiers.limitWidth, isIndented && styles.modifiers.indented, variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate, className) }, props, { children: _jsx("div", { ref: this.expandableContentRef, className: css(styles.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !isExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region", children: children }) })));
-    }
-}
-ExpandableSectionForSyntaxHighlighter.displayName = 'ExpandableSection';
-ExpandableSectionForSyntaxHighlighter.defaultProps = {
-    className: '',
-    isDetached: false,
-    displaySize: 'default',
-    isWidthLimited: false,
-    isIndented: false,
-    variant: 'default'
-};
-export { ExpandableSectionForSyntaxHighlighter };