@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.20

package/src/components/Button/examples/ButtonVariations.tsx

@@ -1,54 +1,69 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Flex } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Button variant="primary" ouiaId="Primary">
-      Primary
-    </Button>{' '}
-    <Button variant="secondary" ouiaId="Secondary">
-      Secondary
-    </Button>{' '}
-    <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
-      Danger Secondary
-    </Button>{' '}
-    <Button variant="tertiary" ouiaId="Tertiary">
-      Tertiary
-    </Button>{' '}
-    <Button variant="danger" ouiaId="Danger">
-      Danger
-    </Button>{' '}
-    <Button variant="warning" ouiaId="Warning">
-      Warning
-    </Button>
+  <>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="primary" ouiaId="Primary">
+        Primary
+      </Button>
+      <Button variant="secondary" ouiaId="Secondary">
+        Secondary
+      </Button>
+      <Button variant="secondary" ouiaId="DangerSecondary" isDanger>
+        Danger Secondary
+      </Button>
+      <Button variant="tertiary" ouiaId="Tertiary">
+        Tertiary
+      </Button>
+      <Button variant="danger" ouiaId="Danger">
+        Danger
+      </Button>
+      <Button variant="warning" ouiaId="Warning">
+        Warning
+      </Button>
+    </Flex>
     <br />
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="link" icon={<PlusCircleIcon />}>
+        Link
+      </Button>
+      <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
+        Link
+      </Button>
+      <Button variant="link" isInline>
+        Inline link
+      </Button>
+      <Button variant="link" isDanger>
+        Danger link
+      </Button>
+      <Button variant="plain" aria-label="Action">
+        <TimesIcon />
+      </Button>
+    </Flex>
     <br />
-    <Button variant="link" icon={<PlusCircleIcon />}>
-      Link
-    </Button>{' '}
-    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
-      Link
-    </Button>{' '}
-    <Button variant="link" isInline>
-      Inline link
-    </Button>{' '}
-    <Button variant="link" isDanger>
-      Danger link
-    </Button>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="control">Control</Button>
+      <Button variant="control" aria-label="Copy">
+        <CopyIcon />
+      </Button>
+    </Flex>
     <br />
-    <br />
-    <Button variant="plain" aria-label="Action">
-      <TimesIcon />
-    </Button>
-    <br />
-    <br />
-    <Button variant="control">Control</Button>{' '}
-    <Button variant="control" aria-label="Copy">
-      <CopyIcon />
-    </Button>
-  </React.Fragment>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button variant="stateful" icon={<BellIcon />} state="read">
+        Stateful read
+      </Button>
+      <Button variant="stateful" icon={<BellIcon />} state="unread">
+        Stateful unread
+      </Button>
+      <Button variant="stateful" icon={<BellIcon />} state="attention">
+        Stateful attention
+      </Button>
+    </Flex>
+  </>
 );

package/src/components/Button/examples/ButtonWithCount.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BadgeCountObject, Button } from '@patternfly/react-core';
+import { BadgeCountObject, Button, Flex } from '@patternfly/react-core';
 
 export const ButtonWithCount: React.FunctionComponent = () => {
   const badgeCountObjectNotRead: BadgeCountObject = {
@@ -15,75 +15,82 @@ export const ButtonWithCount: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
-      <p>Unread:</p>
-      <Button variant="primary" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
+    <>
+      <div>Unread:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="control" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="link" countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+      </Flex>
       <br />
-      <p>Unread disabled:</p>
-      <Button variant="primary" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" isDisabled countOptions={badgeCountObjectNotRead}>
-        View issues
-      </Button>{' '}
+      <div>Unread disabled:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="control" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+        <Button variant="link" isDisabled countOptions={badgeCountObjectNotRead}>
+          Issues
+        </Button>
+      </Flex>
       <br />
-      <p>Read:</p>
-      <Button variant="primary" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
+      <div>Read:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="control" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="link" countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+      </Flex>
       <br />
-      <p>Read disabled:</p>
-      <Button variant="primary" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="secondary" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="tertiary" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="control" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <Button variant="link" isDisabled countOptions={badgeCountObjectRead}>
-        View issues
-      </Button>{' '}
-      <br />
-    </React.Fragment>
+      <div>Read disabled:</div>
+      <Flex columnGap={{ default: 'columnGapSm' }}>
+        <Button variant="primary" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="secondary" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="tertiary" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="control" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+        <Button variant="link" isDisabled countOptions={badgeCountObjectRead}>
+          Issues
+        </Button>
+      </Flex>
+    </>
   );
 };

