@patternfly/react-core 4.243.0 → 4.244.0

package/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputUnitThreshold: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(0);
+  const minValue = 0;
+  const maxValue = 10;
+
+  const normalizeBetween = (value, min, max) => {
+    if (min !== undefined && max !== undefined) {
+      return Math.max(Math.min(value, max), min);
+    } else if (value <= min) {
+      return min;
+    } else if (value >= max) {
+      return max;
+    }
+    return value;
+  };
+
+  const onMinus = () => {
+    const newValue = normalizeBetween(value - 1, minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onPlus = () => {
+    const newValue = normalizeBetween(value + 1, minValue, maxValue);
+    setValue(newValue);
+  };
+
+  return (
+    <React.Fragment>
+      With a minimum value of 0 and maximum value of 10
+      <br />
+      <NumberInput
+        value={value}
+        min={minValue}
+        max={maxValue}
+        onMinus={onMinus}
+        onChange={onChange}
+        onPlus={onPlus}
+        inputName="input"
+        inputAriaLabel="number input"
+        minusBtnAriaLabel="minus"
+        plusBtnAriaLabel="plus"
+        unit="%"
+      />
+    </React.Fragment>
+  );
+};

package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputVaryingSizes: React.FunctionComponent = () => {
+  const [input1Value, setInput1Value] = React.useState(1);
+  const [input2Value, setInput2Value] = React.useState(1234567890);
+  const [input3Value, setInput3Value] = React.useState(5);
+  const [input4Value, setInput4Value] = React.useState(12345);
+
+  const onChange = (
+    event: React.FormEvent<HTMLInputElement>,
+    updateFunction: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    const target = event.target as HTMLInputElement;
+    updateFunction(Number(target.value));
+  };
+
+  const onMinus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
+    updateFunction(value - 1);
+  };
+
+  const onPlus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
+    updateFunction(value + 1);
+  };
+
+  return (
+    <React.Fragment>
+      <NumberInput
+        value={input1Value}
+        onMinus={() => onMinus(input1Value, setInput1Value)}
+        onChange={event => onChange(event, setInput1Value)}
+        onPlus={() => onPlus(input1Value, setInput1Value)}
+        inputName="input1"
+        inputAriaLabel="number input 1"
+        minusBtnAriaLabel="input 2 minus"
+        plusBtnAriaLabel="input 2 plus"
+        widthChars={1}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input2Value}
+        onMinus={() => onMinus(input2Value, setInput2Value)}
+        onChange={event => onChange(event, setInput2Value)}
+        onPlus={() => onPlus(input2Value, setInput2Value)}
+        inputName="input2"
+        inputAriaLabel="number input 2"
+        minusBtnAriaLabel="input 2 minus"
+        plusBtnAriaLabel="input 2 plus"
+        widthChars={10}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input3Value}
+        onMinus={() => onMinus(input3Value, setInput3Value)}
+        onChange={event => onChange(event, setInput3Value)}
+        onPlus={() => onPlus(input3Value, setInput3Value)}
+        inputName="input3"
+        inputAriaLabel="number input 3"
+        minusBtnAriaLabel="input 3 minus"
+        plusBtnAriaLabel="input 3 plus"
+        widthChars={5}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input4Value}
+        onMinus={() => onMinus(input4Value, setInput4Value)}
+        onChange={event => onChange(event, setInput4Value)}
+        onPlus={() => onPlus(input4Value, setInput4Value)}
+        inputName="input4"
+        inputAriaLabel="number input 4"
+        minusBtnAriaLabel="input 4 minus"
+        plusBtnAriaLabel="input 4 plus"
+        widthChars={5}
+      />
+    </React.Fragment>
+  );
+};

package/src/components/NumberInput/examples/{WithStatus.tsx → NumberInputWithStatus.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NumberInput, ValidatedOptions } from '@patternfly/react-core';
 
