@patternfly/react-core 5.0.0-alpha.106 → 5.0.0-alpha.108

package/src/components/Select/examples/SelectViewMore.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { Select, SelectOption, SelectList, MenuToggle, Spinner } from '@patternfly/react-core';
+
+export const SelectViewMore: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+  const [isLoading, setIsLoading] = React.useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [selectOptions, setSelectOptions] = React.useState([
+    <SelectOption key={0} itemId="Option 1">
+      Option 1
+    </SelectOption>,
+    <SelectOption key={1} itemId="Option 2">
+      Option 2
+    </SelectOption>,
+    <SelectOption key={2} itemId="Option 3">
+      Option 3
+    </SelectOption>,
+    <SelectOption key={3} itemId="Option 4">
+      Option 4
+    </SelectOption>,
+    <SelectOption key={4} itemId="Option 5">
+      Option 5
+    </SelectOption>,
+    <SelectOption key={5} itemId="Option 6">
+      Option 6
+    </SelectOption>,
+    <SelectOption key={6} itemId="Option 7">
+      Option 7
+    </SelectOption>,
+    <SelectOption key={7} itemId="Option 8">
+      Option 8
+    </SelectOption>,
+    <SelectOption key={8} itemId="Option 9">
+      Option 9
+    </SelectOption>,
+    <SelectOption key={9} itemId="Final Option 10">
+      Final Option 10
+    </SelectOption>
+  ]);
+  const [numOptions, setNumOptions] = React.useState(3);
+  const [visibleOptions, setVisibleOptions] = React.useState(selectOptions.slice(0, numOptions));
+  const activeItemRef = React.useRef<HTMLElement>(null);
+  const viewMoreRef = React.useRef<HTMLLIElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+
+  React.useEffect(() => {
+    activeItemRef.current?.focus();
+  }, [visibleOptions]);
+
+  const simulateNetworkCall = (networkCallback: () => void) => {
+    setTimeout(networkCallback, 2000);
+  };
+
+  const getNextValidItem = (startingIndex: number, maxLength: number) => {
+    let validItem;
+    for (let i = startingIndex; i < maxLength; i++) {
+      if (selectOptions[i].props.isDisabled) {
+        continue;
+      } else {
+        validItem = selectOptions[i];
+        break;
+      }
+    }
+    return validItem;
+  };
+
+  const loadMoreOptions = () => {
+    const newLength = numOptions + 3 <= selectOptions.length ? numOptions + 3 : selectOptions.length;
+    const prevPosition = numOptions;
+    const nextValidItem = getNextValidItem(prevPosition, newLength);
+
+    setNumOptions(newLength);
+    setIsLoading(false);
+    setActiveItem(nextValidItem.props.itemId);
+    setVisibleOptions(selectOptions.slice(0, newLength));
+  };
+
+  const onViewMoreClick = () => {
+    setIsLoading(true);
+    simulateNetworkCall(() => {
+      loadMoreOptions();
+    });
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', itemId);
+
+    if (itemId !== 'loader') {
+      setSelected(itemId as string);
+      setIsOpen(false);
+      toggleRef?.current?.focus(); // Only focus the toggle when a non-loader option is selected
+    }
+  };
+
+  const toggle = (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="single-view-more-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={{ toggleNode: toggle, toggleRef }}
+    >
+      <SelectList>
+        {visibleOptions.map((option) => {
+          const props = option.props;
+
+          return <SelectOption key={option.key} ref={props.itemId === activeItem ? activeItemRef : null} {...props} />;
+        })}
+        {numOptions !== selectOptions.length && (
+          <SelectOption
+            {...(!isLoading && { isLoadButton: true })}
+            {...(isLoading && { isLoading: true })}
+            onClick={onViewMoreClick}
+            itemId="loader"
+            ref={viewMoreRef}
+          >
+            {isLoading ? <Spinner size="lg" /> : 'View more'}
+          </SelectOption>
+        )}
+      </SelectList>
+    </Select>
+  );
+};

package/src/components/Tabs/Tab.tsx

