@patternfly/react-core 4.198.14 → 4.198.17

package/src/components/Tile/Tile.tsx

@@ -33,6 +33,9 @@ export const Tile: React.FunctionComponent<TileProps> = ({
   ...props
 }: TileProps) => (
   <div
+    role="option"
+    aria-selected={isSelected}
+    {...(isDisabled && { 'aria-disabled': isDisabled })}
     className={css(
       styles.tile,
       isSelected && styles.modifiers.selected,

package/src/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Tile basic 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div
@@ -22,7 +23,9 @@ exports[`Tile basic 1`] = `
 exports[`Tile renders disabled 1`] = `
 <div>
   <div
+    aria-disabled="true"
     class="pf-c-tile pf-m-disabled"
+    role="option"
     tabindex="0"
   >
     <div
@@ -41,7 +44,9 @@ exports[`Tile renders disabled 1`] = `
 exports[`Tile renders selected 1`] = `
 <div>
   <div
+    aria-selected="true"
     class="pf-c-tile pf-m-selected"
+    role="option"
     tabindex="0"
   >
     <div
@@ -61,6 +66,7 @@ exports[`Tile renders with icon 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div
@@ -97,6 +103,7 @@ exports[`Tile renders with stacked icon 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div
@@ -133,6 +140,7 @@ exports[`Tile renders with stacked large icon 1`] = `
 <div>
   <div
     class="pf-c-tile pf-m-display-lg"
+    role="option"
     tabindex="0"
   >
     <div
@@ -169,6 +177,7 @@ exports[`Tile renders with subtext 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div

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

@@ -9,7 +9,6 @@ beta: true
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-
 ## Examples
 
 Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/documentation/react/demos/tiledemo).
@@ -20,29 +19,30 @@ Keyboard interaction patterns and a11y is implemented in the Tile demos, located
 import React from 'react';
 import { Tile } from '@patternfly/react-core';
 
-<React.Fragment>
-  <Tile title="Default" />
+<div role="listbox" aria-label="Basic tiles">
+  <Tile title="Default" isSelected={false} />
   <Tile title="Selected" isSelected />
-  <Tile title="Disabled" isDisabled />
-</React.Fragment>
+  <Tile title="Disabled" isDisabled isSelected={false} />
+</div>;
 ```
 
-
 ### With subtext
 
 ```js
 import React from 'react';
 import { Tile } from '@patternfly/react-core';
 
-<React.Fragment>
-  <Tile title="Default">Subtext goes here</Tile>{' '}
+<div role="listbox" aria-label="Tiles with subtext">
+  <Tile title="Default" isSelected={false}>
+    Subtext goes here
+  </Tile>{' '}
   <Tile title="Selected" isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" isDisabled>
+  <Tile title="Disabled" isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### With icon
@@ -52,17 +52,17 @@ import React from 'react';
 import { Tile } from '@patternfly/react-core';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
-<React.Fragment>
-  <Tile title="Default" icon={<PlusIcon />}>
+<div role="listbox" aria-label="Tiles with icon">
+  <Tile title="Default" icon={<PlusIcon />} isSelected={false}>
     Subtext goes here
   </Tile>{' '}
   <Tile title="Selected" icon={<PlusIcon />} isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" icon={<PlusIcon />} isDisabled>
+  <Tile title="Disabled" icon={<PlusIcon />} isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### Stacked
@@ -72,17 +72,17 @@ import React from 'react';
 import { Tile } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-<React.Fragment>
-  <Tile title="Default" icon={<BellIcon />} isStacked>
+<div role="listbox" aria-label="Stacked tiles">
+  <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
     Subtext goes here
   </Tile>{' '}
   <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled>
+  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### Stacked with large icons
@@ -92,17 +92,17 @@ import React from 'react';
 import { Tile } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-<React.Fragment>
-  <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge>
+<div role="listbox" aria-label="Stacked tiles with large icons">
+  <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge isSelected={false}>
     Subtext goes here
   </Tile>{' '}
   <Tile title="Selected" icon={<BellIcon />} isStacked isDisplayLarge isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled>
+  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### With extra content
@@ -112,22 +112,24 @@ import React from 'react';
 import { Tile, Flex } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-<Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <Tile title="Default" icon={<BellIcon />} isStacked>
-      This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really
-      really long subtext that goes on for so long that it has to wrap to the next line.
-    </Tile>
-  </Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <Tile title="Selected" icon={<BellIcon />} isStacked>
-      This is really really long subtext that goes on for so long that it has to wrap to the next line.
-    </Tile>
-  </Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <Tile title="Disabled" icon={<BellIcon />} isStacked>
-      Subtext goes here
-    </Tile>
+<div role="listbox" aria-label="Tiles with extra content">
+  <Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
+        This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really
+        really long subtext that goes on for so long that it has to wrap to the next line.
+      </Tile>
+    </Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
+        This is really really long subtext that goes on for so long that it has to wrap to the next line.
+      </Tile>
+    </Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
+        Subtext goes here
+      </Tile>
+    </Flex>
   </Flex>
-</Flex>
+</div>;
 ```

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -28,31 +28,26 @@ Composable menus currently require consumer keyboard handling and use of our und
 ### 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 drilldown menu
 
 ```ts isBeta file="./examples/ComposableDrilldownMenu.tsx"
-
 ```
 
 ### Composable tree view menu
 
 ```ts file="./examples/ComposableTreeViewMenu.tsx"
-
 ```
 
 ### Composable flyout
@@ -60,29 +55,29 @@ Composable menus currently require consumer keyboard handling and use of our und
 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/ComposableMenu/examples/ComposableDateSelect.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
+
+export const ComposableSimpleDropdown: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleRef = React.useRef<HTMLButtonElement>();
+  const menuRef = React.useRef<HTMLDivElement>();
+  const [selected, setSelected] = React.useState<number>(0);
+
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (!isOpen) {
+      return;
+    }
+    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        setIsOpen(!isOpen);
+        toggleRef.current.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, menuRef]);
+
+  const onToggleClick = (ev: React.MouseEvent) => {
+    ev.stopPropagation(); // Stop handleClickOutside from handling
+    setTimeout(() => {
+      if (menuRef.current) {
+        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+    setIsOpen(!isOpen);
+  };
+
+  const monthStrings = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ];
+
+  const dateString = (date: Date) => `${monthStrings[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+
+  const date = new Date();
+
+  const toggleText = {
+    0: 'Today ',
+    1: 'Yesterday ',
+    2: 'Last 7 days ',
+    3: 'Last 14 days '
+  };
+
+  const dateText = {
+    0: <small className="pf-u-color-200">({dateString(date)})</small>,
+    1: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
+      </small>
+    ),
+    2: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
+      </small>
+    ),
+    3: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
+      </small>
+    )
+  };
+
+  const toggle = (
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ minWidth: '250px' }}>
+      <span style={{ verticalAlign: 'middle', marginRight: '8px' }}>{toggleText[selected]}</span>
+      {dateText[selected]}
+    </MenuToggle>
+  );
+  const menu = (
+    // eslint-disable-next-line no-console
+    <Menu ref={menuRef} onSelect={(_ev, itemId) => setSelected(itemId as number)} selected={selected}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Today</MenuItem>
+          <MenuItem itemId={1}>Yesterday</MenuItem>
+          <MenuItem itemId={2}>Last 7 days</MenuItem>
+          <MenuItem itemId={3}>Last 14 days</MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+};

