@patternfly/react-core 4.233.0 → 4.234.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.233.0",
+  "version": "4.234.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -50,16 +50,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.84.0",
-    "@patternfly/react-styles": "^4.83.0",
-    "@patternfly/react-tokens": "^4.85.0",
+    "@patternfly/react-icons": "^4.85.1",
+    "@patternfly/react-styles": "^4.84.1",
+    "@patternfly/react-tokens": "^4.86.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.209.0",
+    "@patternfly/patternfly": "4.210.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -76,5 +76,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "816b8605d11e6374b6f6b4c5d6da80d43265fc70"
+  "gitHead": "5ed44df6faaf77aae464836238b7f90a0c2fa8cb"
 }

package/src/components/Button/examples/Button.md

@@ -16,68 +16,99 @@ import { Link } from '@reach/router';
 
 ## Examples
 
-### Variations
+### Variant examples
+
+PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the `variant` property.
 
 ```ts file="./ButtonVariations.tsx"
 ```
 
-### Disabled
+| Variant | Description|
+| --- | ---|
+| Primary | Primary buttons are the most visually prominent variant. Use for the most important call to action.|
+| Secondary | Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons. |
+| Tertiary | Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons.  |
+| Danger | Danger buttons may be used for actions that are potentially destructive or difficult/impossible to undo. Danger is an independent variant, but all button variants may use the the `isDanger` property to apply similar styling. |
+| Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
+| Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.|
+| Plain | Plain buttons have no styling and are intended to be labeled with icons. |
+| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](https://www.patternfly.org/v4/components/input-group). | 
+
+### Disabled buttons
+
+To indicate that an action is currently unavailable, all button variations can be disabled using the `isDisabled` property.
 
 ```ts file="./ButtonDisabled.tsx"
 ```
 
-### Aria disabled
+### Small buttons
 
-```ts file="./ButtonAriaDisabled.tsx"
+To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `isSmall` property.
+
+```ts file="./ButtonSmall.tsx"
 ```
 
-### Aria disabled button with tooltip
+### Call to action (CTA) buttons
 
-```ts file="./ButtonAriaDisabledTooltip.tsx"
+CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `isLarge` property. 
+
+```ts file="./ButtonCallToAction.tsx"
 ```
 
-### Aria disabled link as button with tooltip
+### Block level buttons
 
-```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
+Block level buttons span the full width of the parent element and can be enabled using the `isBlock` property.
+
+```ts file="./ButtonBlock.tsx"
+```
+
+### Progress indicators
+
+Progress indicators can be added to buttons to identify that an action is in progress after a click. 
+
+```ts file="./ButtonProgress.tsx"
 ```
 
 ### Links as buttons
 
+Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use `component="a"` and an `href` property to designate the button's target link.
+
 ```ts file="./ButtonLinks.tsx"
 ```
 
 ### Inline link as span
 
+Inline links should use `component="span"` and the `isInline` property to wrap inline with surrounding text.
+
 ```ts file="./ButtonInlineSpanLink.tsx"
 ```
 
-### Block level
-
-```ts file="./ButtonBlock.tsx"
-```
+### Router link
 
-### Types
+Router links can be used for in-app linking in React environments to prevent page reloading.
 
-```ts file="./ButtonTypes.tsx"
+```ts file="./ButtonRouterLink.tsx"
 ```
 
-### Small
+### Aria-disabled examples
 
-```ts file="./ButtonSmall.tsx"
-```
+[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities.
 
-### Call to action
+Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the `isAriaDisabled` property.
 
-```ts file="./ButtonCallToAction.tsx"
+```ts file="./ButtonAriaDisabled.tsx"
 ```
 
-### Progress
+### Aria-disabled with tooltip
 
-```ts file="./ButtonProgress.tsx"
+Unlike normal disabled buttons, aria-disabled buttons can support tooltips.
+
+```ts file="./ButtonAriaDisabledTooltip.tsx"
 ```
 
-### Router link
+### Aria-disabled link as button with tooltip
 
-```ts file="./ButtonRouterLink.tsx"
-```
+Aria-disabled buttons can operate as links, which also support tooltips.
 
+```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
+```

package/src/components/ContextSelector/examples/ContextSelectorBasic.tsx

@@ -48,7 +48,7 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
     setSearchValue(value);
   };
 
-  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+  const onSearchButtonClick = () => {
     const filtered =
       searchValue === ''
         ? items
@@ -71,11 +71,11 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
       screenReaderLabel="Selected Project:"
     >
       {filteredItems.map((item, index) => {
-        const [text = null, href = null, isDisabled] =
-          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        const [text = null, href = undefined, isDisabled] =
+          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
         return (
           <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
-            {text || item}
+            {text}
           </ContextSelectorItem>
         );
       })}

package/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx

@@ -47,7 +47,7 @@ export const ContextSelectorPlainText: React.FunctionComponent = () => {
     setSearchValue(value);
   };
 
-  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+  const onSearchButtonClick = () => {
     const filtered =
       searchValue === ''
         ? items
@@ -72,8 +72,8 @@ export const ContextSelectorPlainText: React.FunctionComponent = () => {
       isText
     >
       {filteredItems.map((item, index) => {
-        const [text, href = null, isDisabled = false] =
-          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        const [text, href = undefined, isDisabled = false] =
+          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
         return (
           <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
             {text}

package/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx

@@ -47,7 +47,7 @@ export const ContextSelectorWithFooter: React.FunctionComponent = () => {
     setSearchValue(value);
   };
 
-  const onSearchButtonClick = (_event: React.SyntheticEvent<HTMLButtonElement>) => {
+  const onSearchButtonClick = () => {
     const filtered =
       searchValue === ''
         ? items
@@ -78,11 +78,11 @@ export const ContextSelectorWithFooter: React.FunctionComponent = () => {
       }
     >
       {filteredItems.map((item, index) => {
-        const [text = null, href = null, isDisabled] =
-          typeof item === 'string' ? [item, null, false] : [item.text, item.href, item.isDisabled];
+        const [text = null, href = undefined, isDisabled] =
+          typeof item === 'string' ? [item, undefined, false] : [item.text, item.href, item.isDisabled];
         return (
           <ContextSelectorItem key={index} href={href} isDisabled={isDisabled}>
-            {text || item}
+            {text}
           </ContextSelectorItem>
         );
       })}

package/src/components/DualListSelector/examples/DualListSelectorComposable.tsx

@@ -16,8 +16,14 @@ import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-d
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
 export const DualListSelectorComposable: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState([
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
     { text: 'Apple', selected: false, isVisible: true },
     { text: 'Banana', selected: false, isVisible: true },
     { text: 'Pineapple', selected: false, isVisible: true },
@@ -26,7 +32,7 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
     { text: 'Peach', selected: false, isVisible: true },
     { text: 'Strawberry', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState([]);
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
   const [availableFilter, setAvailableFilter] = React.useState('');
   const [chosenFilter, setChosenFilter] = React.useState('');
 

package/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx

@@ -8,20 +8,14 @@ import {
   DualListSelectorList,
   DualListSelectorListItem,
   DualListSelectorControlsWrapper,
-  DualListSelectorControl
+  DualListSelectorControl,
+  DraggableItemPosition
 } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
-interface SourceType {
-  droppableId: string;
-  index: number;
-}
-
-interface DestinationType extends SourceType {}
-
 export const DualListSelectorComposableDragDrop: React.FunctionComponent = () => {
   const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = React.useState(false);
   const [availableOptions, setAvailableOptions] = React.useState([
@@ -87,7 +81,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
     }
   };
 
-  const onDrop = (source: SourceType, dest: DestinationType) => {
+  const onDrop = (source: DraggableItemPosition, dest?: DraggableItemPosition) => {
     if (dest) {
       const newList = [...chosenOptions];
       const [removed] = newList.splice(source.index, 1);

package/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

@@ -52,7 +52,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
     if (!node.children || !node.children.length) {
       return [node.id];
     } else {
-      let childrenIds = [];
+      let childrenIds: string[] = [];
       node.children.forEach(child => {
         childrenIds = [...childrenIds, ...getDescendantLeafIds(child)];
       });
@@ -77,7 +77,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   // Builds a map of child leaf nodes by node id - memoized so that it only rebuilds the list if the data changes.
   const { memoizedLeavesById, memoizedAllLeaves, memoizedNodeText } = React.useMemo(() => {
     let leavesById = {};
-    let allLeaves = [];
+    let allLeaves: string[] = [];
     let nodeTexts = {};
     data.forEach(foodNode => {
       nodeTexts = { ...nodeTexts, ...buildTextById(foodNode) };
@@ -129,7 +129,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
       return true;
     }
     if (areSomeDescendantsSelected(node, isChosen)) {
-      return null;
+      return false;
     }
     return false;
   };

package/src/components/DualListSelector/examples/DualListSelectorTreeExample.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
+import { DualListSelector, DualListSelectorTreeItemData } from '@patternfly/react-core';
 
 export const DualListSelectorTreeExample: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+  const [availableOptions, setAvailableOptions] = React.useState<DualListSelectorTreeItemData[]>([
     {
       id: 'F1',
       text: 'Folder 1',
@@ -38,7 +38,7 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
     }
   ]);
 
-  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([
+  const [chosenOptions, setChosenOptions] = React.useState<DualListSelectorTreeItemData[]>([
     {
       id: 'CF1',
       text: 'Chosen Folder 1',
@@ -73,7 +73,10 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
     }
   ]);
 
-  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+  const onListChange = (
+    newAvailableOptions: DualListSelectorTreeItemData[],
+    newChosenOptions: DualListSelectorTreeItemData[]
+  ) => {
     setAvailableOptions(newAvailableOptions.sort());
     setChosenOptions(newChosenOptions.sort());
   };
@@ -84,7 +87,7 @@ export const DualListSelectorTreeExample: React.FunctionComponent = () => {
       isTree
       availableOptions={availableOptions}
       chosenOptions={chosenOptions}
-      onListChange={onListChange}
+      onListChange={onListChange as any}
       id="dual-list-selector-tree"
     />
   );

package/src/components/MenuToggle/MenuToggle.tsx

@@ -87,7 +87,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
       <>
         {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
         {isTypeahead ? children : <span className={css(styles.menuToggleText)}>{children}</span>}
-        {badge && <span className={css(styles.menuToggleCount)}>{badge}</span>}
+        {React.isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
         {isTypeahead ? (
           <button
             type="button"
@@ -166,7 +166,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
   }
 }
 
-export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.Ref<MenuToggleElement>) => (
+export const MenuToggle = React.forwardRef<MenuToggleElement, MenuToggleProps>((props, ref) => (
   <MenuToggleBase innerRef={ref} {...props} />
 ));
 

package/src/components/TimePicker/TimePicker.tsx

@@ -107,6 +107,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     inputProps: {},
     minTime: '',
     maxTime: '',
+    isOpen: false,
     setIsOpen: () => {}
   };
 
@@ -490,24 +491,31 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       />
     );
 
+    let calculatedAppendTo;
+    switch (menuAppendTo) {
+      case 'inline':
+        calculatedAppendTo = () => this.toggleRef.current;
+        break;
+      case 'parent':
+        calculatedAppendTo = getParentElement;
+        break;
+      default:
+        calculatedAppendTo = menuAppendTo as HTMLElement;
+    }
+
     return (
       <div ref={this.baseComponentRef} className={css(datePickerStyles.datePicker, className)}>
         <div className={css(datePickerStyles.datePickerInput)} style={style} {...props}>
           <InputGroup>
             <div id={randomId}>
               <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
-                {menuAppendTo !== 'inline' ? (
-                  <Popper
-                    appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
-                    trigger={textInput}
-                    popper={menuContainer}
-                    isVisible={isTimeOptionsOpen}
-                  />
-                ) : (
-                  textInput
-                )}
+                <Popper
+                  appendTo={calculatedAppendTo}
+                  trigger={textInput}
+                  popper={menuContainer}
+                  isVisible={isTimeOptionsOpen}
+                />
               </div>
-              {isTimeOptionsOpen && menuAppendTo === 'inline' && menuContainer}
             </div>
           </InputGroup>
           {isInvalid && (

package/src/components/Timestamp/Timestamp.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';
+import { css } from '@patternfly/react-styles';
+import { Tooltip } from '../Tooltip';
+
+export enum TimestampFormat {
+  full = 'full',
+  long = 'long',
+  medium = 'medium',
+  short = 'short'
+}
+
+export enum TimestampTooltipVariant {
+  default = 'default',
+  custom = 'custom'
+}
+
+export interface TimestampTooltip {
+  /** The variant of the tooltip. The "default" variant displays the date passed into
+   * the timestamp's date prop as a UTC string.
+   */
+  variant: 'default' | 'custom';
+  /** Content displayed in the tooltip when using the "custom" variant. */
+  content?: React.ReactNode;
+  /** Additional props passed to the tooltip. */
+  tooltipProps?: any;
+  /** A custom suffix to apply to a "default" variant tooltip. */
+  suffix?: string;
+}
+
+export interface TimestampProps extends React.HTMLProps<HTMLSpanElement> {
+  /** Displays custom content inside the timestamp, such as a relative time. This prop will
+   * override the default content that is displayed. Custom content will not be affected by
+   * any props that format or add to displayed content.
+   */
+  children?: React.ReactNode;
+  /** Class to add to the outer span. */
+  className?: string;
+  /** Applies custom formatting to the displayed date and/or time. Passing this prop in will
+   * override the dateFormat and timeFormat props.
+   */
+  customFormat?: { [key: string]: string };
+  /** Determines the default content that is displayed inside the timestamp and the value of
+   * the inner time element's datetime attribute. */
+  date?: Date;
+  /** Determines the format of the displayed date in the timestamp and UTC tooltip. Examples:
+   * "Full" => Tuesday, August 9, 2022;
+   * "Long" => August 9, 2022;
+   * "Medium" => Aug 9, 2022;
+   * "Short" => 8/9/22
+   */
+  dateFormat?: 'full' | 'long' | 'medium' | 'short';
+  /** Applies a custom suffix to the displayed content, usually after the time, such as a
+   * custom time zone.
+   */
+  displaySuffix?: string;
+  /** Flag for displaying the time in a 12 hour format. If this prop is not passed in,
+   * the hour format will be based on the locale prop's value.
+   */
+  is12Hour?: boolean;
+  /** Determines which locale to use in the displayed content. Defaults to the current locale
+   * when this prop is not passed in. For more information about locale's:
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
+   */
+  locale?: string;
+  /** Determines the format of the displayed time in the timestamp and UTC tooltip. Examples:
+   * "Full" => 11:25:00 AM Eastern Daylight Time
+   * "Long" => 11:25:00 AM EDT
+   * "Medium" => 11:25:00 AM
+   * "Short" => 11:25 AM
+   */
+  timeFormat?: 'full' | 'long' | 'medium' | 'short';
+  /** Adds a tooltip to the timestamp. */
+  tooltip?: TimestampTooltip;
+}
+
+export const Timestamp: React.FunctionComponent<TimestampProps> = ({
+  children,
+  className,
+  customFormat,
+  date: dateProp = new Date(),
+  dateFormat,
+  displaySuffix = '',
+  is12Hour,
+  locale,
+  timeFormat,
+  tooltip,
+  ...props
+}: TimestampProps) => {
+  const hasTimeFormat = timeFormat && !customFormat;
+  const formatOptions = {
+    ...(dateFormat && !customFormat && { dateStyle: dateFormat }),
+    ...(customFormat && { ...customFormat }),
+    ...(is12Hour !== undefined && { hour12: is12Hour })
+  };
+
+  const dateAsLocaleString = new Date(dateProp).toLocaleString(locale, {
+    ...formatOptions,
+    ...(hasTimeFormat && { timeStyle: timeFormat })
+  });
+  const defaultDisplay = `${dateAsLocaleString}${displaySuffix ? ' ' + displaySuffix : ''}`;
+
+  const utcTimeFormat = timeFormat !== 'short' ? 'medium' : 'short';
+  const convertToUTCString = (date: Date) => new Date(date).toUTCString().slice(0, -3);
+  const utcDateString = new Date(convertToUTCString(dateProp)).toLocaleString(locale, {
+    ...formatOptions,
+    ...(hasTimeFormat && { timeStyle: utcTimeFormat })
+  });
+  const defaultTooltipContent = `${utcDateString}${tooltip?.suffix ? ' ' + tooltip.suffix : ' UTC'}`;
+
+  const timestamp = (
+    <span
+      className={css(styles.timestamp, tooltip && styles.modifiers.helpText, className)}
+      {...(tooltip && { tabIndex: 0 })}
+      {...props}
+    >
+      <time className="pf-c-timestamp__text" dateTime={props.dateTime || new Date(dateProp).toISOString()}>
+        {!children ? defaultDisplay : children}
+      </time>
+    </span>
+  );
+
+  return tooltip ? (
+    <Tooltip
+      content={tooltip.variant === TimestampTooltipVariant.default ? defaultTooltipContent : tooltip.content}
+      {...tooltip.tooltipProps}
+    >
+      {timestamp}
+    </Tooltip>
+  ) : (
+    timestamp
+  );
+};
+Timestamp.displayName = 'Timestamp';