@patternfly/react-core 4.262.0 → 4.264.0

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -26,8 +26,6 @@ import {
   OverflowMenuItem,
   PageSection,
   PageSectionVariants,
-  Pagination,
-  PaginationVariant,
   Progress,
   ProgressSize,
   Select,
@@ -70,13 +68,6 @@ interface Repository {
 }
 
 export const TablesAndTabs = () => {
-  // tab properties
-  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
-  // Toggle currently active tab
-  const handleTabClick = (tabIndex: number) => {
-    setActiveTabKey(tabIndex);
-  };
-
   // secondary tab properties
   const [secondaryActiveTabKey, setSecondaryActiveTabKey] = React.useState<number>(10);
   const handleSecondaryTabClick = (tabIndex: number) => {
@@ -84,7 +75,7 @@ export const TablesAndTabs = () => {
   };
 
   // drawer properties
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = React.useState<boolean>(true);
 
   // table properties
   // In real usage, this data would come from some external source like an API via props.
@@ -116,7 +107,7 @@ export const TablesAndTabs = () => {
   const allRowsSelected = selectedRepoNames.length === repositories.length;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
-  const [rowClicked, setRowClicked] = React.useState<string>(null);
+  const [rowClicked, setRowClicked] = React.useState<string>('Node 1');
   const isRowClicked = (repo: Repository) => rowClicked === repo.name;
 
   const defaultActions: IAction[] = [
@@ -204,15 +195,6 @@ export const TablesAndTabs = () => {
             />
           </OverflowMenuControl>
         </OverflowMenu>
-        <ToolbarItem variant="pagination">
-          <Pagination
-            itemCount={36}
-            widgetId="pagination-options-menu-bottom"
-            page={1}
-            variant={PaginationVariant.top}
-            isCompact
-          />
-        </ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );
@@ -239,8 +221,8 @@ export const TablesAndTabs = () => {
           <Tr
             key={repo.name}
             onRowClick={event => {
-              if ((event.target as HTMLInputElement).type !== 'checkbox') {
-                setRowClicked(rowClicked === repo.name ? null : repo.name);
+              if ((event?.target as HTMLInputElement).type !== 'checkbox') {
+                setRowClicked(rowClicked === repo.name ? '' : repo.name);
                 setIsExpanded(!isRowClicked(repo));
               }
             }}
@@ -301,7 +283,7 @@ export const TablesAndTabs = () => {
         <DrawerActions>
           <DrawerCloseButton
             onClick={() => {
-              setRowClicked(null);
+              setRowClicked('');
               setIsExpanded(false);
             }}
           />
@@ -383,18 +365,7 @@ export const TablesAndTabs = () => {
   const tabContent = (
     <Drawer isExpanded={isExpanded} isInline>
       <DrawerContent panelContent={panelContent}>
-        <DrawerContentBody>
-          {toolbar}
-          <Divider />
-          {tableComposable}
-          <Pagination
-            id="page-layout-table-column-management-action-toolbar-bottom"
-            itemCount={36}
-            widgetId="pagination-options-menu-bottom"
-            page={1}
-            variant={PaginationVariant.bottom}
-          />
-        </DrawerContentBody>
+        <DrawerContentBody>{tableComposable}</DrawerContentBody>
       </DrawerContent>
     </Drawer>
   );
@@ -407,24 +378,10 @@ export const TablesAndTabs = () => {
             Nodes
           </Title>
         </PageSection>
-        <PageSection type="tabs" variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-          <Tabs
-            activeKey={activeTabKey}
-            onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
-            usePageInsets
-            id="tabs-table-tabs-list"
-          >
-            <Tab eventKey={0} title={<TabTitleText>Nodes</TabTitleText>} tabContentId={`tabContent${0}`} />
-            <Tab eventKey={1} title={<TabTitleText>Node connectors</TabTitleText>} tabContentId={`tabContent${1}`} />
-          </Tabs>
-        </PageSection>
         <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-          <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
-            <TabContentBody>{tabContent}</TabContentBody>
-          </TabContent>
-          <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
-            <TabContentBody>Node connectors panel</TabContentBody>
-          </TabContent>
+          {toolbar}
+          <Divider />
+          {tabContent}
         </PageSection>
       </React.Fragment>
     </DashboardWrapper>

package/src/helpers/Popper/Popper.tsx

@@ -311,7 +311,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     [popperMatchesTriggerWidth]
   );
 
-  const { styles: popperStyles, attributes, update } = usePopper(refOrTrigger, popperElement, {
+  const { styles: popperStyles, attributes, update, forceUpdate } = usePopper(refOrTrigger, popperElement, {
     placement: getPlacementMemo,
     modifiers: [
       {
@@ -340,6 +340,10 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     ]
   });
 
+  React.useEffect(() => {
+    forceUpdate && forceUpdate();
+  }, [popper]);
+
   // Returns the CSS modifier class in order to place the Popper's arrow properly
   // Depends on the position of the Popper relative to the reference element
   const modifierFromPopperPosition = () => {
@@ -383,7 +387,11 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   let popperPortal;
   if (removeFindDomNode) {
     // If removeFindDomNode is passed, use the removeFindDomNode method of wrapping divs
-    popperPortal = <div ref={node => setPopperElement(node?.firstElementChild as HTMLElement)}>{menuWithPopper}</div>;
+    popperPortal = (
+      <div style={{ display: 'contents' }} ref={node => setPopperElement(node?.firstElementChild as HTMLElement)}>
+        {menuWithPopper}
+      </div>
+    );
   } else if (popperRef) {
     // If removeFindDomNode is not passed and popperRef is passed, use the popperRef method
     popperPortal = menuWithPopper;
@@ -400,7 +408,9 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
         <FindRefWrapper onFoundRef={(foundRef: any) => setTriggerElement(foundRef)}>{trigger}</FindRefWrapper>
       )}
       {!reference && trigger && React.isValidElement(trigger) && removeFindDomNode && (
-        <div ref={node => setTriggerElement(node?.firstElementChild as HTMLElement)}>{trigger}</div>
+        <div style={{ display: 'contents' }} ref={node => setTriggerElement(node?.firstElementChild as HTMLElement)}>
+          {trigger}
+        </div>
       )}
       {ready && isVisible && ReactDOM.createPortal(popperPortal, getTarget())}
     </>

package/src/demos/examples/Tabs/GrayTabs.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import {
-  PageSection,
-  Tabs,
-  Tab,
-  TabContent,
-  TabContentBody,
-  TabTitleText,
-  Title,
-  Grid,
-  GridItem,
-  Flex,
-  FlexItem,
-  Card,
-  CardBody,
-  CardHeader
-} from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-export const GrayTabsDemo: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState<string | number>(0);
-
-  // Toggle currently active tab
-  const handleTabClick = (_: React.MouseEvent, tabIndex: string | number) => setActiveTabKey(tabIndex);
-
-  // Toggle currently active nested tab
-  const handleNestedTabClick = (_: React.MouseEvent, tabIndex: string | number) => setActiveNestedTabKey(tabIndex);
-
-  const tabContent = (
-    <Grid hasGutter>
-      <GridItem xl={8} md={6}>
-        <Card>
-          <CardHeader>
-            <Title headingLevel="h2">Status</Title>
-          </CardHeader>
-          <CardBody>
-            <Flex direction={{ default: 'column' }}>
-              <FlexItem>
-                <Tabs
-                  activeKey={activeNestedTabKey}
-                  isSecondary
-                  onSelect={handleNestedTabClick}
-                  id="nested-tabs-example-tabs-list"
-                >
-                  <Tab eventKey={10} title={<TabTitleText>Cluster</TabTitleText>} tabContentId={`tabContent${10}`} />
-                  <Tab
-                    eventKey={11}
-                    title={<TabTitleText>Control plane</TabTitleText>}
-                    tabContentId={`tabContent${11}`}
-                  />
-                  <Tab eventKey={12} title={<TabTitleText>Operators</TabTitleText>} tabContentId={`tabContent${12}`} />
-                  <Tab
-                    eventKey={13}
-                    title={<TabTitleText>Virtualization</TabTitleText>}
-                    tabContentId={`tabContent${13}`}
-                  />
-                </Tabs>
-              </FlexItem>
-              <FlexItem>
-                <TabContent
-                  key={10}
-                  eventKey={10}
-                  id={`tabContent${10}`}
-                  activeKey={activeNestedTabKey}
-                  hidden={10 !== activeNestedTabKey}
-                >
-                  <TabContentBody>
-                    {
-                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in odio porttitor, feugiat risus in, feugiat arcu. Nullam euismod enim eget fringilla condimentum. Maecenas tincidunt et metus id aliquet. Integer et fermentum purus. Nulla tempor velit arcu, vitae semper purus iaculis at. Sed malesuada auctor luctus. Pellentesque et leo urna. Aliquam vitae felis congue lacus mattis fringilla. Nullam et ultricies erat, sed dignissim elit. Cras mattis pulvinar aliquam. In ac est nulla. Pellentesque fermentum nibh ac sapien porta, ut congue orci aliquam. Sed nisl est, tempor eu pharetra eget, ullamcorper ut augue. Vestibulum eleifend libero eu nulla cursus lacinia.'
-                    }
-                  </TabContentBody>
-                </TabContent>
-                <TabContent
-                  key={11}
-                  eventKey={11}
-                  id={`tabContent${11}`}
-                  activeKey={activeNestedTabKey}
-                  hidden={11 !== activeNestedTabKey}
-                >
-                  <TabContentBody>Control plane panel</TabContentBody>
-                </TabContent>
-                <TabContent
-                  key={12}
-                  eventKey={12}
-                  id={`tabContent${12}`}
-                  activeKey={activeNestedTabKey}
-                  hidden={12 !== activeNestedTabKey}
-                >
-                  <TabContentBody>Operators panel</TabContentBody>
-                </TabContent>
-                <TabContent
-                  key={13}
-                  eventKey={13}
-                  id={`tabContent${13}`}
-                  activeKey={activeNestedTabKey}
-                  hidden={13 !== activeNestedTabKey}
-                >
-                  <TabContentBody>Virtualization panel</TabContentBody>
-                </TabContent>
-              </FlexItem>
-            </Flex>
-          </CardBody>
-        </Card>
-      </GridItem>
-      <GridItem xl={4} md={6}>
-        <Flex direction={{ default: 'column' }} className="pf-u-h-100">
-          <FlexItem flex={{ default: 'flex_1' }}>
-            <Card isFullHeight>
-              <CardHeader>
-                <Title headingLevel="h2">Title of Card</Title>
-              </CardHeader>
-            </Card>
-          </FlexItem>
-          <FlexItem flex={{ default: 'flex_1' }}>
-            <Card isFullHeight>
-              <CardHeader>
-                <Title headingLevel="h2">Title of Card</Title>
-              </CardHeader>
-            </Card>
-          </FlexItem>
-        </Flex>
-      </GridItem>
-    </Grid>
-  );
-
-  return (
-    <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited>
-        <Tabs
-          activeKey={activeTabKey}
-          onSelect={handleTabClick}
-          usePageInsets
-          isBox
-          variant="light300"
-          id="open-tabs-example-tabs-list"
-        >
-          <Tab eventKey={0} title={<TabTitleText>Cluster 1</TabTitleText>} tabContentId={`tabContent${0}`} />
-          <Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
-        </Tabs>
-      </PageSection>
-      <PageSection isWidthLimited>
-        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
-          <TabContentBody>{tabContent}</TabContentBody>
-        </TabContent>
-        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
-          <TabContentBody>Cluster 2 panel</TabContentBody>
-        </TabContent>
-      </PageSection>
-    </DashboardWrapper>
-  );
-};