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

package/dist/js/components/Chip/ChipGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../../src/components/Chip/ChipGroup.tsx"],"names":[],"mappings":"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"}

package/dist/js/components/Chip/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

package/dist/js/components/Chip/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Chip/index.ts"],"names":[],"mappings":";;;AAAA,iDAAuB;AACvB,sDAA4B"}

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 };