@patternfly/react-core 4.202.24 → 4.202.27

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -0,0 +1,261 @@
+import React from 'react';
+import {
+  Button,
+  DataList,
+  DataListItem,
+  DataListItemRow,
+  DataListCell,
+  DataListAction,
+  DataListToggle,
+  DataListContent,
+  DataListItemCells,
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+
+export const DataListExpandable: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+  const [isOpen3, setIsOpen3] = React.useState(false);
+  const [allExpanded, setAllExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
+
+  const onToggleAll = () => {
+    setAllExpanded(!allExpanded);
+  };
+
+  React.useEffect(() => {
+    if (allExpanded) {
+      setExpanded(['ex-toggle1', 'ex-toggle2', 'ex-toggle3']);
+    } else {
+      setExpanded([]);
+    }
+  }, [allExpanded]);
+
+  const onToggle1 = isOpen1 => {
+    setIsOpen1(isOpen1);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = isOpen2 => {
+    setIsOpen2(isOpen2);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+  const onToggle3 = isOpen3 => {
+    setIsOpen3(isOpen3);
+  };
+
+  const onSelect3 = () => {
+    setIsOpen3(!isOpen3);
+  };
+
+  const toggle = id => {
+    const index = expanded.indexOf(id);
+    const newExpanded =
+      index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
+    setExpanded(newExpanded);
+  };
+  return (
+    <React.Fragment>
+      <Button onClick={onToggleAll}>
+        {allExpanded && <AngleDownIcon />}
+        {!allExpanded && <AngleRightIcon />}
+        Expand/Collapse All
+      </Button>
+      <br />
+      <br />
+      <DataList aria-label="Expandable data list example">
+        <DataListItem aria-labelledby="ex-item1" isExpanded={expanded.includes('ex-toggle1')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('ex-toggle1')}
+              isExpanded={expanded.includes('ex-toggle1')}
+              id="ex-toggle1"
+              aria-controls="ex-expand1"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="primary content">
+                  <div id="ex-item1">Primary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                  <a href="#">link</a>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="ex-item1 ex-action1"
+              id="ex-action1"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen1}
+                onSelect={onSelect1}
+                toggle={<KebabToggle onToggle={onToggle1} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="Primary Content Details"
+            id="ex-expand1"
+            isHidden={!expanded.includes('ex-toggle1')}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+        <DataListItem aria-labelledby="ex-item2" isExpanded={expanded.includes('ex-toggle2')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('ex-toggle2')}
+              isExpanded={expanded.includes('ex-toggle2')}
+              id="ex-toggle2"
+              aria-controls="ex-expand2"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <div id="ex-item2">Secondary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content3">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="ex-item2 ex-action2"
+              id="ex-action2"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen2}
+                onSelect={onSelect2}
+                toggle={<KebabToggle onToggle={onToggle2} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="Primary Content Details"
+            id="ex-expand2"
+            isHidden={!expanded.includes('ex-toggle2')}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+        <DataListItem aria-labelledby="ex-item3" isExpanded={expanded.includes('ex-toggle3')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('ex-toggle3')}
+              isExpanded={expanded.includes('ex-toggle3')}
+              id="ex-toggle3"
+              aria-controls="ex-expand3"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="tertiary content">
+                  <div id="ex-item3">Tertiary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span>Lorem ipsum dolor sit amet.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="ex-item3 ex-action3"
+              id="ex-action3"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen3}
+                onSelect={onSelect3}
+                toggle={<KebabToggle onToggle={onToggle3} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="Primary Content Details"
+            id="ex-expand3"
+            isHidden={!expanded.includes('ex-toggle3')}
+            hasNoPadding
+          >
+            This expanded section has no padding.
+          </DataListContent>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+};

package/src/components/DataList/examples/DataListSelectableRows.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  KebabToggle,
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListItemRow,
+  DataListItemCells,
+  DataListAction
+} from '@patternfly/react-core';
+
+export const DataListSelectableRows: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+
+  const onToggle1 = isOpen1 => {
+    setIsOpen1(isOpen1);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = isOpen2 => {
+    setIsOpen2(isOpen2);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+
+  const onSelectDataListItem = id => {
+    setSelectedDataListItemId(id);
+  };
+
+  return (
+    <React.Fragment>
+      <DataList
+        aria-label="selectable data list example"
+        selectedDataListItemId={selectedDataListItemId}
+        onSelectDataListItem={onSelectDataListItem}
+      >
+        <DataListItem aria-labelledby="selectable-action-item1" id="item1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary content">
+                  <span id="selectable-action-item1">Single actionable Primary content</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="selectable-action-item1 selectable-action-action1"
+              id="selectable-action-action1"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen1}
+                onSelect={onSelect1}
+                toggle={<KebabToggle onToggle={onToggle1} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-labelledby="selectable-actions-item2" id="item2">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary content">
+                  <span id="selectable-actions-item2">Selectable actions Primary content</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">Selectable actions Secondary content</DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="selectable-actions-item2 selectable-actions-action2"
+              id="selectable-actions-action2"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen2}
+                onSelect={onSelect2}
+                toggle={<KebabToggle onToggle={onToggle2} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+};

package/src/components/DataList/examples/DataListSmGridBreakpoint.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
+
+export const DataListSmGridBreakpoint: React.FunctionComponent = () => (
+  <DataList aria-label="Simple data list example" gridBreakpoint="sm">
+    <DataListItem aria-labelledby="simple-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content">
+              <span id="simple-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content">
+              Really really really really really really really really really really really really really really long
+              description that should be truncated before it ends
+            </DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListCheck,
+  DataListAction,
+  DataListToggle,
+  DataListContent,
+  DataListItemCells,
+  DataListItemRow,
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+  DropdownPosition,
+  Text,
+  TextVariants,
+  TextContent
+} from '@patternfly/react-core';
+
+export const DataListWidthModifiers: React.FunctionComponent = () => {
+  const [show, setShow] = React.useState(true);
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+
+  const onToggle1 = isOpen1 => {
+    setIsOpen1(isOpen1);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = isOpen2 => {
+    setIsOpen2(isOpen2);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+
+  const previewPlaceholder = {
+    display: 'block',
+    width: '100%',
+    padding: '.25rem .5rem',
+    color: '#004e8a',
+    backgroundColor: '#def3ff',
+    border: '1px solid rgba(0,0,0,.1)',
+    borderRadius: '4px'
+  };
+
+  return (
+    <>
+      <div key="example-1">
+        <TextContent>
+          <Text component={TextVariants.h4}>Default fitting - example 1</Text>
+        </TextContent>
+        <DataList aria-label="Width modifier data list example 1">
+          <DataListItem aria-labelledby="width-ex1-item1">
+            <DataListItemRow>
+              <DataListCheck aria-labelledby="width-ex1-item1" name="width-ex1-item1" />
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell key="default">
+                    <div style={previewPlaceholder}>
+                      <b id="width-ex1-item1">default</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell key="default2">
+                    <div style={previewPlaceholder}>
+                      <b>default</b>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua.
+                      </p>
+                    </div>
+                  </DataListCell>
+                ]}
+              />
+            </DataListItemRow>
+          </DataListItem>
+        </DataList>
+      </div>
+      <div key="example-2">
+        <TextContent>
+          <Text component={TextVariants.h4}>Flex modifiers - example 2</Text>
+        </TextContent>
+        <DataList aria-label="Width modifier data list example 2">
+          <DataListItem aria-labelledby="width-ex2-item1">
+            <DataListItemRow>
+              <DataListCheck aria-labelledby="width-ex2-item1" name="width-ex2-item1" />
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell width={2} key="width 2">
+                    <div style={previewPlaceholder}>
+                      <b id="width-ex2-item1">width 2</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell width={4} key="width 4">
+                    <div style={previewPlaceholder}>
+                      <b>width 4</b>
+                      <p>Lorem ipsum dolor sit amet.</p>
+                    </div>
+                  </DataListCell>
+                ]}
+              />
+              <DataListAction
+                aria-labelledby="width-ex2-item1 width-ex2-action1"
+                id="width-ex2-action1"
+                aria-label="Actions"
+                isPlainButtonAction
+              >
+                <Dropdown
+                  isPlain
+                  position={DropdownPosition.right}
+                  isOpen={isOpen1}
+                  onSelect={onSelect1}
+                  toggle={<KebabToggle onToggle={onToggle1} />}
+                  dropdownItems={[
+                    <DropdownItem key="link">Link</DropdownItem>,
+                    <DropdownItem key="action" component="button">
+                      Action
+                    </DropdownItem>,
+                    <DropdownItem key="disabled link" isDisabled>
+                      Disabled Link
+                    </DropdownItem>
+                  ]}
+                />
+              </DataListAction>
+            </DataListItemRow>
+          </DataListItem>
+        </DataList>
+      </div>
+      <div key="example-3">
+        <TextContent>
+          <Text component={TextVariants.h4}>Flex modifiers - example 3</Text>
+        </TextContent>
+        <DataList aria-label="Width modifier data list example 3">
+          <DataListItem aria-labelledby="width-ex3-item1" isExpanded={show}>
+            <DataListItemRow>
+              <DataListToggle
+                isExpanded={show}
+                id="width-ex3-toggle1"
+                aria-controls="width-ex3-expand1"
+                onClick={() => setShow(!show)}
+              />
+              <DataListCheck aria-labelledby="width-ex3-item1" name="width-ex3-item1" />
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell width={5} key="width 5">
+                    <div style={previewPlaceholder}>
+                      <b id="width-ex3-item1">width 5</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell width={2} key="width 2">
+                    <div style={previewPlaceholder}>
+                      <b>width 2</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell key="default">
+                    <div style={previewPlaceholder}>default</div>
+                  </DataListCell>
+                ]}
+              />
+              <DataListAction
+                aria-labelledby="width-ex3-item1 width-ex3-action1"
+                id="width-ex3-action1"
+                aria-label="Actions"
+                isPlainButtonAction
+              >
+                <Dropdown
+                  isPlain
+                  position={DropdownPosition.right}
+                  isOpen={isOpen2}
+                  onSelect={onSelect2}
+                  toggle={<KebabToggle onToggle={onToggle2} />}
+                  dropdownItems={[
+                    <DropdownItem key="link">Link</DropdownItem>,
+                    <DropdownItem key="action" component="button">
+                      Action
+                    </DropdownItem>,
+                    <DropdownItem key="disabled link" isDisabled>
+                      Disabled Link
+                    </DropdownItem>
+                  ]}
+                />
+              </DataListAction>
+            </DataListItemRow>
+            <DataListContent aria-label="Primary Content Details" id="width-ex3-expand1" isHidden={!show}>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua.
+              </p>
+            </DataListContent>
+          </DataListItem>
+        </DataList>
+      </div>
+    </>
+  );
+};

package/src/components/Select/Select.tsx

@@ -123,6 +123,8 @@ export interface SelectProps
   ) => void;
   /** Callback for toggle button behavior */
   onToggle: (isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void;
+  /** Callback for toggle blur */
+  onBlur?: (event?: any) => void;
   /** Callback for typeahead clear button */
   onClear?: (event: React.MouseEvent) => void;
   /** Optional callback for custom filtering */
@@ -917,6 +919,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       direction,
       onSelect,
       onClear,
+      onBlur,
       toggleId,
       isOpen,
       isGrouped,
@@ -1263,6 +1266,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
           onToggle={this.onToggle}
           onEnter={this.onEnter}
           onClose={this.onClose}
+          onBlur={onBlur}
           variant={variant}
           aria-labelledby={`${ariaLabelledBy || ''} ${selectToggleId}`}
           aria-label={toggleAriaLabel}

package/src/components/Select/SelectToggle.tsx

@@ -23,6 +23,8 @@ export interface SelectToggleProps extends React.HTMLProps<HTMLElement> {
   onEnter?: () => void;
   /** Callback for toggle close */
   onClose?: () => void;
+  /** Callback for toggle blur */
+  onBlur?: (event?: any) => void;
   /** @hide Internal callback for toggle keyboard navigation */
   handleTypeaheadKeys?: (position: string, shiftKey?: boolean) => void;
   /** @hide Internal callback to move focus to last menu item */
@@ -247,6 +249,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
       onToggle,
       onEnter,
       onClose,
+      onBlur,
       onClickTypeaheadToggleButton,
       handleTypeaheadKeys,
       moveFocusToLastMenuItem,
@@ -292,6 +295,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
               className
             )}
             aria-label={ariaLabel}
+            onBlur={onBlur}
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onClick={event => {
               onToggle(!isOpen, event);
@@ -320,6 +324,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
               isTypeahead && styles.modifiers.typeahead,
               className
             )}
+            onBlur={onBlur}
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onClick={event => {
               if (!isDisabled) {