package/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx

@@ -57,7 +57,9 @@ test('Next year dates have correct year in aria label', () => {
 });
 
 test('InlineProps render correct wrapper component and attributes', () => {
-  render(<CalendarMonth inlineProps={{component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: "hi"}} />);
+  render(
+    <CalendarMonth inlineProps={{ component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: 'hi' }} />
+  );
 
   const article = screen.getByRole('article');
   expect(article).toHaveAttribute('aria-labelledby', 'hi');

package/src/components/Card/Card.tsx

@@ -87,9 +87,11 @@ export const Card: React.FunctionComponent<CardProps> = ({
   isSelectableRaised = false,
   isSelected = false,
   isDisabledRaised = false,
-  isFlat = false,
+  // TODO: Update with issue #9991
+  // isFlat = false,
   isExpanded = false,
-  isRounded = false,
+  // TODO: Update with issue #9991
+  // isRounded = false,
   isLarge = false,
   isFullHeight = false,
   isPlain = false,
@@ -112,12 +114,13 @@ export const Card: React.FunctionComponent<CardProps> = ({
   }
 
   const getSelectableModifiers = () => {
-    if (isDisabledRaised) {
-      return css(styles.modifiers.nonSelectableRaised);
-    }
-    if (isSelectableRaised) {
-      return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
-    }
+    // TODO: Update with issue #9991
+    // if (isDisabledRaised) {
+    //   return css(styles.modifiers.nonSelectableRaised);
+    // }
+    // if (isSelectableRaised) {
+    //   return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
+    // }
     if (isSelectable && isClickable) {
       return css(styles.modifiers.selectable, styles.modifiers.clickable, isSelected && styles.modifiers.current);
     }
@@ -185,8 +188,9 @@ export const Card: React.FunctionComponent<CardProps> = ({
           styles.card,
           isCompact && styles.modifiers.compact,
           isExpanded && styles.modifiers.expanded,
-          isFlat && styles.modifiers.flat,
-          isRounded && styles.modifiers.rounded,
+          // TODO: Update with issue #9991
+          // isFlat && styles.modifiers.flat,
+          // isRounded && styles.modifiers.rounded,
           isLarge && styles.modifiers.displayLg,
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,

package/src/components/Card/__tests__/Card.test.tsx

@@ -69,12 +69,14 @@ describe('Card', () => {
     expect(card.getAttribute('tabindex')).toBeNull();
   });
 
-  test('card with isDisabledRaised applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isDisabledRaised applied', () => {
     render(<Card isDisabledRaised>disabled raised card</Card>);
     expect(screen.getByText('disabled raised card')).toHaveClass('pf-m-non-selectable-raised');
   });
 
-  test('card with isSelectableRaised applied - not change', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isSelectableRaised applied - not change', () => {
     render(<Card isSelectableRaised>raised selectable card</Card>);
 
     const card = screen.getByText('raised selectable card');
@@ -82,7 +84,8 @@ describe('Card', () => {
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
-  test('card with isSelectableRaised and isSelected applied ', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isSelectableRaised and isSelected applied ', () => {
     render(
       <Card isSelected isSelectableRaised>
         raised selected card
@@ -95,7 +98,8 @@ describe('Card', () => {
     expect(card).toHaveAttribute('tabindex', '0');
   });
 
-  test('card with isFlat applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isFlat applied', () => {
     render(<Card isFlat>flat card</Card>);
     expect(screen.getByText('flat card')).toHaveClass('pf-m-flat');
   });
@@ -105,7 +109,8 @@ describe('Card', () => {
     expect(screen.getByText('expanded card')).toHaveClass('pf-m-expanded');
   });
 
-  test('card with isRounded applied', () => {
+  // TODO: Update with issue #9991
+  xtest('card with isRounded applied', () => {
     render(<Card isRounded>rounded card</Card>);
     expect(screen.getByText('rounded card')).toHaveClass('pf-m-rounded');
   });

package/src/components/Card/__tests__/CardBody.test.tsx

@@ -30,7 +30,7 @@ describe('CardBody', () => {
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
 
-    render(<CardBody component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardBody component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 

package/src/components/Card/__tests__/CardFooter.test.tsx

@@ -27,7 +27,7 @@ describe('CardFooter', () => {
 
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
-    render(<CardFooter component={(Component as unknown) as keyof JSX.IntrinsicElements} />);
+    render(<CardFooter component={Component as unknown as keyof JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 });

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

@@ -2,7 +2,8 @@ import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 
 export const CardWithModifiers: React.FunctionComponent = () => {
-  const mods = ['isCompact', 'isFlat', 'isRounded', 'isLarge', 'isFullHeight', 'isPlain'];
+  // TODO: Update with issue #9991 removed isFlat and isRounded
+  const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain'];
   const [modifiers, setModifiers] = React.useState({});
 
   return (

package/src/components/Checkbox/Checkbox.tsx

@@ -8,10 +8,16 @@ import { ASTERISK } from '../../helpers/htmlConstants';
 export interface CheckboxProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>,
     OUIAProps {
-  /** Additional classes added to the checkbox. */
+  /** Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if
+   * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
+   */
   className?: string;
-  /** Additional classed added to the radio input */
+  /** Additional classes added to the checkbox input. */
   inputClassName?: string;
+  /** Flag to indicate whether the checkbox wrapper element is a <label> element for the checkbox input. Will not apply if a component prop (with a value other than a "label") is specified. */
+  isLabelWrapped?: boolean;
+  /** Flag to show if the checkbox label is shown before the checkbox input. */
+  isLabelBeforeButton?: boolean;
   /** Flag to show if the checkbox selection is valid or invalid. */
   isValid?: boolean;
   /** Flag to show if the checkbox is disabled. */
@@ -33,7 +39,7 @@ export interface CheckboxProps
   description?: React.ReactNode;
   /** Body text of the checkbox */
   body?: React.ReactNode;
-  /** Sets the input wrapper component to render. Defaults to <div> */
+  /** Sets the checkbox wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. */
   component?: React.ElementType;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
@@ -52,13 +58,13 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
   static displayName = 'Checkbox';
   static defaultProps: PickOptional<CheckboxProps> = {
     className: '',
+    isLabelWrapped: false,
     isValid: true,
     isDisabled: false,
     isRequired: false,
     isChecked: false,
     onChange: defaultOnChange,
-    ouiaSafe: true,
-    component: 'div'
+    ouiaSafe: true
   };
 
   constructor(props: any) {
@@ -78,6 +84,8 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       className,
       inputClassName,
       onChange,
+      isLabelWrapped,
+      isLabelBeforeButton,
       isValid,
       isDisabled,
       isRequired,
@@ -89,7 +97,7 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       body,
       ouiaId,
       ouiaSafe,
-      component: Component,
+      component,
       ...props
     } = this.props;
     if (!props.id) {
@@ -107,31 +115,57 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       checkedProps.defaultChecked = defaultChecked;
     }
 
+    const inputRendered = (
+      <input
+        {...props}
+        className={css(styles.checkInput, inputClassName)}
+        type="checkbox"
+        onChange={this.handleChange}
+        aria-invalid={!isValid}
+        aria-label={ariaLabel}
+        disabled={isDisabled}
+        required={isRequired}
+        ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+        {...checkedProps}
+        {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
+      />
+    );
+
+    const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
+
+    const Label = wrapWithLabel ? 'span' : 'label';
+    const labelRendered = label ? (
+      <Label
+        className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)}
+        htmlFor={!wrapWithLabel && props.id}
+      >
+        {label}
+        {isRequired && (
+          <span className={css(styles.checkLabelRequired)} aria-hidden="true">
+            {ASTERISK}
+          </span>
+        )}
+      </Label>
+    ) : null;
+
+    const Component = component ?? (wrapWithLabel ? 'label' : 'div');
+
     checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
     return (
-      <Component className={css(styles.check, !label && styles.modifiers.standalone, className)}>
-        <input
-          {...props}
-          className={css(styles.checkInput, inputClassName)}
-          type="checkbox"
-          onChange={this.handleChange}
-          aria-invalid={!isValid}
-          aria-label={ariaLabel}
-          disabled={isDisabled}
-          required={isRequired}
-          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
-          {...checkedProps}
-          {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-        />
-        {label && (
-          <label className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)} htmlFor={props.id}>
-            {label}
-            {isRequired && (
-              <span className={css(styles.checkLabelRequired)} aria-hidden="true">
-                {ASTERISK}
-              </span>
-            )}
-          </label>
+      <Component
+        className={css(styles.check, !label && styles.modifiers.standalone, className)}
+        htmlFor={wrapWithLabel && props.id}
+      >
+        {isLabelBeforeButton ? (
+          <>
+            {labelRendered}
+            {inputRendered}
+          </>
+        ) : (
+          <>
+            {inputRendered}
+            {labelRendered}
+          </>
         )}
         {description && <span className={css(styles.checkDescription)}>{description}</span>}
         {body && <span className={css(styles.checkBody)}>{body}</span>}

package/src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -231,6 +231,47 @@ test('Renders with the provided component', () => {
   expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('SPAN');
 });
 
+test('Renders with the label wrapper if isLabelWrapped is provided', () => {
+  render(<Checkbox id="test-id" isLabelWrapped />);
+
+  expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('LABEL');
+});
+
+test('Renders with span element around the inner label text if isLabelWrapped is provided', () => {
+  const labelText = 'test checkbox label';
+  render(<Checkbox id="test-id" isLabelWrapped label={labelText} />);
+
+  expect(screen.getByText(labelText).tagName).toBe('SPAN');
+});
+
+test('Renders with the provided component although isLabelWrapped is provided', () => {
+  render(<Checkbox id="test-id" isLabelWrapped component="h3" />);
+
+  expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('H3');
+});
+
+test('Renders with the label wrapper if component is set to label', () => {
+  render(<Checkbox id="test-id" component="label" />);
+
+  expect(screen.getByRole('checkbox').parentElement?.tagName).toBe('LABEL');
+});
+
+test('Renders with span element around the inner label text if component is set to label', () => {
+  const labelText = 'test checkbox label';
+  render(<Checkbox id="test-id" component="label" label={labelText} />);
+
+  expect(screen.getByText(labelText).tagName).toBe('SPAN');
+});
+
+test('Renders label before checkbox input if isLabelBeforeButton is provided', () => {
+  render(<Checkbox id="test-id" isLabelBeforeButton label={'test checkbox label'} />);
+
+  const wrapper = screen.getByRole('checkbox').parentElement!;
+
+  expect(wrapper.children[0].tagName).toBe('LABEL');
+  expect(wrapper.children[1].tagName).toBe('INPUT');
+});
+
 test(`Spreads additional props`, () => {
   render(<Checkbox id="test-id" data-testid="test-id" />);
 

package/src/components/Chip/Chip.tsx

@@ -81,6 +81,17 @@ class Chip extends React.Component<ChipProps, ChipState> {
     });
   }
 
+  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
   });
@@ -138,6 +149,8 @@ class Chip extends React.Component<ChipProps, ChipState> {
       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,