@patternfly/react-core 6.0.0-alpha.6 → 6.0.0-alpha.61

package/dist/js/helpers/favorites.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-/**
- * This function is a helper for creating an array of renderable favorite items for the Application launcher or Select
- *
- * @param {object} items The items rendered in Select or Application aLauncher
- * @param {boolean} isGrouped Flag indicating if items are grouped
- * @param {any[]} favorites Array of ids of favorited items
- * @param {boolean} isEnterTriggersArrowDown Flag indicating if we should add isEnterTriggersArrowDown to favorited item
- */
-export declare const createRenderableFavorites: (items: object, isGrouped: boolean, favorites: any[], isEnterTriggersArrowDown?: boolean) => React.ReactNode[];
-/**
- * This function is a helper for extending the array of renderable favorite with the select/application launcher items to  render in the Application launcher or Select
- *
- * @param {object} items The items rendered in Select or Application aLauncher
- * @param {boolean} isGrouped Flag indicating if items are grouped
- * @param {any[]} favorites Array of ids of favorited items
- */
-export declare const extendItemsWithFavorite: (items: object, isGrouped: boolean, favorites: any[]) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-//# sourceMappingURL=favorites.d.ts.map

package/dist/js/helpers/favorites.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"favorites.d.ts","sourceRoot":"","sources":["../../../src/helpers/favorites.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,UAC7B,MAAM,aACF,OAAO,aACP,GAAG,EAAE,6BACW,OAAO,sBAiCnC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,UAAW,MAAM,aAAa,OAAO,aAAa,GAAG,EAAE,yEAsB1F,CAAC"}

package/dist/js/helpers/favorites.js

@@ -1,70 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.extendItemsWithFavorite = exports.createRenderableFavorites = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const ApplicationLauncherSeparator_1 = require("../deprecated/components/ApplicationLauncher/ApplicationLauncherSeparator");
-const Divider_1 = require("../components/Divider/Divider");
-/**
- * This function is a helper for creating an array of renderable favorite items for the Application launcher or Select
- *
- * @param {object} items The items rendered in Select or Application aLauncher
- * @param {boolean} isGrouped Flag indicating if items are grouped
- * @param {any[]} favorites Array of ids of favorited items
- * @param {boolean} isEnterTriggersArrowDown Flag indicating if we should add isEnterTriggersArrowDown to favorited item
- */
-const createRenderableFavorites = (items, isGrouped, favorites, isEnterTriggersArrowDown) => {
-    if (isGrouped) {
-        const favoriteItems = [];
-        items.forEach((group) => {
-            if (favorites.length > 0) {
-                return (group.props.children &&
-                    group.props.children
-                        .filter((item) => favorites.includes(item.props.id))
-                        .map((item) => {
-                        if (isEnterTriggersArrowDown) {
-                            return favoriteItems.push(React.cloneElement(item, {
-                                isFavorite: true,
-                                enterTriggersArrowDown: isEnterTriggersArrowDown,
-                                id: `favorite-${item.props.id}`
-                            }));
-                        }
-                        else {
-                            return favoriteItems.push(React.cloneElement(item, { isFavorite: true, id: `favorite-${item.props.id}` }));
-                        }
-                    }));
-            }
-        });
-        return favoriteItems;
-    }
-    return items
-        .filter((item) => favorites.includes(item.props.id))
-        .map((item) => React.cloneElement(item, { isFavorite: true, enterTriggersArrowDown: isEnterTriggersArrowDown }));
-};
-exports.createRenderableFavorites = createRenderableFavorites;
-/**
- * This function is a helper for extending the array of renderable favorite with the select/application launcher items to  render in the Application launcher or Select
- *
- * @param {object} items The items rendered in Select or Application aLauncher
- * @param {boolean} isGrouped Flag indicating if items are grouped
- * @param {any[]} favorites Array of ids of favorited items
- */
-const extendItemsWithFavorite = (items, isGrouped, favorites) => {
-    if (isGrouped) {
-        return items.map((group) => React.cloneElement(group, {
-            children: React.Children.map(group.props.children, (item) => {
-                if (item.type === ApplicationLauncherSeparator_1.ApplicationLauncherSeparator || item.type === Divider_1.Divider) {
-                    return item;
-                }
-                return React.cloneElement(item, {
-                    isFavorite: favorites.some((favoriteId) => favoriteId === item.props.id || `favorite-${favoriteId}` === item.props.id)
-                });
-            })
-        }));
-    }
-    return items.map((item) => React.cloneElement(item, {
-        isFavorite: favorites.some((favoriteId) => favoriteId === item.props.id)
-    }));
-};
-exports.extendItemsWithFavorite = extendItemsWithFavorite;
-//# sourceMappingURL=favorites.js.map

