npm - @patternfly/react-core - Versions diffs - 5.3.0-prerelease.1 → 5.3.0-prerelease.10 - Mend

@patternfly/react-core 5.3.0-prerelease.1 → 5.3.0-prerelease.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (355) hide show

package/helpers/package.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.3.0-prerelease.0","private":true}
1	+ {"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.3.0-prerelease.9","private":true}

package/layouts/package.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.3.0-prerelease.0","private":true}
1	+ {"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.3.0-prerelease.9","private":true}

package/next/package.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.3.0-prerelease.0","private":true}
1	+ {"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.3.0-prerelease.9","private":true}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.3.0-prerelease.1",
+  "version": "5.3.0-prerelease.10",
   "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",
@@ -46,15 +46,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.3.0-prerelease.0",
-    "@patternfly/react-styles": "^5.3.0-prerelease.0",
-    "@patternfly/react-tokens": "^5.3.0-prerelease.0",
+    "@patternfly/react-icons": "^5.3.0-prerelease.1",
+    "@patternfly/react-styles": "^5.3.0-prerelease.1",
+    "@patternfly/react-tokens": "^5.3.0-prerelease.1",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.2.0",
+    "@patternfly/patternfly": "5.2.1",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "9bb6a230ddff7d6177053198bbc7d72aaee40c90"
+  "gitHead": "ef374e4148bb132e4d08632800f60a6159950744"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx CHANGED Viewed

@@ -83,9 +83,6 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   validators?: ((date: Date) => boolean)[];
 }
-// Must be numeric given current header design
-const yearFormat = (date: Date) => date.getFullYear();
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
   const defaultDate = new Date(year, month);
