@patternfly/react-core 6.0.0-alpha.33 → 6.0.0-alpha.34

package/src/components/Chip/Chip.tsx

@@ -1,216 +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,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      id: idProp,
-      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 };

package/src/components/Chip/ChipGroup.tsx

@@ -1,214 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Chip/chip-group';
-import { css } from '@patternfly/react-styles';
-import { Button } from '../Button';
-import { Chip } from './Chip';
-import { Tooltip, TooltipPosition } from '../Tooltip';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-import { fillTemplate } from '../../helpers';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
-import { getOUIAProps, OUIAProps } from '../../helpers';
-
-export interface ChipGroupProps extends React.HTMLProps<HTMLUListElement>, OUIAProps {
-  /** Content rendered inside the chip group. Should be <Chip> elements. */
-  children?: React.ReactNode;
-  /** Additional classes added to the chip item */
-  className?: string;
-  /** Flag for having the chip group default to expanded */
-  defaultIsOpen?: boolean;
-  /** Customizable "Show Less" text string */
-  expandedText?: string;
-  /** Customizeable template string. Use variable "${remaining}" for the overflow chip count. */
-  collapsedText?: string;
-  /** Category name text for the chip group category.  If this prop is supplied the chip group with have a label and category styling applied */
-  categoryName?: string;
-  /** Aria label for chip group that does not have a category name */
-  'aria-label'?: string;
-  /** Set number of chips to show before overflow */
-  numChips?: number;
-  /** Flag if chip group can be closed*/
-  isClosable?: boolean;
-  /** Aria label for close button */
-  closeBtnAriaLabel?: string;
-  /** Function that is called when clicking on the chip group close button */
-  onClick?: (event: React.MouseEvent) => void;
-  /** Function that is called when clicking on the overflow (expand/collapse) chip button */
-  onOverflowChipClick?: (event: React.MouseEvent) => void;
-  /** Position of the tooltip which is displayed if the category name 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';
-  /** Value to overwrite the randomly generated data-ouia-component-id.*/
-  ouiaId?: number | string;
-}
-
-interface ChipGroupState {
-  isOpen: boolean;
-  isTooltipVisible: boolean;
-}
-
-class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState> {
-  static displayName = 'ChipGroup';
-  constructor(props: ChipGroupProps) {
-    super(props);
-    this.state = {
-      isOpen: this.props.defaultIsOpen,
-      isTooltipVisible: false
-    };
-  }
-  private headingRef = React.createRef<HTMLSpanElement>();
-
-  static defaultProps: ChipGroupProps = {
-    expandedText: 'Show Less',
-    collapsedText: '${remaining} more',
-    categoryName: '',
-    defaultIsOpen: false,
-    numChips: 3,
-    isClosable: false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onClick: (_e: React.MouseEvent) => undefined as any,
-    onOverflowChipClick: (_e: React.MouseEvent) => undefined as any,
-    closeBtnAriaLabel: 'Close chip group',
-    tooltipPosition: 'top',
-    'aria-label': 'Chip group category'
-  };
-
-  componentDidMount() {
-    this.setState({
-      isTooltipVisible: Boolean(
-        this.headingRef.current && this.headingRef.current.offsetWidth < this.headingRef.current.scrollWidth
-      )
-    });
-  }
-
-  toggleCollapse = () => {
-    this.setState((prevState) => ({
-      isOpen: !prevState.isOpen,
-      isTooltipVisible: Boolean(
-        this.headingRef.current && this.headingRef.current.offsetWidth < this.headingRef.current.scrollWidth
-      )
-    }));
-  };
-
-  renderLabel(id: string) {
-    const { categoryName, tooltipPosition } = this.props;
-    const { isTooltipVisible } = this.state;
-    return isTooltipVisible ? (
-      <Tooltip position={tooltipPosition} content={categoryName}>
-        <span tabIndex={0} ref={this.headingRef} className={css(styles.chipGroupLabel)}>
-          <span id={id}>{categoryName}</span>
-        </span>
-      </Tooltip>
-    ) : (
-      <span ref={this.headingRef} className={css(styles.chipGroupLabel)} id={id}>
-        {categoryName}
-      </span>
-    );
-  }
-
-  render() {
-    const {
-      categoryName,
-      children,
-      className,
-      isClosable,
-      closeBtnAriaLabel,
-      'aria-label': ariaLabel,
-      onClick,
-      onOverflowChipClick,
-      numChips,
-      expandedText,
-      collapsedText,
-      ouiaId,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      defaultIsOpen,
-      tooltipPosition,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...rest
-    } = this.props;
-    const { isOpen } = this.state;
-    const numChildren = React.Children.count(children);
-    const collapsedTextResult = fillTemplate(collapsedText as string, {
-      remaining: React.Children.count(children) - numChips
-    });
-
-    const renderChipGroup = (id: string) => {
-      const chipArray = !isOpen
-        ? React.Children.toArray(children).slice(0, numChips)
-        : React.Children.toArray(children);
-
-      return (
-        <div
-          className={css(styles.chipGroup, className, categoryName && styles.modifiers.category)}
-          role="group"
-          {...(categoryName && { 'aria-labelledby': id })}
-          {...(!categoryName && { 'aria-label': ariaLabel })}
-          {...getOUIAProps(ChipGroup.displayName, ouiaId)}
-        >
-          <div className={css(styles.chipGroupMain)}>
-            {categoryName && this.renderLabel(id)}
-            <ul
-              className={css(styles.chipGroupList)}
-              {...(categoryName && { 'aria-labelledby': id })}
-              {...(!categoryName && { 'aria-label': ariaLabel })}
-              role="list"
-              {...rest}
-            >
-              {chipArray.map((child, i) => (
-                <li className={css(styles.chipGroupListItem)} key={i}>
-                  {child}
-                </li>
-              ))}
-              {numChildren > numChips && (
-                <li className={css(styles.chipGroupListItem)}>
-                  <Chip
-                    isOverflowChip
-                    onClick={(event) => {
-                      this.toggleCollapse();
-                      onOverflowChipClick(event);
-                    }}
-                    component="button"
-                  >
-                    {isOpen ? expandedText : collapsedTextResult}
-                  </Chip>
-                </li>
-              )}
-            </ul>
-          </div>
-          {isClosable && (
-            <div className={css(styles.chipGroupClose)}>
-              <Button
-                variant="plain"
-                aria-label={closeBtnAriaLabel}
-                onClick={onClick}
-                id={`remove_group_${id}`}
-                aria-labelledby={`remove_group_${id} ${id}`}
-                ouiaId={ouiaId || closeBtnAriaLabel}
-              >
-                <TimesCircleIcon aria-hidden="true" />
-              </Button>
-            </div>
-          )}
-        </div>
-      );
-    };
-
-    return numChildren === 0 ? null : (
-      <GenerateId>{(randomId) => renderChipGroup(this.props.id || randomId)}</GenerateId>
-    );
-  }
-}
-
-export { ChipGroup };