@patternfly/react-core 5.1.1-prerelease.9 → 5.2.0-prerelease.1

package/src/helpers/Popper/Popper.tsx

@@ -45,6 +45,21 @@ const getOppositePlacement = (placement: Placement): any =>
 export const getOpacityTransition = (animationDuration: number) =>
   `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
 
+export const getLanguageDirection = (targetElement: HTMLElement) => {
+  const defaultDirection = 'ltr';
+  let direction = defaultDirection;
+
+  if (targetElement) {
+    direction = getComputedStyle(targetElement).getPropertyValue('direction');
+  }
+
+  if (['ltr', 'rtl'].includes(direction)) {
+    return direction as 'ltr' | 'rtl';
+  }
+
+  return defaultDirection;
+};
+
 export interface PopperProps {
   /**
    * Trigger reference element to which the popper is relatively placed to.
@@ -66,7 +81,7 @@ export interface PopperProps {
   /** popper direction */
   direction?: 'up' | 'down';
   /** popper position */
-  position?: 'right' | 'left' | 'center';
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
   /** Custom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
@@ -177,7 +192,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   trigger,
   popper,
   direction = 'down',
-  position = 'left',
+  position = 'start',
   placement,
   width,
   minWidth = 'trigger',
@@ -226,6 +241,28 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   const refOrTrigger = refElement || triggerElement;
   const showPopper = isVisible || internalIsVisible;
 
+  const triggerParent = ((triggerRef as React.RefObject<any>)?.current || triggerElement)?.parentElement;
+  const languageDirection = getLanguageDirection(triggerParent);
+
+  const internalPosition = React.useMemo<'left' | 'right' | 'center'>(() => {
+    const fixedPositions = { left: 'left', right: 'right', center: 'center' };
+
+    const positionMap = {
+      ltr: {
+        start: 'left',
+        end: 'right',
+        ...fixedPositions
+      },
+      rtl: {
+        start: 'right',
+        end: 'left',
+        ...fixedPositions
+      }
+    };
+
+    return positionMap[languageDirection][position] as 'left' | 'right' | 'center';
+  }, [position, languageDirection]);
+
   const onDocumentClickCallback = React.useCallback(
     (event: MouseEvent) => onDocumentClick(event, refOrTrigger, popperElement),
     [showPopper, triggerElement, refElement, popperElement, onDocumentClick]
@@ -333,15 +370,15 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       return placement;
     }
     let convertedPlacement = direction === 'up' ? 'top' : 'bottom';
-    if (position !== 'center') {
-      convertedPlacement = `${convertedPlacement}-${position === 'right' ? 'end' : 'start'}`;
+    if (internalPosition !== 'center') {
+      convertedPlacement = `${convertedPlacement}-${internalPosition === 'right' ? 'end' : 'start'}`;
     }
     return convertedPlacement as Placement;
   };
-  const getPlacementMemo = React.useMemo(getPlacement, [direction, position, placement]);
+  const getPlacementMemo = React.useMemo(getPlacement, [direction, internalPosition, placement]);
   const getOppositePlacementMemo = React.useMemo(
     () => getOppositePlacement(getPlacement()),
-    [direction, position, placement]
+    [direction, internalPosition, placement]
   );
 
   const widthMods: Modifier<'widthMods', {}> = React.useMemo(

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './demos';
 export * from './layouts';
 export * from './helpers';
 export { BaseSizes, DeviceSizes } from './styles/sizes';

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

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Brand simple brand 1`] = `
-<DocumentFragment>
-  <img
-    alt="brand"
-    class="pf-v5-c-brand"
-    src=""
-  />
-</DocumentFragment>
-`;

package/src/components/Checkbox/examples/checkbox.css

@@ -1,3 +0,0 @@
-.ws-react-c-checkbox .pf-v5-c-check.nested {
-  padding-left: var(--pf-v5-global--spacer--md);
-}

package/src/components/Toolbar/examples/Test.tsx