@@ -164,6 +161,13 @@ export const CalendarMonth = ({
   };
   const initialDate = getInitialDate();
   const [focusedDate, setFocusedDate] = React.useState(initialDate);
+  // Must be numeric given current header design
+  const yearFormat = (date: Date) => date.getFullYear();
+  //
+  const yearFormatted = yearFormat(focusedDate);
+  const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
   const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
@@ -191,6 +195,7 @@ export const CalendarMonth = ({
     setHoveredDate(newDate);
     setShouldFocus(false);
     onMonthChange(ev, newDate);
+    setYearInput(yearFormat(newDate).toString());
   };
   const onKeyDown = (ev: React.KeyboardEvent<HTMLTableSectionElement>) => {
@@ -217,6 +222,34 @@ export const CalendarMonth = ({
   const changeMonth = (newMonth: number, newYear?: number) =>
     new Date(newYear ?? focusedDate.getFullYear(), newMonth, 1);
+  const MIN_YEAR = 1900;
+  const MAX_YEAR = 2100;
+  const handleYearInputChange = (event: React.FormEvent<HTMLInputElement>, yearStr: string) => {
+    if (!/^\d{0,4}$/.test(yearStr)) {
+      return;
+    }
+    setYearInput(yearStr);
+    if (yearStr.length === 4) {
+      const yearNum = Number(yearStr);
+      if (yearNum >= MIN_YEAR && yearNum <= MAX_YEAR) {
+        const newDate = changeYear(yearNum);
+        setFocusedDate(newDate);
+        setHoveredDate(newDate);
+        setShouldFocus(false);
+        // We need to manually focus the year input in FireFox when the scroll buttons are clicked, as FireFox doesn't place focus automatically
+        (event.target as HTMLElement).focus();
+        onMonthChange(event, newDate);
+      } else {
+        setYearInput(yearFormatted.toString());
+      }
+    }
+  };
   const addMonth = (toAdd: -1 | 1) => {
     let newMonth = focusedDate.getMonth() + toAdd;
     let newYear = focusedDate.getFullYear();
@@ -254,7 +287,6 @@ export const CalendarMonth = ({
   }
   const isHoveredDateValid = isValidated(hoveredDate);
   const monthFormatted = monthFormat(focusedDate);
-  const yearFormatted = yearFormat(focusedDate);
   const calendarToRender = (
     <div className={css(styles.calendarMonth, className)} {...props}>
@@ -321,15 +353,8 @@ export const CalendarMonth = ({
               <TextInput
                 aria-label={yearInputAriaLabel}
                 type="number"
-                value={yearFormatted}
-                onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
-                  const newDate = changeYear(Number(year));
-                  setFocusedDate(newDate);
-                  setHoveredDate(newDate);
-                  setShouldFocus(false);
-                  focusRef.current?.blur(); // will unfocus a date when changing year via up/down arrows
-                  onMonthChange(ev, newDate);
-                }}
+                value={yearInput}
+                onChange={handleYearInputChange}
               />
             </div>
           </InputGroupItem>

package/src/components/ClipboardCopy/ClipboardCopy.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
 import { getOUIAProps, OUIAProps } from '../../helpers';
-export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => {
+export const clipboardCopyFunc = (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {
   navigator.clipboard.writeText(text.toString());
 };
@@ -27,7 +27,7 @@ export interface ClipboardCopyState {
   textWhenExpanded: string;
 }
-export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'>, OUIAProps {
+export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
   /** Additional classes added to the clipboard copy container. */
   className?: string;
   /** Tooltip message to display when hover the copy button */
@@ -71,12 +71,12 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   /** Delay in ms before the tooltip appears. */
   entryDelay?: number;
   /** A function that is triggered on clicking the copy button. */
-  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: string) => void;
+  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */
-  children: string;
-  /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
+  children: React.ReactNode;
+  /** Additional actions for inline-compact clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;

package/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 export interface ClipboardCopyExpandedProps extends Omit<ClipboardCopyProps, 'onChange'> {
   className?: string;
+  children: React.ReactNode;
   onChange?: (e: React.FormEvent<HTMLDivElement>, text: string) => void;
   isReadOnly?: boolean;
   isCode?: boolean;

package/src/components/Dropdown/Dropdown.tsx CHANGED Viewed

@@ -111,8 +111,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     };
     const handleClick = (event: MouseEvent) => {
-      // toggle was clicked open via keyboard, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+      // toggle was opened, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector(
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'

package/src/components/Menu/Menu.tsx CHANGED Viewed

@@ -156,8 +156,11 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       this.setState({ transitionMoveTarget: null });
     } else {
       const nextMenu = current.querySelector('#' + this.props.activeMenu) || current || null;
-      const nextMenuChildren = Array.from(nextMenu.getElementsByTagName('UL')[0].children);
+      const nextMenuLists = nextMenu.getElementsByTagName('UL');
+      if (nextMenuLists.length === 0) {
+        return;
+      }
+      const nextMenuChildren = Array.from(nextMenuLists[0].children);
       if (!this.state.currentDrilldownMenuId || nextMenu.id !== this.state.currentDrilldownMenuId) {
         this.setState({ currentDrilldownMenuId: nextMenu.id });
       } else {
@@ -167,7 +170,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       const nextTarget = nextMenuChildren.filter(
         (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
       )[0].firstChild;
       (nextTarget as HTMLElement).focus();
       (nextTarget as HTMLElement).tabIndex = 0;
     }

package/src/components/Menu/MenuContainer.tsx CHANGED Viewed

@@ -69,8 +69,8 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
     };
     const handleClick = (event: MouseEvent) => {
-      // toggle was clicked open via keyboard, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+      // toggle was opened, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector(
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'

package/src/components/MenuToggle/MenuToggle.tsx CHANGED Viewed

@@ -96,7 +96,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
             className={css(styles.menuToggleButton)}
             aria-expanded={isExpanded}
             onClick={onClick}
-            aria-label="Menu toggle"
+            aria-label={ariaLabel || 'Menu toggle'}
           >
             {toggleControls}
           </button>

package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
   };
   return (
-    <MenuToggle variant="typeahead" isFullWidth>
+    <MenuToggle variant="typeahead" isFullWidth aria-label="Typeahead menu toggle">
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/Pagination/PaginationOptionsMenu.tsx CHANGED Viewed

@@ -124,10 +124,8 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
     };
     const handleClick = (event: MouseEvent) => {
-      // If the event is on the toggle and was fired via keyboard 'click', focus the first
-      // non-disabled menu item
-      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
-      if (event.detail === 0 && isOpen && toggleRef.current?.contains(event.target as Node)) {
+      // Focus the first non-disabled menu item on toggle 'click'
+      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector('li button:not(:disabled)');
           firstElement && (firstElement as HTMLElement).focus();

package/src/components/SearchInput/SearchInput.tsx CHANGED Viewed

@@ -75,6 +75,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   hasWordsAttrLabel?: React.ReactNode;
   /** A suggestion for autocompleting. */
   hint?: string;
+  /** Id for the search input */
+  searchInputId?: string;
   /** @hide A reference object to attach to the input box. */
   innerRef?: React.RefObject<any>;
   /** A flag for controlling the open state of a custom advanced search implementation. */
@@ -126,6 +128,7 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   className,
+  searchInputId,
   value = '',
   attributes = [] as string[],
   formAdditionalItems,
@@ -298,6 +301,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onKeyDown={onEnter}
         onChange={onChangeHandler}
         name={name}
+        inputId={searchInputId}
       />
       {(renderUtilities || areUtilitiesDisplayed) && (
         <TextInputGroupUtilities>

package/src/components/Select/Select.tsx CHANGED Viewed

@@ -70,6 +70,12 @@ export interface SelectProps extends MenuProps, OUIAProps {
   role?: string;
   /** Additional properties to pass to the popper */
   popperProps?: SelectPopperProps;
+  /** Height of the select menu */
+  menuHeight?: string;
+  /** Maximum height of select menu */
+  maxMenuHeight?: string;
+  /** Indicates if the select menu should be scrollable */
+  isScrollable?: boolean;
 }
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -87,6 +93,9 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   zIndex = 9999,
   role = 'listbox',
   popperProps,
+  menuHeight,
+  maxMenuHeight,
+  isScrollable,
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -115,8 +124,8 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     };
     const handleClick = (event: MouseEvent) => {
-      // toggle was clicked open via keyboard, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+      // toggle was opened, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
           firstElement && (firstElement as HTMLElement).focus();
@@ -151,6 +160,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       }}
       isPlain={isPlain}
       selected={selected}
+      isScrollable={isScrollable}
       {...getOUIAProps(
         Select.displayName,
         props.ouiaId !== undefined ? props.ouiaId : getDefaultOUIAId(Select.displayName),
@@ -158,7 +168,9 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       )}
       {...props}
     >
-      <MenuContent>{children}</MenuContent>
+      <MenuContent menuHeight={menuHeight} maxMenuHeight={maxMenuHeight}>
+        {children}
+      </MenuContent>
     </Menu>
   );
   return (

package/src/components/Select/examples/SelectMultiTypeahead.tsx CHANGED Viewed

@@ -137,7 +137,14 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
   };
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle variant="typeahead" onClick={onToggleClick} innerRef={toggleRef} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      variant="typeahead"
+      aria-label="Multi typeahead menu toggle"
+      onClick={onToggleClick}
+      innerRef={toggleRef}
+      isExpanded={isOpen}
+      isFullWidth
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx CHANGED Viewed

@@ -140,7 +140,14 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
   }, [selected]);
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle variant="typeahead" onClick={onToggleClick} innerRef={toggleRef} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      variant="typeahead"
+      aria-label="Multi typeahead checkbox menu toggle"
+      onClick={onToggleClick}
+      innerRef={toggleRef}
+      isExpanded={isOpen}
+      isFullWidth
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx CHANGED Viewed

@@ -147,7 +147,14 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
   };
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle variant="typeahead" onClick={onToggleClick} innerRef={toggleRef} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      variant="typeahead"
+      aria-label="Multi typeahead creatable menu toggle"
+      onClick={onToggleClick}
+      innerRef={toggleRef}
+      isExpanded={isOpen}
+      isFullWidth
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/Select/examples/SelectTypeahead.tsx CHANGED Viewed

@@ -143,7 +143,14 @@ export const SelectBasic: React.FunctionComponent = () => {
   };
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label="Typeahead menu toggle"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx CHANGED Viewed

@@ -154,7 +154,14 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
   };
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label="Typeahead creatable menu toggle"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+    >
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/TextInputGroup/TextInputGroupMain.tsx CHANGED Viewed

@@ -53,6 +53,8 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   isExpanded?: boolean;
   /** @beta The id of the element(s) controlled by the input. Required if role has a value of "combobox". */
   'aria-controls'?: string;
+  /** The id of the input element */
+  inputId?: string;
 }
 const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -73,6 +75,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   role,
   isExpanded,
   'aria-controls': ariaControls,
+  inputId,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
@@ -94,6 +97,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
             disabled
             aria-hidden="true"
             value={hint}
+            id={inputId}
           />
         )}
         {icon && <span className={css(styles.textInputGroupIcon)}>{icon}</span>}
@@ -110,6 +114,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           placeholder={inputPlaceHolder}
           name={name}
           aria-activedescendant={ariaActivedescendant}
+          id={inputId}
           {...(role && { role })}
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx CHANGED Viewed

@@ -109,6 +109,14 @@ describe('TextInputGroupMain', () => {
     expect(inputValue).toBeVisible();
   });
+  it('passes the inputId prop to the input', () => {
+    render(<TextInputGroupMain inputId="input-id">Test</TextInputGroupMain>);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveAttribute('id', 'input-id');
+  });
   it('passes the placeholder prop to the input', () => {
     render(<TextInputGroupMain placeholder="placeholder text">Test</TextInputGroupMain>);

package/src/helpers/Popper/Popper.tsx CHANGED Viewed

@@ -449,7 +449,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   React.useEffect(() => {
     // currentPopperContent = {tooltip children} || {dropdown children}
     const currentPopperContent =
-      popper?.props?.children[1]?.props?.children || popper?.props?.children?.props?.children;
+      popper?.props?.children?.[1]?.props?.children || popper?.props?.children?.props?.children;
     setPopperContent(currentPopperContent);
     if (currentPopperContent && popperContent && currentPopperContent !== popperContent) {

package/src/index.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 export * from './components';
-export * from './demos';
 export * from './layouts';
 export * from './helpers';
 export * from './styles';

package/src/next/components/DualListSelector/DualListSelector.tsx ADDED Viewed

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { GenerateId, PickOptional } from '../../../helpers';
+import { DualListSelectorContext } from './DualListSelectorContext';
+/** Acts as a container for all other DualListSelector sub-components when using a
+ * composable dual list selector.
+ */
+export interface DualListSelectorProps {
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** ID of the dual list selector. */
+  id?: string;
+  /** Flag indicating if the dual list selector uses trees instead of simple lists. */
+  isTree?: boolean;
+  /** Content to be rendered in the dual list selector. */
+  children?: React.ReactNode;
+}
+class DualListSelector extends React.Component<DualListSelectorProps> {
+  static displayName = 'DualListSelector';
+  static defaultProps: PickOptional<DualListSelectorProps> = {
+    children: '',
+    isTree: false
+  };
+  constructor(props: DualListSelectorProps) {
+    super(props);
+  }
+  render() {
+    const { className, children, id, isTree, ...props } = this.props;
+    return (
+      <DualListSelectorContext.Provider value={{ isTree }}>
+        <GenerateId>
+          {(randomId) => (
+            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
+              {children}
+            </div>
+          )}
+        </GenerateId>
+      </DualListSelectorContext.Provider>
+    );
+  }
+}
+export { DualListSelector };

package/src/next/components/DualListSelector/DualListSelectorContext.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export const DualListSelectorContext = React.createContext<{
+  isTree?: boolean;
+}>({ isTree: false });
+export const DualListSelectorListContext = React.createContext<{
+  setFocusedOption?: (id: string) => void;
+  isTree?: boolean;
+  ariaLabelledBy?: string;
+  focusedOption?: string;
+  displayOption?: (option: React.ReactNode) => boolean;
+  selectedOptions?: string[] | number[];
+  id?: string;
+  options?: React.ReactNode[];
+  isDisabled?: boolean;
+}>({});
+export const DualListSelectorPaneContext = React.createContext<{
+  isChosen: boolean;
+}>({ isChosen: false });

package/src/next/components/DualListSelector/DualListSelectorControl.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { Button, ButtonVariant } from '../../../components/Button';
+import { Tooltip } from '../../../components/Tooltip';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+/** Renders an individual control button for moving selected options between each
+ * dual list selector pane.
+ */
+export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  /** Content to be rendered in the dual list selector control. */
+  children?: React.ReactNode;
+  /** @hide forwarded ref */
+  innerRef?: React.Ref<any>;
+  /** Flag indicating the control is disabled. */
+  isDisabled?: boolean;
+  /** Additional classes applied to the dual list selector control. */
+  className?: string;
+  /** Callback fired when dual list selector control is selected. */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Accessible label for the dual list selector control. */
+  'aria-label'?: string;
+  /** Content to be displayed in a tooltip on hover of control. */
+  tooltipContent?: React.ReactNode;
+  /** Additional tooltip properties passed to the tooltip. */
+  tooltipProps?: any;
+}
+export const DualListSelectorControlBase: React.FunctionComponent<DualListSelectorControlProps> = ({
+  innerRef,
+  children,
+  className,
+  'aria-label': ariaLabel,
+  isDisabled = true,
+  onClick = () => {},
+  tooltipContent,
+  tooltipProps = {} as any,
+  ...props
+}: DualListSelectorControlProps) => {
+  const privateRef = React.useRef(null);
+  const ref = innerRef || privateRef;
+  return (
+    <div className={css(styles.dualListSelectorControlsItem, className)} {...props}>
+      <Button
+        isDisabled={isDisabled}
+        aria-disabled={isDisabled}
+        variant={ButtonVariant.plain}
+        onClick={onClick}
+        aria-label={ariaLabel}
+        tabIndex={-1}
+        ref={ref}
+      >
+        {children}
+      </Button>
+      {tooltipContent && <Tooltip content={tooltipContent} position="left" triggerRef={ref} {...tooltipProps} />}
+    </div>
+  );
+};
+DualListSelectorControlBase.displayName = 'DualListSelectorControlBase';
+export const DualListSelectorControl = React.forwardRef((props: DualListSelectorControlProps, ref: React.Ref<any>) => (
+  <DualListSelectorControlBase innerRef={ref} {...props} />
+));
+DualListSelectorControl.displayName = 'DualListSelectorControl';