@patternfly/react-core 5.0.0-alpha.61 → 5.0.0-alpha.63

package/src/next/components/Select/Select.tsx

@@ -1,133 +0,0 @@
-import React from 'react';
-import { css } from '@patternfly/react-styles';
-import { Menu, MenuContent, MenuProps } from '../../../components/Menu';
-import { Popper, PopperProps } from '../../../helpers/Popper/Popper';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers';
-
-export interface SelectProps extends MenuProps, OUIAProps {
-  /** Anything which can be rendered in a select */
-  children?: React.ReactNode;
-  /** Classes applied to root element of select */
-  className?: string;
-  /** Flag to indicate if select is open */
-  isOpen?: boolean;
-  /** Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the SelectOption. */
-  selected?: any | any[];
-  /** Renderer for a custom select toggle. Forwards a ref to the toggle. */
-  toggle: (toggleRef: React.RefObject<any>) => React.ReactNode;
-  /** Function callback when user selects an option. */
-  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
-  /** Callback to allow the select component to change the open state of the menu.
-   * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
-  onOpenChange?: (isOpen: boolean) => void;
-  /** Indicates if the select should be without the outer box-shadow */
-  isPlain?: boolean;
-  /** @hide Forwarded ref */
-  innerRef?: React.Ref<HTMLDivElement>;
-  /** z-index of the select menu */
-  zIndex?: number;
-  /** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */
-  role?: string;
-  /** Additional properties to pass to the popper */
-  popperProps?: Partial<PopperProps>;
-}
-
-const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
-  children,
-  className,
-  onSelect,
-  isOpen,
-  selected,
-  toggle,
-  onOpenChange,
-  isPlain,
-  innerRef,
-  zIndex = 9999,
-  role = 'listbox',
-  popperProps,
-  ...props
-}: SelectProps & OUIAProps) => {
-  const localMenuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
-
-  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
-  React.useEffect(() => {
-    const handleMenuKeys = (event: KeyboardEvent) => {
-      // Close the menu on tab or escape if onOpenChange is provided
-      if (
-        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
-        toggleRef.current?.contains(event.target as Node)
-      ) {
-        if (event.key === 'Escape' || event.key === 'Tab') {
-          onOpenChange(false);
-          toggleRef.current?.focus();
-        }
-      }
-    };
-
-    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) {
-        setTimeout(() => {
-          const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
-          firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
-      }
-
-      // If the event is not on the toggle and onOpenChange callback is provided, close the menu
-      if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
-        if (isOpen && !menuRef.current?.contains(event.target as Node)) {
-          onOpenChange(false);
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClick);
-
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClick);
-    };
-  }, [isOpen, menuRef, onOpenChange]);
-
-  const menu = (
-    <Menu
-      role={role}
-      className={css(className)}
-      ref={menuRef}
-      onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
-      isPlain={isPlain}
-      selected={selected}
-      {...getOUIAProps(
-        Select.displayName,
-        props.ouiaId !== undefined ? props.ouiaId : getDefaultOUIAId(Select.displayName),
-        props.ouiaSafe !== undefined ? props.ouiaSafe : true
-      )}
-      {...props}
-    >
-      <MenuContent>{children}</MenuContent>
-    </Menu>
-  );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle(toggleRef)}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        appendTo={containerRef.current || undefined}
-        isVisible={isOpen}
-        zIndex={zIndex}
-        {...popperProps}
-      />
-    </div>
-  );
-};
-
-export const Select = React.forwardRef((props: SelectProps, ref: React.Ref<any>) => (
-  <SelectBase innerRef={ref} {...props} />
-));
-
-Select.displayName = 'Select';

package/src/next/components/Select/SelectGroup.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { css } from '@patternfly/react-styles';
-import { MenuGroupProps, MenuGroup } from '../../../components/Menu';
-
-export interface SelectGroupProps extends Omit<MenuGroupProps, 'ref'> {
-  /** Anything which can be rendered in a select group */
-  children: React.ReactNode;
-  /** Classes applied to root element of select group */
-  className?: string;
-  /** Label of the select group */
-  label?: string;
-}
-
-export const SelectGroup: React.FunctionComponent<SelectGroupProps> = ({
-  children,
-  className,
-  label,
-  ...props
-}: SelectGroupProps) => (
-  <MenuGroup className={css(className)} label={label} {...props}>
-    {children}
-  </MenuGroup>
-);
-SelectGroup.displayName = 'SelectGroup';

package/src/next/components/Select/SelectOption.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { css } from '@patternfly/react-styles';
-import { MenuItemProps, MenuItem } from '../../../components/Menu';
-
-export interface SelectOptionProps extends Omit<MenuItemProps, 'ref'> {
-  /** Anything which can be rendered in a select option */
-  children?: React.ReactNode;
-  /** Classes applied to root element of select option */
-  className?: string;
-  /** Identifies the component in the Select onSelect callback */
-  itemId?: any;
-  /** Indicates the option has a checkbox */
-  hasCheckbox?: boolean;
-  /** Indicates the option is disabled */
-  isDisabled?: boolean;
-  /** Indicates the option is selected */
-  isSelected?: boolean;
-  /** Indicates the option is focused */
-  isFocused?: boolean;
-}
-
-export const SelectOption: React.FunctionComponent<MenuItemProps> = ({
-  children,
-  className,
-  ...props
-}: SelectOptionProps) => (
-  <MenuItem className={css(className)} {...props}>
-    {children}
-  </MenuItem>
-);
-SelectOption.displayName = 'SelectOption';

package/src/next/components/Select/examples/Select.md

@@ -1,38 +0,0 @@
----
-id: Select
-section: components
-subsection: menus
-cssPrefix: pf-c-menu
-propComponents: ['Select', SelectGroup, 'SelectOption', 'SelectList']
-beta: true
-ouia: true
----
-
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-## Examples
-
-### Single
-
-```ts file="./SelectBasic.tsx"
-```
-
-### Grouped single
-
-```ts file="./SelectGrouped.tsx"
-```
-
-### Checkbox
-
-```ts file="./SelectCheckbox.tsx"
-```
-
-### Typeahead
-
-```ts file="./SelectTypeahead.tsx"
-```
-
-### Multiple Typeahead
-
-```ts file="./SelectMultiTypeahead.tsx"
-```