@@ -37,11 +37,11 @@ export interface TabProps
   innerRef?: React.Ref<any>;
   /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
   tooltip?: React.ReactElement<any>;
-  /** @beta Aria-label for the close button added by passing the onClose property to Tabs. */
+  /** Aria-label for the close button added by passing the onClose property to Tabs. */
   closeButtonAriaLabel?: string;
-  /** @beta Flag indicating the close button should be disabled */
+  /** Flag indicating the close button should be disabled */
   isCloseDisabled?: boolean;
-  /** @beta Actions rendered beside the tab content */
+  /** Actions rendered beside the tab content */
   actions?: React.ReactNode;
   /** Value to set the data-ouia-component-id for the tab button.*/
   ouiaId?: number | string;

package/src/components/Tabs/Tabs.tsx

@@ -105,7 +105,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   toggleAriaLabel?: string;
   /** Callback function to toggle the expandable tabs. */
   onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
-  /** @beta Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
+  /** Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
   isOverflowHorizontal?: boolean | HorizontalOverflowObject;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

package/src/components/Tabs/examples/Tabs.md

@@ -89,7 +89,7 @@ To enable horizontal overflow, use the `isOverflowHorizontal` property.
 
 In the following example, select the 'Show overflowing tab count' checkbox to add a count of overflow items to the final “more” tab.
 
-```ts file="./TabsHorizontalOverflow.tsx" isBeta
+```ts file="./TabsHorizontalOverflow.tsx"
 ```
 
 ### With tooltip react ref
@@ -218,7 +218,7 @@ You may add a help action to a tab to provide users with additional context in a
 
 To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property. 
 
-```ts file="./TabsHelp.tsx" isBeta
+```ts file="./TabsHelp.tsx"
 ```
 
 ### With help and close actions
@@ -227,5 +227,5 @@ To add multiple actions to a tab, create a `<TabAction>` component for each acti
 
 The following example passes in both help popover and close actions.
 
-```ts file="./TabsHelpAndClose.tsx" isBeta
+```ts file="./TabsHelpAndClose.tsx"
 ```

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -3,7 +3,6 @@ id: Text input group
 section: components
 cssPrefix: pf-c-text-input-group
 propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilities']
-beta: true
 ---
 
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

package/src/components/Tile/examples/Tile.md

@@ -3,7 +3,6 @@ id: Tile
 section: components
 cssPrefix: pf-c-tile
 propComponents: ['Tile']
-beta: true
 ---
 
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';

package/src/components/Truncate/examples/Truncate.md

@@ -2,7 +2,6 @@
 id: Truncate
 section: components
 propComponents: [Truncate]
-beta: true
 ---
 
 import './TruncateExamples.css';
@@ -56,4 +55,4 @@ import { Truncate } from '@patternfly/react-core';
     tooltipPosition={'bottom'}
   />
 </div>
-```
+```

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -32,36 +32,43 @@ Custom menus can be constructed using a composable approach by combining the [Me
 ### Composable simple dropdown
 
 ```ts file="./examples/ComposableSimpleDropdown.tsx"
+
 ```
 
 ### Composable actions menu
 
 ```ts file="./examples/ComposableActionsMenu.tsx"
+
 ```
 
 ### Composable simple select
 
 ```ts file="./examples/ComposableSimpleSelect.tsx"
+
 ```
 
 ### Composable simple checkbox select
 
-```ts isBeta file="./examples/ComposableSimpleCheckboxSelect.tsx"
+```ts file="./examples/ComposableSimpleCheckboxSelect.tsx"
+
 ```
 
 ### Composable typeahead select
 
-```ts isBeta file="./examples/ComposableTypeaheadSelect.tsx"
+```ts file="./examples/ComposableTypeaheadSelect.tsx"
+
 ```
 
 ### Composable multiple typeahead select
 
-```ts isBeta file="./examples/ComposableMultipleTypeaheadSelect.tsx"
+```ts file="./examples/ComposableMultipleTypeaheadSelect.tsx"
+
 ```
 
 ### Composable drilldown menu
 
 ```ts isBeta file="./examples/ComposableDrilldownMenu.tsx"
+
 ```
 
 ### Composable tree view menu
@@ -69,6 +76,7 @@ Custom menus can be constructed using a composable approach by combining the [Me
 When rendering a menu-like element that does not contain MenuItem components, [Panel](/components/panel) allows more flexible control and customization.
 
 ```ts file="./examples/ComposableTreeViewMenu.tsx"
+
 ```
 
 ### Composable flyout
@@ -76,29 +84,35 @@ When rendering a menu-like element that does not contain MenuItem components, [P
 The flyout will automatically position to the left or top if it would otherwise go outside the window. The menu must be placed in a container outside the main content like Popper, [Popover](/components/popover) or [Tooltip](/components/tooltip) since it may go over the side nav.
 
 ```ts isBeta file="./examples/ComposableFlyout.tsx"
+
 ```
 
 ### Composable application launcher
 
 ```ts file="./examples/ComposableApplicationLauncher.tsx"
+
 ```
 
 ### Composable context selector
 
 ```ts file="./examples/ComposableContextSelector.tsx"
+
 ```
 
 ### Composable options menu variants
 
 ```ts file="./examples/ComposableOptionsMenuVariants.tsx"
+
 ```
 
 ### Composable dropdown variants
 
 ```ts file="./examples/ComposableDropdwnVariants.tsx"
+
 ```
 
 ### Composable date select
 
 ```ts file="./examples/ComposableDateSelect.tsx"
+
 ```

package/src/demos/DatePicker/DatePicker.md

@@ -2,7 +2,6 @@
 id: Date picker
 section: components
 subsection: date-and-time
-beta: true
 ---
 
 ## Demos

package/src/demos/ProgressStepperDemo.md

@@ -1,7 +1,6 @@
 ---
 id: Progress stepper
 section: components
-beta: true
 ---
 
 ## Demos

package/src/demos/SearchInput/SearchInput.md

@@ -1,7 +1,6 @@
 ---
 id: Search input
 section: components
-beta: true
 ---
 
 import {

package/src/demos/TextInputGroupDemo.md

@@ -1,7 +1,6 @@
 ---
 id: Text input group
 section: components
-beta: true
 ---
 
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

package/src/deprecated/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -16,7 +16,7 @@ export interface DropdownToggleCheckboxProps
   isDisabled?: boolean;
   /** Flag to show if the checkbox is checked */
   isChecked?: boolean | null;