package/dist/js/helpers/favorites.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"favorites.js","sourceRoot":"","sources":["../../../src/helpers/favorites.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,4HAAyH;AACzH,2DAAwD;AAExD;;;;;;;GAOG;AACI,MAAM,yBAAyB,GAAG,CACvC,KAAa,EACb,SAAkB,EAClB,SAAgB,EAChB,wBAAkC,EAClC,EAAE;IACF,IAAI,SAAS,EAAE;QACb,MAAM,aAAa,GAAsB,EAAE,CAAC;QAC3C,KAA8B,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAChD,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;gBACxB,OAAO,CACL,KAAK,CAAC,KAAK,CAAC,QAAQ;oBACnB,KAAK,CAAC,KAAK,CAAC,QAAiC;yBAC3C,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;yBACnD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;wBACZ,IAAI,wBAAwB,EAAE;4BAC5B,OAAO,aAAa,CAAC,IAAI,CACvB,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;gCACvB,UAAU,EAAE,IAAI;gCAChB,sBAAsB,EAAE,wBAAwB;gCAChD,EAAE,EAAE,YAAY,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE;6BAChC,CAAC,CACH,CAAC;yBACH;6BAAM;4BACL,OAAO,aAAa,CAAC,IAAI,CACvB,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,CAChF,CAAC;yBACH;oBACH,CAAC,CAAC,CACL,CAAC;aACH;QACH,CAAC,CAAC,CAAC;QACH,OAAO,aAAa,CAAC;KACtB;IACD,OAAQ,KAA8B;SACnC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;SACnD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,CAAC,CAAC,CAAC;AACrH,CAAC,CAAC;AArCW,QAAA,yBAAyB,6BAqCpC;AAEF;;;;;;GAMG;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAa,EAAE,SAAkB,EAAE,SAAgB,EAAE,EAAE;IAC7F,IAAI,SAAS,EAAE;QACb,OAAQ,KAA8B,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACnD,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,QAAgC,EAAE,CAAC,IAAI,EAAE,EAAE;gBAClF,IAAI,IAAI,CAAC,IAAI,KAAK,2DAA4B,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAO,EAAE;oBACvE,OAAO,IAAI,CAAC;iBACb;gBACD,OAAO,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;oBAC9B,UAAU,EAAE,SAAS,CAAC,IAAI,CACxB,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,YAAY,UAAU,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAC3F;iBACF,CAAC,CAAC;YACL,CAAC,CAAC;SACH,CAAC,CACH,CAAC;KACH;IACD,OAAQ,KAA8B,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAClD,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;QACvB,UAAU,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;KACzE,CAAC,CACH,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,uBAAuB,2BAsBlC"}

package/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx

@@ -1,23 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionContent } from '../../AccordionContent';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionContent should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <AccordionContent
-      children={<>ReactNode</>}
-      className={"''"}
-      id={"''"}
-      isHidden={false}
-      isFixed={false}
-      aria-label={"''"}
-      component={() => <div />}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionItem } from '../../AccordionItem';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionItem should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<AccordionItem children={<>ReactNode</>} />);
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx

@@ -1,21 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionToggle } from '../../AccordionToggle';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionToggle should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <AccordionToggle
-      children={<>ReactNode</>}
-      className={"''"}
-      isExpanded={false}
-      id={'string'}
-      component={() => <div />}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionContent should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div />
-</DocumentFragment>
-`;

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionItem should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  ReactNode
-</DocumentFragment>
-`;

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionToggle should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div />
-</DocumentFragment>
-`;

package/src/components/Avatar/examples/example.css

@@ -1,3 +0,0 @@
-#ws-react-c-avatar-bordered---dark {
-  background: var(--pf-v5-global--BackgroundColor--dark-100);
-}

package/src/components/Card/examples/CardDeprecatedSelectable.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  Dropdown,
-  DropdownList,
-  DropdownItem,
-  MenuToggle,
-  MenuToggleElement,
-  Divider
-} from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-export const CardLegacySelectable: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string>('');
-  const [isKebabOpen, setIsKebabOpen] = React.useState<boolean>(false);
-
-  const onKeyDown = (event: React.KeyboardEvent) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-    if (['Enter', ' '].includes(event.key)) {
-      event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-      setSelected(newSelected);
-    }
-  };
-
-  const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-    setSelected(newSelected);
-  };
-
-  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? '' : labelledById;
-    setSelected(newSelected);
-  };
-
-  const onToggle = (event: React.MouseEvent) => {
-    event?.stopPropagation();
-    setIsKebabOpen(!isKebabOpen);
-  };
-
-  const onSelect = (event: React.MouseEvent | undefined) => {
-    event?.stopPropagation();
-    setIsKebabOpen(!isKebabOpen);
-  };
-
-  const dropdownItems = (
-    <>
-      <DropdownItem key="action">Action</DropdownItem>
-      {/* Prevent default onClick functionality for example purposes */}
-      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
-        Link
-      </DropdownItem>
-      <DropdownItem key="disabled action" isDisabled>
-        Disabled Action
-      </DropdownItem>
-      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
-        Disabled Link
-      </DropdownItem>
-      <Divider component="li" key="separator" />
-      <DropdownItem key="separated action">Separated Action</DropdownItem>
-      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
-        Separated Link
-      </DropdownItem>
-    </>
-  );
-
-  const headerActions = (
-    <>
-      <Dropdown
-        onSelect={onSelect}
-        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-          <MenuToggle
-            ref={toggleRef}
-            isExpanded={isKebabOpen}
-            onClick={onToggle}
-            variant="plain"
-            aria-label="Card legacy selectable example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
-        )}
-        isOpen={isKebabOpen}
-        onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
-      >
-        <DropdownList>{dropdownItems}</DropdownList>
-      </Dropdown>
-    </>
-  );
-
-  return (
-    <>
-      <Card
-        id="legacy-first-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        onSelectableInputChange={onChange}
-        isSelectable
-        isSelected={selected === 'legacy-first-card'}
-        hasSelectableInput
-        tabIndex={0}
-      >
-        <CardHeader actions={{ actions: headerActions }} />
-        <CardTitle>First legacy selectable card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
-      </Card>
-      <br />
-      <Card
-        id="legacy-second-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        onSelectableInputChange={onChange}
-        isSelectable
-        isSelected={selected === 'legacy-second-card'}
-        hasSelectableInput
-        tabIndex={0}
-      >
-        <CardTitle>Second legacy selectable card</CardTitle>
-        <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
-      </Card>
-    </>
-  );
-};

package/src/components/Card/examples/CardDeprecatedSelectableA11yHighlight.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Card, CardTitle, CardBody } from '@patternfly/react-core';
-
-export const CardLegacySelectableA11yHighlight: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string>('');
-
-  const onKeyDown = (event: React.KeyboardEvent) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-    if ([' ', 'Enter'].includes(event.key)) {
-      event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-      setSelected(newSelected);
-    }
-  };
-
-  const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-    setSelected(newSelected);
-  };
-
-  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? '' : labelledById;
-    setSelected(newSelected);
-  };
-
-  return (
-    <React.Fragment>
-      <Card
-        id="a11y-selectable-first-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        hasSelectableInput
-        onSelectableInputChange={onChange}
-        isSelectableRaised
-        isSelected={selected === 'a11y-selectable-first-card'}
-      >
-        <CardTitle>Selectable card with proper accessibility considerations</CardTitle>
-        <CardBody>
-          When using a screen reader a checkbox will become navigable that indicates this card is selectable and
-          communicate if it is currently selected.
-        </CardBody>
-      </Card>
-      <br />
-      <Card
-        id="a11y-selectable-second-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        isSelectableRaised
-        isSelected={selected === 'a11y-selectable-second-card'}
-      >
-        <CardTitle>Selectable card without proper accessibility considerations</CardTitle>
-        <CardBody>
-          When using a screen reader there are no indications that this card is selectable or if it is currently
-          selected.
-        </CardBody>
-      </Card>
-    </React.Fragment>
-  );
-};

package/src/components/Chip/Chip.tsx

@@ -1,214 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import { Button } from '../Button';
-import { Tooltip, TooltipPosition } from '../Tooltip';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import styles from '@patternfly/react-styles/css/components/Chip/chip';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
-import cssChipTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_chip__text_MaxWidth';
-
-export interface ChipProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** Badge to add to the chip. The badge will be rendered after the chip text. */
-  badge?: React.ReactNode;
-  /** Content rendered inside the chip text */
-  children?: React.ReactNode;
-  /** Aria Label for close button */
-  closeBtnAriaLabel?: string;
-  /** Additional classes added to the chip item */
-  className?: string;
-  /** Flag indicating if the chip is an overflow chip */
-  isOverflowChip?: boolean;
-  /** Flag indicating if chip is read only */
-  isReadOnly?: boolean;
-  /** Function that is called when clicking on the chip close button */
-  onClick?: (event: React.MouseEvent) => void;
-  /** Component that will be used for chip. It is recommended that <button> or <li>  are used when the chip is an overflow chip. */
-  component?: React.ReactNode;
-  /** Position of the tooltip which is displayed if text is longer */
-  tooltipPosition?:
-    | TooltipPosition
-    | 'auto'
-    | 'top'
-    | 'bottom'
-    | 'left'
-    | 'right'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left-start'
-    | 'left-end'
-    | 'right-start'
-    | 'right-end';
-
-  /** Css property expressed in percentage or any css unit that overrides the default value of the max-width of the chip's text */
-  textMaxWidth?: string;
-  /** Value to overwrite the randomly generated data-ouia-component-id.*/
-  ouiaId?: number | string;
-}
-
-interface ChipState {
-  isTooltipVisible: boolean;
-  ouiaStateId: string;
-}
-
-class Chip extends React.Component<ChipProps, ChipState> {
-  static displayName = 'Chip';
-  constructor(props: ChipProps) {
-    super(props);
-    this.state = {
-      isTooltipVisible: false,
-      ouiaStateId: getDefaultOUIAId(Chip.displayName)
-    };
-  }
-  span = React.createRef<HTMLSpanElement>();
-
-  static defaultProps: ChipProps = {
-    closeBtnAriaLabel: 'close',
-    className: '',
-    isOverflowChip: false,
-    isReadOnly: false,
-    tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onClick: (_e: React.MouseEvent) => undefined as any,
-    component: 'div' as React.ReactNode
-  };
-
-  componentDidMount() {
-    this.setState({
-      isTooltipVisible: Boolean(this.span.current && this.span.current.offsetWidth < this.span.current.scrollWidth)
-    });
-  }
-
-  componentDidUpdate(_prevProps: ChipProps, prevState: ChipState) {
-    const nextIsTooltipVisible = Boolean(
-      this.span.current && this.span.current.offsetWidth < this.span.current.scrollWidth
-    );
-    if (prevState.isTooltipVisible !== nextIsTooltipVisible) {
-      this.setState({
-        isTooltipVisible: nextIsTooltipVisible
-      });
-    }
-  }
-
-  setChipStyle = () => ({
-    [cssChipTextMaxWidth.name]: this.props.textMaxWidth
-  });
-
-  renderOverflowChip = () => {
-    const {
-      badge,
-      children,
-      className,
-      onClick,
-      ouiaId,
-      textMaxWidth,
-      style,
-      component,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      tooltipPosition,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      isOverflowChip,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      closeBtnAriaLabel,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      isReadOnly,
-      ...props
-    } = this.props;
-    const Component = component as any;
-    return (
-      <Component
-        onClick={onClick}
-        {...(textMaxWidth && {
-          style: this.setChipStyle(),
-          ...style
-        })}
-        className={css(styles.chip, styles.modifiers.overflow, className)}
-        {...(component === 'button' ? { type: 'button' } : {})}
-        {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...props}
-      >
-        <span className={css(styles.chipContent)}>
-          <span className={css(styles.chipText)}>{children}</span>
-          {badge && badge}
-        </span>
-      </Component>
-    );
-  };
-
-  renderInnerChip(id: string) {
-    const {
-      badge,
-      children,
-      className,
-      onClick,
-      closeBtnAriaLabel,
-      isReadOnly,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      isOverflowChip,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      tooltipPosition,
-      component,
-      ouiaId,
-      textMaxWidth,
-      ...props
-    } = this.props;
-    const Component = component as any;
-    return (
-      <Component
-        {...(textMaxWidth && {
-          style: this.setChipStyle()
-        })}
-        className={css(styles.chip, className)}
-        {...(this.state.isTooltipVisible && { tabIndex: 0 })}
-        {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...props}
-      >
-        <span className={css(styles.chipContent)}>
-          <span ref={this.span} className={css(styles.chipText)} id={id}>
-            {children}
-          </span>
-          {badge && badge}
-        </span>
-        {!isReadOnly && (
-          <span className={css(styles.chipActions)}>
-            <Button
-              onClick={onClick}
-              variant="plain"
-              aria-label={closeBtnAriaLabel}
-              id={`remove_${id}`}
-              aria-labelledby={`remove_${id} ${id}`}
-              ouiaId={ouiaId || closeBtnAriaLabel}
-            >
-              <TimesIcon aria-hidden="true" />
-            </Button>
-          </span>
-        )}
-      </Component>
-    );
-  }
-
-  renderChip = (randomId: string) => {
-    const { children, tooltipPosition } = this.props;
-    if (this.state.isTooltipVisible) {
-      return (
-        <Tooltip position={tooltipPosition} content={children}>
-          {this.renderInnerChip(randomId)}
-        </Tooltip>
-      );
-    }
-    return this.renderInnerChip(randomId);
-  };
-
-  render() {
-    const { isOverflowChip } = this.props;
-    return (
-      <GenerateId>
-        {(randomId) => (isOverflowChip ? this.renderOverflowChip() : this.renderChip(this.props.id || randomId))}
-      </GenerateId>
-    );
-  }
-}
-
-export { Chip };