package/src/demos/MultipleFileUploadDemos.md

@@ -0,0 +1,16 @@
+---
+id: File upload - multiple
+section: components
+beta: true
+---
+
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+
+## Demos
+
+### Rejected file handling
+
+This demo shows how to add a modal to alert users that the file(s) they attempted to drop was of a non-acceptable type.
+
+```ts file="./examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx"
+```

package/src/demos/TileDemo.md

@@ -13,11 +13,11 @@ import { Tile } from '@patternfly/react-core';
 
 const TileSingleSelect: React.FunctionComponent = () => {
   const [selectedId, setSelectedId] = React.useState<string>('');
-  
-  const onSelect = (event: React.MouseEvent) => {``
+
+  const onSelect = (event: React.MouseEvent) => {
     setSelectedId(event.currentTarget.id);
   };
-  
+
   const onKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === ' ' || event.key === 'Enter') {
       event.preventDefault();
@@ -26,32 +26,14 @@ const TileSingleSelect: React.FunctionComponent = () => {
   };
 
   return (
-    <div>
-      <Tile
-        title="Tile 1"
-        id="tile-1"
-        onClick={onSelect}
-        onKeyDown={onKeyDown}
-        isSelected={selectedId === 'tile-1'}
-      />
-      <Tile
-        title="Tile 2"
-        id="tile-2"
-        onClick={onSelect}
-        onKeyDown={onKeyDown}
-        isSelected={selectedId === 'tile-2'}
-      />
-      <Tile title="Tile 3" id="tile-3" isDisabled />
-      <Tile
-        title="Tile 4"
-        id="tile-4"
-        onClick={onSelect}
-        onKeyDown={onKeyDown}
-        isSelected={selectedId === 'tile-4'}
-      />
+    <div role="listbox" aria-label="Single selection tiles">
+      <Tile title="Tile 1" id="tile-1" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-1'} />
+      <Tile title="Tile 2" id="tile-2" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-2'} />
+      <Tile title="Tile 3" id="tile-3" isDisabled isSelected={selectedId === 'tile-3'} />
+      <Tile title="Tile 4" id="tile-4" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-4'} />
     </div>
   );
-}
+};
 ```
 
 ### Tiles with multiple selection
@@ -62,18 +44,18 @@ import { Tile } from '@patternfly/react-core';
 
 const TileMultiSelect: React.FunctionComponent = () => {
   const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
-  
+
   const onSelect = (event: React.MouseEvent | React.KeyboardEvent) => {
     const targetId = event.currentTarget.id;
     setSelectedIds(prevSelectedIds => {
-      const newSelectedIds = prevSelectedIds.includes(targetId) ? 
-        prevSelectedIds.filter(id => id !== targetId) : 
-        [...prevSelectedIds, targetId] 
+      const newSelectedIds = prevSelectedIds.includes(targetId)
+        ? prevSelectedIds.filter(id => id !== targetId)
+        : [...prevSelectedIds, targetId];
       console.log('tile selections: ', newSelectedIds);
       return newSelectedIds;
     });
   };
-  
+
   const onKeyDown = (event: React.KeyboardEvent) => {
     console.log(event.key);
     if (event.key === ' ' || event.key === 'Enter') {
@@ -81,9 +63,9 @@ const TileMultiSelect: React.FunctionComponent = () => {
       onSelect(event);
     }
   };
-    
+
   return (
-    <div>
+    <div role="listbox" aria-multiselectable={true} aria-label="Multiselectable tiles">
       <Tile
         title="Tile 1"
         id="tile-1"
@@ -108,5 +90,5 @@ const TileMultiSelect: React.FunctionComponent = () => {
       />
     </div>
   );
-}
+};
 ```