@@ -1,258 +0,0 @@
-import React from 'react';
-import {
-  MenuToggle,
-  MenuToggleElement,
-  Toolbar,
-  ToolbarItem,
-  ToolbarContent,
-  ToolbarToggleGroup,
-  ToolbarGroup,
-  SearchInput,
-  Select,
-  SelectList,
-  SelectOption,
-  ToolbarFilter,
-  Badge
-} from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-
-export const Test: React.FunctionComponent = () => {
-  const statusChipContainerRef = React.useRef<HTMLDivElement>();
-  const riskChipContainerRef = React.useRef<HTMLDivElement>();
-
-  const [isStatusGroupExpanded, setIsStatusGroupExpanded] = React.useState(false);
-  const [isRiskGroupExpanded, setIsRiskGroupExpanded] = React.useState(false);
-
-  const [isStatusMenuExpanded, setIsStatusExpanded] = React.useState(false);
-  const [isRiskMenuExpanded, setIsRiskExpanded] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState('');
-  const [filters, setFilters] = React.useState({
-    risk: ['Low'],
-    status: ['New', 'Pending']
-  });
-
-  const closeToggleGroups = () => {
-    setIsStatusGroupExpanded(false);
-    setIsRiskGroupExpanded(false);
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('resize', closeToggleGroups); // Resize observer to toggle off expand groups is required to properly reformat toolbar when growing
-    return () => {
-      window.removeEventListener('resize', closeToggleGroups);
-    };
-  }, []);
-
-  const onInputChange = (newValue: string) => {
-    setInputValue(newValue);
-  };
-
-  const onStatusToggle = () => {
-    setIsStatusExpanded(!isStatusMenuExpanded);
-  };
-
-  const onRiskToggle = () => {
-    setIsRiskExpanded(!isRiskMenuExpanded);
-  };
-
-  const onSelect = (type: string, event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => {
-    const checked = (event?.target as HTMLInputElement).checked;
-    setFilters((prev) => {
-      const prevSelections = prev[type];
-      return {
-        ...prev,
-        [type]: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)
-      };
-    });
-  };
-
-  const onStatusSelect = (event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => {
-    onSelect('status', event, selection);
-  };
-
-  const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => {
-    onSelect('risk', event, selection);
-  };
-
-  const onDelete = (type: string, id: string) => {
-    if (type === 'Risk') {
-      setFilters({ risk: filters.risk.filter((fil: string) => fil !== id), status: filters.status });
-    } else if (type === 'Status') {
-      setFilters({ risk: filters.risk, status: filters.status.filter((fil: string) => fil !== id) });
-    } else {
-      setFilters({ risk: [], status: [] });
-    }
-  };
-
-  const onDeleteGroup = (type: string) => {
-    if (type === 'Risk') {
-      setFilters({ risk: [], status: filters.status });
-    } else if (type === 'Status') {
-      setFilters({ risk: filters.risk, status: [] });
-    }
-  };
-
-  const statusToggleGroupItems = (
-    <React.Fragment>
-      <ToolbarItem variant="search-filter">
-        <SearchInput
-          aria-label="Consumer toggle groups example search input"
-          onChange={(_event, value) => onInputChange(value)}
-          value={inputValue}
-          onClear={() => {
-            onInputChange('');
-          }}
-        />
-      </ToolbarItem>
-      <ToolbarGroup variant="filter-group">
-        <ToolbarFilter
-          chips={filters.status}
-          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
-          deleteChipGroup={(category) => onDeleteGroup(category as string)}
-          categoryName="Status"
-          isExpanded={isStatusGroupExpanded}
-          expandableChipContainerRef={statusChipContainerRef} // Required to link the toolbar filter chip group to the custom expandable group
-        >
-          <Select
-            aria-label="Status"
-            role="menu"
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                ref={toggleRef}
-                onClick={onStatusToggle}
-                isExpanded={isStatusMenuExpanded}
-                style={
-                  {
-                    width: '140px'
-                  } as React.CSSProperties
-                }
-              >
-                Status
-                {filters.status.length > 0 && <Badge isRead>{filters.status.length}</Badge>}
-              </MenuToggle>
-            )}
-            onSelect={(event, selection) => onStatusSelect(event, selection as string)}
-            selected={filters.status}
-            isOpen={isStatusMenuExpanded}
-            onOpenChange={(isOpen) => setIsStatusExpanded(isOpen)}
-          >
-            <SelectList>
-              <SelectOption hasCheckbox key="statusNew" value="New" isSelected={filters.status.includes('New')}>
-                New
-              </SelectOption>
-              <SelectOption
-                hasCheckbox
-                key="statusPending"
-                value="Pending"
-                isSelected={filters.status.includes('Pending')}
-              >
-                Pending
-              </SelectOption>
-              <SelectOption
-                hasCheckbox
-                key="statusRunning"
-                value="Running"
-                isSelected={filters.status.includes('Running')}
-              >
-                Running
-              </SelectOption>
-              <SelectOption
-                hasCheckbox
-                key="statusCancelled"
-                value="Cancelled"
-                isSelected={filters.status.includes('Cancelled')}
-              >
-                Cancelled
-              </SelectOption>
-            </SelectList>
-          </Select>
-        </ToolbarFilter>
-      </ToolbarGroup>
-    </React.Fragment>
-  );
-
-  const riskToggleGroupItems = (
-    <ToolbarGroup variant="filter-group">
-      <ToolbarFilter
-        chips={filters.risk}
-        deleteChip={(category, chip) => onDelete(category as string, chip as string)}
-        categoryName="Risk"
-        isExpanded={isRiskGroupExpanded}
-        expandableChipContainerRef={riskChipContainerRef} // Required to link the toolbar filter chip group to the custom expandable group
-      >
-        <Select
-          aria-label="Risk"
-          role="menu"
-          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle
-              ref={toggleRef}
-              onClick={onRiskToggle}
-              isExpanded={isRiskMenuExpanded}
-              style={
-                {
-                  width: '140px'
-                } as React.CSSProperties
-              }
-            >
-              Risk
-              {filters.risk.length > 0 && <Badge isRead>{filters.risk.length}</Badge>}
-            </MenuToggle>
-          )}
-          onSelect={(event, selection) => onRiskSelect(event, selection as string)}
-          selected={filters.risk}
-          isOpen={isRiskMenuExpanded}
-          onOpenChange={(isOpen) => setIsRiskExpanded(isOpen)}
-        >
-          <SelectList>
-            <SelectOption hasCheckbox key="riskLow" value="Low" isSelected={filters.risk.includes('Low')}>
-              Low
-            </SelectOption>
-            <SelectOption hasCheckbox key="riskMedium" value="Medium" isSelected={filters.risk.includes('Medium')}>
-              Medium
-            </SelectOption>
-            <SelectOption hasCheckbox key="riskHigh" value="High" isSelected={filters.risk.includes('High')}>
-              High
-            </SelectOption>
-          </SelectList>
-        </Select>
-      </ToolbarFilter>
-    </ToolbarGroup>
-  );
-
-  return (
-    <Toolbar id="toolbar-multiple-toggle-groups" className="pf-m-toggle-group-container">
-      <ToolbarContent>
-        <ToolbarToggleGroup
-          isExpanded={isStatusGroupExpanded} // Required to control expanded state
-          onToggle={() => {
-            setIsStatusGroupExpanded(!isStatusGroupExpanded);
-            setIsRiskGroupExpanded(false);
-          }} // Required to control expanded state
-          toggleIcon={<FilterIcon />}
-          breakpoint="md"
-          chipContainerRef={statusChipContainerRef}
-          showClearFiltersButton
-          clearAllFilters={() => onDeleteGroup('Status')}
-          clearFiltersButtonText="Clear status filter"
-        >
-          {statusToggleGroupItems}
-        </ToolbarToggleGroup>
-        <ToolbarToggleGroup
-          isExpanded={isRiskGroupExpanded} // Required to control expanded state
-          onToggle={() => {
-            setIsRiskGroupExpanded(!isRiskGroupExpanded);
-            setIsStatusGroupExpanded(false);
-          }} // Required to control expanded state
-          toggleIcon={<FilterIcon />}
-          breakpoint="xl"
-          chipContainerRef={riskChipContainerRef}
-          showClearFiltersButton
-          clearAllFilters={() => onDeleteGroup('Risk')}
-          clearFiltersButtonText={'Clear risk filter'}
-        >
-          {riskToggleGroupItems}
-        </ToolbarToggleGroup>
-      </ToolbarContent>
-    </Toolbar>
-  );
-};