-export const WithStatus: React.FunctionComponent = () => {
+export const NumberInputWithStatus: React.FunctionComponent = () => {
   const max = 10;
   const min = 0;
 
@@ -20,8 +20,9 @@ export const WithStatus: React.FunctionComponent = () => {
     validate(newVal);
   };
 
-  const onChange = event => {
-    const newVal = isNaN(event.target.value) ? 5 : Number(event.target.value);
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newVal = isNaN(+target.value) ? 5 : Number(target.value);
     setValue(newVal);
     validate(newVal);
   };

package/src/components/Pagination/Navigation.tsx

@@ -11,52 +11,52 @@ import { pluralize, PickOptional } from '../../helpers';
 import { KeyTypes } from '../../helpers/constants';
 
 export interface NavigationProps extends React.HTMLProps<HTMLElement> {
-  /** Additional classes for the container */
+  /** Additional classes for the pagination navigation container. */
   className?: string;
-  /** Flag indicating if the pagination is disabled */
-  isDisabled?: boolean;
-  /** Flag indicating if the pagination is compact */
+  /** Accessible label for the input displaying the current page. */
+  currPage?: string;
+  /** The number of first page where pagination starts. */
+  firstPage?: number;
+  /** Flag indicating if the pagination is compact. */
   isCompact?: boolean;
+  /** Flag indicating if the pagination is disabled. */
+  isDisabled?: boolean;
   /** Total number of items. */
   itemCount?: number;
-  /** The number of the last page */
+  /** The number of the last page. */
   lastPage?: number;
-  /** The number of first page where pagination starts */
-  firstPage?: number;
-  /** The title of a page displayed beside the page number */
+  /** Label for the English word "of". */
+  ofWord?: string;
+  /** The number of the current page. */
+  page: React.ReactText;
+  /** The title of a page displayed beside the page number. */
   pagesTitle?: string;
-  /** The title of a page displayed beside the page number (the plural form) */
+  /** The title of a page displayed beside the page number (the plural form). */
   pagesTitlePlural?: string;
-  /** Accessible label for the button which moves to the last page */
-  toLastPage?: string;
-  /** Accessible label for the button which moves to the previous page */
-  toPreviousPage?: string;
-  /** Accessible label for the button which moves to the next page */
-  toNextPage?: string;
-  /** Accessible label for the button which moves to the first page */
-  toFirstPage?: string;
-  /** Accessible label for the input displaying the current page */
-  currPage?: string;
-  /** Accessible label for the pagination component */
+  /** Accessible label for the pagination component. */
   paginationTitle?: string;
-  /** Accessible label for the English word "of" */
-  ofWord?: string;
-  /** The number of the current page */
-  page: React.ReactText;
   /** Number of items per page. */
   perPage?: number;
-  /** Function called when page is changed */
-  onSetPage: OnSetPage;
-  /** Function called when user clicks to navigate to next page */
-  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks to navigate to previous page */
-  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks to navigate to first page */
+  /** Accessible label for the button which moves to the first page. */
+  toFirstPage?: string;
+  /** Accessible label for the button which moves to the last page. */
+  toLastPage?: string;
+  /** Accessible label for the button which moves to the next page. */
+  toNextPage?: string;
+  /** Accessible label for the button which moves to the previous page. */
+  toPreviousPage?: string;
+  /** Function called when user clicks to navigate to first page. */
   onFirstClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks to navigate to last page */
+  /** Function called when user clicks to navigate to last page. */
   onLastClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user inputs page number */
+  /** Function called when user clicks to navigate to next page. */
+  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user clicks to navigate to previous page. */
+  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user inputs page number. */
   onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when page is changed. */
+  onSetPage: OnSetPage;
 }
 
 export interface NavigationState {

package/src/components/Pagination/OptionsToggle.tsx

@@ -7,40 +7,41 @@ import { ToggleTemplateProps } from './ToggleTemplate';
 import { DropdownToggle } from '../Dropdown';
 
 export interface OptionsToggleProps extends React.HTMLProps<HTMLDivElement> {
-  /** The type or title of the items being paginated */
-  itemsTitle?: string;
-  /** Accessible label for the options toggle */
-  optionsToggle?: string;
-  /** The title of the pagination options menu */
-  itemsPerPageTitle?: string;
-  /** The first index of the items being paginated */
+  /** The first index of the items being paginated. */
   firstIndex?: number;
-  /** The last index of the items being paginated */
-  lastIndex?: number;
-  /** The total number of items being paginated */
+  /** Flag indicating if the options menu is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if the options menu dropdown is open or not. */
+  isOpen?: boolean;
+  /** The total number of items being paginated. */
   itemCount?: number;
-  /** Id added to the title of the pagination options menu */
-  widgetId?: string;
-  /** showToggle */
-  showToggle?: boolean;
-  /** Event function that fires when user clicks the options menu toggle */
+  /** The title of the pagination options menu. */
+  itemsPerPageTitle?: string;
+  /** The type or title of the items being paginated. */
+  itemsTitle?: string;
+  /** The last index of the items being paginated. */
+  lastIndex?: number;
+  /** Label for the English word "of". */
+  ofWord?: string;
+  /** Callback for toggle open on keyboard entry. */
+  onEnter?: () => void;
+  /** Event function that fires when user clicks the options menu toggle. */
   onToggle?: (isOpen: boolean) => void;
-  /** Flag indicating if the options menu dropdown is open or not */
-  isOpen?: boolean;
-  /** Flag indicating if the options menu is disabled */
-  isDisabled?: boolean;
+  /** Accessible label for the options toggle. */
+  optionsToggle?: string;
   /** */
   parentRef?: HTMLElement;
-  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props. */
-  toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
-  /** Callback for toggle open on keyboard entry */
-  onEnter?: () => void;
-  /** Label for the English word "of" */
-  ofWord?: string;
-  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
+  /** Component to be used for wrapping the toggle contents. Use "button" when you want
    * all of the toggle text to be clickable.
    */
   perPageComponent?: 'div' | 'button';
+  /** Flag for indicating whether the toggle should be shown. */
+  showToggle?: boolean;
+  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
+   * itemCount, and/or itemsTitle props. */
+  toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
+  /** Id added to the title of the pagination options menu. */
+  widgetId?: string;
 }
 
 let toggleId = 0;

package/src/components/Pagination/Pagination.tsx

@@ -11,8 +11,8 @@ import widthChars from '@patternfly/react-tokens/dist/esm/c_pagination__nav_page
 import { PickOptional } from '../../helpers';
 
 export enum PaginationVariant {
-  top = 'top',
-  bottom = 'bottom'
+  bottom = 'bottom',
+  top = 'top'
 }
 
 const defaultPerPageOptions = [
@@ -34,40 +34,48 @@ const defaultPerPageOptions = [
   }
 ];
 
+/** Properties to customize the content and behavior of the pagination dropdown options. These
+ * properties should be passed into the pagination component's perPageOptions property.
+ */
+
 export interface PerPageOptions {
-  /** option title */
+  /** The text title of the option, which is rendered inside the pagination dropdown menu. */
   title?: string;
-  /** option value */
+  /** The value of the option, which determines how many items are displayed per page. */
   value?: number;
 }
 
+/** Properties to customize various pagination titles. The following properties should be
+ * passed into the pagination component's title property.
+ */
+
 export interface PaginationTitles {
-  /** The title of a page displayed beside the page number */
-  page?: string;
-  /** The title of a page displayed beside the page number (plural form) */
-  pages?: string;
-  /** The type or title of the items being paginated */
+  /** Accessible label for the input displaying the current page. */
+  currPage?: string;
+  /** The type or title of the items being paginated. */
   items?: string;
-  /** The title of the pagination options menu */
+  /** The title of the pagination options menu. */
   itemsPerPage?: string;
-  /** The suffix to be displayed after each option on the options menu dropdown */
+  /** Label for the English word "of". */
+  ofWord?: string;
+  /** Accessible label for the options toggle. */
+  optionsToggle?: string;
+  /** The title of a page displayed beside the page number. */
+  page?: string;
+  /** The title of a page displayed beside the page number (plural form). */
+  pages?: string;
+  /** Accessible label for the pagination component. */
+  paginationTitle?: string;
+  /** The suffix to be displayed after each option on the options menu dropdown. */
   perPageSuffix?: string;
-  /** Accessible label for the button which moves to the first page */
+  /** Accessible label for the button which moves to the first page. */
   toFirstPage?: string;
-  /** Accessible label for the button which moves to the previous page */
-  toPreviousPage?: string;
-  /** Accessible label for the button which moves to the last page */
+  /** Accessible label for the button which moves to the last page. */
   toLastPage?: string;
-  /** Accessible label for the button which moves to the next page */
+  /** Accessible label for the button which moves to the next page. */
   toNextPage?: string;
-  /** Accessible label for the options toggle */
-  optionsToggle?: string;
-  /** Accessible label for the input displaying the current page */
-  currPage?: string;
-  /** Accessible label for the pagination component */
-  paginationTitle?: string;
-  /** Accessible label for the English word "of" */
-  ofWord?: string;
+  /** Accessible label for the button which moves to the previous page. */
+  toPreviousPage?: string;
 }
 
 export type OnSetPage = (
@@ -86,65 +94,71 @@ export type OnPerPageSelect = (
   endIdx?: number
 ) => void;
 
+/** The main pagination component. */
+
 export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** What should be rendered inside */
+  /** What should be rendered inside the pagination. */
   children?: React.ReactNode;
-  /** Additional classes for the container. */
+  /** Additional classes for the pagination container. */
   className?: string;
-  /** Total number of items. */
-  itemCount?: number;
-  /** Position where pagination is rendered. */
-  variant?: 'top' | 'bottom' | PaginationVariant;
-  /** Flag indicating if pagination is disabled */
-  isDisabled?: boolean;
-  /** Flag indicating if pagination is compact */
+  /** Indicate whether to show last full page of results when user selects perPage value
+   * greater than remaining rows.
+   */
+  defaultToFullPage?: boolean;
+  /** Direction of dropdown context menu. */
+  dropDirection?: 'up' | 'down';
+  /** Page to start at. */
+  firstPage?: number;
+  /** Flag indicating if pagination is compact. */
   isCompact?: boolean;
-  /** Flag indicating if pagination should not be sticky on mobile */
+  /** Flag indicating if pagination is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if pagination should not be sticky on mobile. */
   isStatic?: boolean;
-  /** Flag indicating if pagination should stick to its position (based on variant) */
+  /** Flag indicating if pagination should stick to its position (based on variant). */
   isSticky?: boolean;
+  /** Total number of items. */
+  itemCount?: number;
+  /** Last index of items on current page. */
+  itemsEnd?: number;
+  /** First index of items on current page. */
+  itemsStart?: number;
+  /** Start index of rows to display, used in place of providing page. */
+  offset?: number;
+  /** Current page number. */
+  page?: number;
   /** Number of items per page. */
   perPage?: number;
-  /** Array of the number of items per page  options. */
+  /** Component to be used for wrapping the toggle contents. Use "button" when you want
+   * all of the toggle text to be clickable.
+   */
+  perPageComponent?: 'div' | 'button';
+  /** Array of the number of items per page options. */
   perPageOptions?: PerPageOptions[];
-  /** Indicate whether to show last full page of results when user selects perPage value greater than remaining rows */
-  defaultToFullPage?: boolean;
-  /** Page we start at. */
-  firstPage?: number;
-  /** Current page number. */
-  page?: number;
-  /** Start index of rows to display, used in place of providing page */
-  offset?: number;
-  /** First index of items on current page. */
-  itemsStart?: number;
-  /** Last index of items on current page. */
-  itemsEnd?: number;
-  /** ID to ideintify widget on page. */
-  widgetId?: string;
-  /** Direction of dropdown context menu. */
-  dropDirection?: 'up' | 'down';
-  /** Object with titles to display in pagination. */
-  titles?: PaginationTitles;
-  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle, ofWord props. */
-  toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
-  /** Function called when user sets page. */
-  onSetPage?: OnSetPage;
   /** Function called when user clicks on navigate to first page. */
   onFirstClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks on navigate to previous page. */
-  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
-  /** Function called when user clicks on navigate to next page. */
-  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user clicks on navigate to last page. */
   onLastClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user clicks on navigate to next page. */
+  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user inputs page number. */
   onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
-  /** Component to be used for wrapping the toggle contents. Use 'button' when you want
-   * all of the toggle text to be clickable.
+  /** Function called when user clicks on navigate to previous page. */
+  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user sets page. */
+  onSetPage?: OnSetPage;
+  /** Object with titles to display in pagination. */
+  titles?: PaginationTitles;
+  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
+   * itemCount, itemsTitle, and/or ofWord props.
    */
-  perPageComponent?: 'div' | 'button';
+  toggleTemplate?: ((props: ToggleTemplateProps) => React.ReactElement) | string;
+  /** Position where pagination is rendered. */
+  variant?: 'top' | 'bottom' | PaginationVariant;
+  /** Id to ideintify widget on page. */
+  widgetId?: string;
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -8,43 +8,47 @@ import { ToggleTemplateProps, ToggleTemplate } from './ToggleTemplate';
 import { PerPageOptions, OnPerPageSelect } from './Pagination';
 
 export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivElement> {
-  /** Custom class name added to the pagination options menu */
+  /** Custom class name added to the pagination options menu. */
   className?: string;
-  /** Id added to the title of the Pagination options menu */
+  /** Id added to the title of the pagination options menu. */
   widgetId?: string;
-  /** Flag indicating if pagination options menu is disabled */
+  /** Flag indicating if pagination options menu is disabled. */
   isDisabled?: boolean;
-  /** Menu will open up or open down from the options menu toggle */
+  /** Menu will open up or open down from the options menu toggle. */
   dropDirection?: 'up' | 'down';
-  /** Array of titles and values which will be the options on the options menu dropdown */
+  /** Array of titles and values which will be the options on the options menu dropdown. */
   perPageOptions?: PerPageOptions[];
-  /** The title of the pagination options menu */
+  /** The title of the pagination options menu. */
   itemsPerPageTitle?: string;
-  /** Current page number */
+  /** Current page number. */
   page?: number;
-  /** The suffix to be displayed after each option on the options menu dropdown */
+  /** The suffix to be displayed after each option on the options menu dropdown. */
   perPageSuffix?: string;
-  /** The type or title of the items being paginated */
+  /** The type or title of the items being paginated. */
   itemsTitle?: string;
-  /** Accessible label for the options toggle */
+  /** Accessible label for the options toggle. */
   optionsToggle?: string;
-  /** The total number of items being paginated */
+  /** The total number of items being paginated. */
   itemCount?: number;
-  /** The first index of the items being paginated */
+  /** The first index of the items being paginated. */
   firstIndex?: number;
-  /** The last index of the items being paginated */
+  /** The last index of the items being paginated. */
   lastIndex?: number;
-  /** Flag to show last full page of results if perPage selected > remaining rows */
+  /** Flag to indicate whether to show last full page of results when user selects perPage
+   * value that is greater than remaining rows.
+   */
   defaultToFullPage?: boolean;
-  /** The number of items to be displayed per page */
+  /** The number of items to be displayed per page. */
   perPage?: number;
-  /** The number of the last page */
+  /** The number of the last page. */
   lastPage?: number;
-  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle props. */
+  /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex,
+   * itemCount, and/or itemsTitle props.
+   */
   toggleTemplate: ((props: ToggleTemplateProps) => React.ReactElement) | string;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
-  /** Label for the English word "of" */
+  /** Label for the English word "of". */
   ofWord?: string;
   /** Component to be used for wrapping the toggle contents. Use 'button' when you want
    * all of the toggle text to be clickable.

package/src/components/Pagination/ToggleTemplate.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
 
+/** Allows more customization of the pagination dropdown toggle. The following properties
+ * should be passed into the pagination component's toggleTemplate property.
+ */
+
 export interface ToggleTemplateProps {
   /** The first index of the items being paginated */
   firstIndex?: number;