package/src/{components/MultipleFileUpload/examples/MultipleFileUploadHorizontal.tsx → demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx}

@@ -1,20 +1,13 @@
 import React from 'react';
 import {
   MultipleFileUpload,
-  MultipleFileUploadInfo,
   MultipleFileUploadMain,
-  MultipleFileUploadTitle,
-  MultipleFileUploadTitleIcon,
-  MultipleFileUploadTitleText,
-  MultipleFileUploadTitleTextSeparator,
-  MultipleFileUploadButton,
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
-  Modal
+  Modal,
+  Checkbox
 } from '@patternfly/react-core';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
   fileName: string;
@@ -24,9 +17,11 @@ interface readFile {
 }
 
 export const MultipleFileUploadBasic: React.FunctionComponent = () => {
+  const [isHorizontal, setIsHorizontal] = React.useState(false);
   const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
   const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
   const [showStatus, setShowStatus] = React.useState(false);
+  const [statusIcon, setStatusIcon] = React.useState('inProgress');
   const [modalText, setModalText] = React.useState('');
 
   // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed
@@ -35,17 +30,15 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   }
 
   // determine the icon that should be shown for the overall status list
-  const getStatusIcon = () => {
+  React.useEffect(() => {
     if (readFileData.length < currentFiles.length) {
-      return <InProgressIcon />;
-    }
-
-    if (readFileData.every(file => file.loadResult === 'success')) {
-      return <CheckCircleIcon />;
+      setStatusIcon('inProgress');
+    } else if (readFileData.every(file => file.loadResult === 'success')) {
+      setStatusIcon('success');
+    } else {
+      setStatusIcon('danger');
     }
-
-    return <TimesCircleIcon />;
-  };
+  }, [readFileData, currentFiles]);
 
   // remove files from both state arrays based on their name
   const removeFiles = (namesOfFilesToRemove: string[]) => {
@@ -101,51 +94,54 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   const successfullyReadFileCount = readFileData.filter(fileData => fileData.loadResult === 'success').length;
 
   return (
-    <MultipleFileUpload
-      onFileDrop={handleFileDrop}
-      dropzoneProps={{
-        accept: 'image/jpeg, application/msword, application/pdf, image/png',
-        onDropRejected: handleDropRejected
-      }}
-      isHorizontal
-    >
-      <MultipleFileUploadMain>
-        <MultipleFileUploadTitle>
-          <MultipleFileUploadTitleIcon />
-          <MultipleFileUploadTitleText>
-            Drag and drop files here
-            <MultipleFileUploadTitleTextSeparator>or</MultipleFileUploadTitleTextSeparator>
-          </MultipleFileUploadTitleText>
-        </MultipleFileUploadTitle>
-        <MultipleFileUploadButton />
-        <MultipleFileUploadInfo>Accepted file types: JPEG, Doc, PDF, PNG</MultipleFileUploadInfo>
-      </MultipleFileUploadMain>
-      {showStatus && (
-        <MultipleFileUploadStatus
-          statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}
-          statusToggleIcon={getStatusIcon()}
-        >
-          {currentFiles.map(file => (
-            <MultipleFileUploadStatusItem
-              file={file}
-              key={file.name}
-              onClearClick={() => removeFiles([file.name])}
-              onReadSuccess={handleReadSuccess}
-              onReadFail={handleReadFail}
-            />
-          ))}
-        </MultipleFileUploadStatus>
-      )}
-      <Modal
-        isOpen={!!modalText}
-        title="Unsupported file"
-        titleIconVariant="warning"
-        showClose
-        aria-label="unsupported file upload attempted"
-        onClose={() => setModalText('')}
+    <>
+      <MultipleFileUpload
+        onFileDrop={handleFileDrop}
+        dropzoneProps={{
+          accept: 'image/jpeg, application/msword, application/pdf, image/png',
+          onDropRejected: handleDropRejected
+        }}
+        isHorizontal={isHorizontal}
       >
-        {modalText}
-      </Modal>
-    </MultipleFileUpload>
+        <MultipleFileUploadMain
+          titleIcon={<UploadIcon />}
+          titleText="Drag and drop files here"
+          titleTextSeparator="or"
+          infoText="Accepted file types: JPEG, Doc, PDF, PNG"
+        />
+        {showStatus && (
+          <MultipleFileUploadStatus
+            statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}
+            statusToggleIcon={statusIcon}
+          >
+            {currentFiles.map(file => (
+              <MultipleFileUploadStatusItem
+                file={file}
+                key={file.name}
+                onClearClick={() => removeFiles([file.name])}
+                onReadSuccess={handleReadSuccess}
+                onReadFail={handleReadFail}
+              />
+            ))}
+          </MultipleFileUploadStatus>
+        )}
+        <Modal
+          isOpen={!!modalText}
+          title="Unsupported file"
+          titleIconVariant="warning"
+          showClose
+          aria-label="unsupported file upload attempted"
+          onClose={() => setModalText('')}
+        >
+          {modalText}
+        </Modal>
+      </MultipleFileUpload>
+      <Checkbox
+        id="horizontal-checkbox"
+        label="Show as horizontal"
+        isChecked={isHorizontal}
+        onChange={() => setIsHorizontal(!isHorizontal)}
+      />
+    </>
   );
 };