package/src/demos/examples/DashboardHeader.js

@@ -1,220 +0,0 @@
-import React from 'react';
-import {
-  Avatar,
-  Brand,
-  Button,
-  ButtonVariant,
-  Divider,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownList,
-  Masthead,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand,
-  MastheadContent,
-  MenuToggle,
-  Toolbar,
-  ToolbarContent,
-  ToolbarGroup,
-  ToolbarItem,
-  PageToggleButton
-} from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
-
-export default class DashboardHeader extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      isFullKebabDropdownOpen: false,
-      activeItem: 0
-    };
-
-    this.onDropdownToggle = () => {
-      this.setState((prevState) => ({
-        isDropdownOpen: !prevState.isDropdownOpen
-      }));
-    };
-
-    this.onDropdownSelect = () => {
-      this.setState({
-        isDropdownOpen: false
-      });
-    };
-
-    this.onKebabDropdownToggle = () => {
-      this.setState((prevState) => ({
-        isKebabDropdownOpen: !prevState.isKebabDropdownOpen
-      }));
-    };
-
-    this.onKebabDropdownSelect = () => {
-      this.setState({
-        isKebabDropdownOpen: false
-      });
-    };
-
-    this.onFullKebabToggle = () => {
-      this.setState((prevState) => ({
-        isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen
-      }));
-    };
-
-    this.onFullKebabSelect = () => {
-      this.setState({
-        isFullKebabDropdownOpen: false
-      });
-    };
-  }
-
-  render() {
-    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen } = this.state;
-    const { notificationBadge } = this.props;
-
-    const kebabDropdownItems = (
-      <>
-        <DropdownItem>
-          <CogIcon /> Settings
-        </DropdownItem>
-        <DropdownItem>
-          <HelpIcon /> Help
-        </DropdownItem>
-      </>
-    );
-    const userDropdownItems = (
-      <>
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user">User management</DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </>
-    );
-
-    const headerToolbar = (
-      <Toolbar id="toolbar" isFullHeight isStatic>
-        <ToolbarContent>
-          <ToolbarGroup
-            variant="icon-button-group"
-            align={{ default: 'alignRight' }}
-            spacer={{ default: 'spacerNone', md: 'spacerMd' }}
-          >
-            {notificationBadge ? (
-              notificationBadge
-            ) : (
-              <ToolbarItem>
-                <Button
-                  aria-label="Notifications"
-                  variant={ButtonVariant.plain}
-                  icon={<BellIcon />}
-                  onClick={() => {}}
-                />
-              </ToolbarItem>
-            )}
-            <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
-              <ToolbarItem>
-                <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
-              </ToolbarItem>
-            </ToolbarGroup>
-            <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-              <Dropdown
-                isOpen={isKebabDropdownOpen}
-                onSelect={this.onKebabDropdownSelect}
-                onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
-                popperProps={{ position: 'right' }}
-                toggle={(toggleRef) => (
-                  <MenuToggle
-                    ref={toggleRef}
-                    isExpanded={isKebabDropdownOpen}
-                    onClick={this.onKebabDropdownToggle}
-                    variant="plain"
-                    aria-label="Settings and help"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
-                )}
-              >
-                <DropdownList>{kebabDropdownItems}</DropdownList>
-              </Dropdown>
-            </ToolbarItem>
-            <ToolbarItem visibility={{ md: 'hidden' }}>
-              <Dropdown
-                isOpen={isFullKebabDropdownOpen}
-                onSelect={this.onFullKebabSelect}
-                onOpenChange={(isOpen) => this.setState({ isFullKebabDropdownOpen: isOpen })}
-                popperProps={{ position: 'right' }}
-                toggle={(toggleRef) => (
-                  <MenuToggle
-                    ref={toggleRef}
-                    isExpanded={isFullKebabDropdownOpen}
-                    onClick={this.onFullKebabToggle}
-                    variant="plain"
-                    aria-label="Toolbar menu"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
-                )}
-              >
-                <DropdownGroup key="group 2" aria-label="User actions">
-                  <DropdownList>{userDropdownItems}</DropdownList>
-                </DropdownGroup>
-                <Divider />
-                <DropdownList>{kebabDropdownItems}</DropdownList>
-              </Dropdown>
-            </ToolbarItem>
-          </ToolbarGroup>
-          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
-            <Dropdown
-              isOpen={isDropdownOpen}
-              onSelect={this.onDropdownSelect}
-              onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
-              popperProps={{ position: 'right' }}
-              toggle={(toggleRef) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  isExpanded={isDropdownOpen}
-                  onClick={this.onDropdownToggle}
-                  icon={<Avatar src={imgAvatar} alt="" />}
-                  isFullHeight
-                >
-                  Ned Username
-                </MenuToggle>
-              )}
-            >
-              <DropdownList>{userDropdownItems}</DropdownList>
-            </Dropdown>
-          </ToolbarItem>
-        </ToolbarContent>
-      </Toolbar>
-    );
-
-    const masthead = (
-      <Masthead>
-        <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
-        <MastheadMain>
-          <MastheadBrand>
-            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          </MastheadBrand>
-        </MastheadMain>
-        <MastheadContent>{headerToolbar}</MastheadContent>
-      </Masthead>
-    );
-
-    return masthead;
-  }
-}