-  /** @beta Flag to show if the checkbox is in progress */
+  /** Flag to show if the checkbox is in progress */
   isInProgress?: boolean | null;
   /** Alternate Flag to show if the checkbox is checked */
   checked?: boolean | null;
@@ -28,9 +28,9 @@ export interface DropdownToggleCheckboxProps
   id: string;
   /** Aria-label of the checkbox */
   'aria-label': string;
-  /** @beta Text describing current loading status or progress */
+  /** Text describing current loading status or progress */
   defaultProgressAriaValueText?: string;
-  /** @beta Aria-label for the default progress icon to describe what is loading */
+  /** Aria-label for the default progress icon to describe what is loading */
   defaultProgressAriaLabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

package/src/deprecated/components/Dropdown/examples/Dropdown.md

@@ -161,7 +161,7 @@ Text labels may optionally be used alongside actions within split buttons.
 
 The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
 
-```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
+```ts file="./DropdownSplitButtonProgressCheckbox.tsx"
 
 ```
 

package/src/helpers/Popper/Popper.tsx

@@ -68,7 +68,7 @@ export interface PopperProps {
   position?: 'right' | 'left' | 'center';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
-  /** Custsom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
   width?: string | 'trigger';
   /** Minimum width of the popper. If the value is "trigger", it will set the min width to the trigger element's width */
   minWidth?: string | 'trigger';

package/src/layouts/Flex/Flex.tsx

@@ -136,6 +136,141 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'spaceItems3xl'
       | 'spaceItems4xl';
   };
+  /** Gap between items at various breakpoints. This will override spacers for the main axis. */
+  gap?: {
+    default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    sm?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+  };
+  /** Gap between rows at various breakpoints. This will override spacers for the main axis. */
+  rowGap?: {
+    default?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+    sm?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+    md?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+    lg?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+    xl?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+    '2xl'?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap2xl'
+      | 'rowGap3xl'
+      | 'rowGap4xl';
+  };
+  /** Gap beween columns at various breakpoints. This will override spacers for the main axis. */
+  columnGap?: {
+    default?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+    sm?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+    md?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+    lg?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+    xl?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+    '2xl'?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap2xl'
+      | 'columnGap3xl'
+      | 'columnGap4xl';
+  };
   /** Whether to add flex: grow at various breakpoints */
   grow?: {
     default?: 'grow';
@@ -344,6 +479,9 @@ export const Flex: React.FunctionComponent<FlexProps> = ({
   component = 'div',
   spacer,
   spaceItems,
+  gap,
+  rowGap,
+  columnGap,
   grow,
   shrink,
   flex,
@@ -380,6 +518,9 @@ export const Flex: React.FunctionComponent<FlexProps> = ({
         formatBreakpointMods(display, styles),
         formatBreakpointMods(fullWidth, styles),
         formatBreakpointMods(flexWrap, styles),
+        formatBreakpointMods(gap, styles),
+        formatBreakpointMods(rowGap, styles),
+        formatBreakpointMods(columnGap, styles),
         className
       )}
       style={

package/src/layouts/Flex/__tests__/Flex.test.tsx

@@ -85,16 +85,40 @@ describe('Flex', () => {
     ],
     display: ['inlineFlex'],
     fullWidth: ['fullWidth'],
-    flexWrap: ['wrap', 'wrapReverse', 'nowrap']
+    flexWrap: ['wrap', 'wrapReverse', 'nowrap'],
+    gap: ['gapNone', 'gapXs', 'gapSm', 'gapMd', 'gapLg', 'gapXl', 'gap2xl', 'gap3xl', 'gap4xl'],
+    rowGap: [
+      'rowGapNone',
+      'rowGapXs',
+      'rowGapSm',
+      'rowGapMd',
+      'rowGapLg',
+      'rowGapXl',
+      'rowGap2xl',
+      'rowGap3xl',
+      'rowGap4xl'
+    ],
+    columnGap: [
+      'columnGapNone',
+      'columnGapXs',
+      'columnGapSm',
+      'columnGapMd',
+      'columnGapLg',
+      'columnGapXl',
+      'columnGap2xl',
+      'columnGap3xl',
+      'columnGap4xl'
+    ]
   };
 
   describe('flex modifiers', () => {
     Object.entries(flexModifiers)
       .map(([mod, values]) =>
-        values.map(value => ({
+        values.map((value) => ({
           [mod]: {
             default: value,
             sm: value,
+            md: value,
             lg: value,
             xl: value,
             '2xl': value
@@ -102,7 +126,7 @@ describe('Flex', () => {
         }))
       )
       .reduce((acc, val) => acc.concat(val), [])
-      .forEach(props =>
+      .forEach((props) =>
         test(`${JSON.stringify(props)} add valid classes to Flex`, () => {
           render(
             <Flex {...props} data-testid="test-id">
@@ -110,11 +134,7 @@ describe('Flex', () => {
             </Flex>
           );
 
-          const className = screen
-            .getByTestId('test-id')
-            .className.replace('pf-l-flex', '')
-            .trim();
-
+          const className = screen.getByTestId('test-id').className.replace('pf-l-flex', '').trim();
           expect(className).not.toBe("''");
           expect(className).not.toBe('');
         })
@@ -134,7 +154,7 @@ describe('Flex', () => {
   describe('flexItem modifiers', () => {
     Object.entries(flexItemModifiers)
       .map(([mod, values]) =>
-        values.map(value => ({
+        values.map((value) => ({
           [mod]: {
             default: value,
             sm: value,
@@ -145,7 +165,7 @@ describe('Flex', () => {
         }))
       )
       .reduce((acc, val) => acc.concat(val), [])
-      .forEach(props =>
+      .forEach((props) =>
         test(`${JSON.stringify(props)} add valid classes to FlexItem`, () => {
           render(
             <FlexItem {...props} data-testid="test-id">