@patternfly/react-core 6.5.0-prerelease.25 → 6.5.0-prerelease.27

package/helpers/package.json

@@ -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":"6.5.0-prerelease.24","private":true}
+{"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":"6.5.0-prerelease.26","private":true}

package/layouts/package.json

@@ -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":"6.5.0-prerelease.24","private":true}
+{"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":"6.5.0-prerelease.26","private":true}

package/next/package.json

@@ -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":"6.5.0-prerelease.24","private":true}
+{"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":"6.5.0-prerelease.26","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.25",
+  "version": "6.5.0-prerelease.27",
   "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,8 +46,8 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.11",
-    "@patternfly/react-styles": "^6.5.0-prerelease.9",
+    "@patternfly/react-icons": "^6.5.0-prerelease.12",
+    "@patternfly/react-styles": "^6.5.0-prerelease.10",
     "@patternfly/react-tokens": "^6.5.0-prerelease.9",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "e9f9e1fc3f1dfdc3f9474618a303d2f811ea06c5"
+  "gitHead": "097dae1319f634100648d173b0334f97308dc4d2"
 }

package/src/components/Label/Label.tsx

@@ -338,7 +338,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     );
   }
 
-  const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any;
+  const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
 
   return (
     <LabelComponent

package/src/demos/Banner.md

@@ -11,148 +11,11 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Basic sticky banner
 
-```js isFullscreen
-import { Fragment } from 'react';
-import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';
-
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { css } from '@patternfly/react-styles';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
-
-class BannerDemo extends React.Component {
-  render() {
-    const banner = (
-      <Banner isSticky>
-        <Flex
-          justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-          flexWrap={{ default: 'nowrap' }}
-        >
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>
-            This message is sticky to the top of the page.
-          </div>
-          <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-        </Flex>
-      </Banner>
-    );
-    return (
-      <Fragment>
-        <DashboardWrapper banner={banner} breadcrumb={null}>
-          <PageSection aria-labelledby="main-title">
-            <Content>
-              <h1 id="main-title">Main title</h1>
-              <p>
-                Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
-                of it’s relative line height of 1.5.
-              </p>
-            </Content>
-          </PageSection>
-          <PageSection aria-label='Cards gallery'>
-            <Gallery hasGutter>
-              {Array.from({ length: 30 }).map((_value, index) => (
-                <GalleryItem key={index}>
-                  <Card key={index}>
-                    <CardBody>This is a card</CardBody>
-                  </Card>
-                </GalleryItem>
-              ))}
-            </Gallery>
-          </PageSection>
-        </DashboardWrapper>
-      </Fragment>
-    );
-  }
-}
+```ts file="examples/Banner/BannerBasicSticky.tsx" isFullscreen
 ```
 
 ### Top and bottom banner
 
-```js isFullscreen
-import { Fragment } from 'react';
-import {
-  Banner,
-  Card,
-  CardBody,
-  Flex,
-  FlexItem,
-  Gallery,
-  GalleryItem,
-  PageSection,
-  Content
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { css } from '@patternfly/react-styles';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
+```ts file="examples/Banner/BannerTopBottom.tsx" isFullscreen
 
-class BannerDemo extends React.Component {
-  render() {
-    return (
-      <Fragment>
-        <Flex
-          direction={{ default: 'column' }}
-          flexWrap={{ default: 'nowrap' }}
-          spaceItems={{ default: 'spaceItemsNone' }}
-          style={{ height: '100%' }}
-        >
-          <FlexItem>
-            <Banner isSticky>
-              <Flex
-                justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-                flexWrap={{ default: 'nowrap' }}
-              >
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                  This message is sticky to the top of the page.
-                </div>
-                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-              </Flex>
-            </Banner>
-          </FlexItem>
-          <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
-            <DashboardWrapper breadcrumb={null}>
-              <PageSection aria-labelledby="main-title">
-                <Content>
-                  <h1 id='main-title'>Main title</h1>
-                  <p>
-                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
-                    <br />
-                    of it’s relative line height of 1.5.
-                  </p>
-                </Content>
-              </PageSection>
-              <PageSection aria-label='Cards gallery'>
-                <Gallery hasGutter>
-                  {Array.from({ length: 30 }).map((_value, index) => (
-                    <GalleryItem key={index}>
-                      <Card key={index}>
-                        <CardBody>This is a card</CardBody>
-                      </Card>
-                    </GalleryItem>
-                  ))}
-                </Gallery>
-              </PageSection>
-            </DashboardWrapper>
-          </FlexItem>
-          <FlexItem>
-            <Banner isSticky>
-              <Flex
-                justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-                flexWrap={{ default: 'nowrap' }}
-              >
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                  This message is sticky to the bottom of the page.
-                </div>
-                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-              </Flex>
-            </Banner>
-          </FlexItem>
-        </Flex>
-      </Fragment>
-    );
-  }
-}
 ```

package/src/demos/DateTimePicker.md

@@ -14,96 +14,12 @@ In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calen
 
 ### Date and time picker
 
-```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
+```ts file="examples/DateTimePicker/DateTimePicker.tsx"
 
 ```
 
 ### Date and time range picker
 
-```js
-import { useState } from 'react';
-import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';
-
-DateTimeRangePicker = () => {
-  const [from, setFrom] = useState();
-  const [to, setTo] = useState();
-
-  const toValidator = (date) => {
-    return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
-      ? ''
-      : 'The "to" date must be after the "from" date';
-  };
-
-  const onFromDateChange = (_event, inputDate, newFromDate) => {
-    if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
-      newFromDate.setHours(from.getHours());
-      newFromDate.setMinutes(from.getMinutes());
-    }
-    if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
-      setFrom(new Date(newFromDate));
-    }
-  };
-
-  const onFromTimeChange = (_event, time, hour, minute) => {
-    if (isValidDate(from)) {
-      const updatedFromDate = new Date(from);
-      updatedFromDate.setHours(hour);
-      updatedFromDate.setMinutes(minute);
-      setFrom(updatedFromDate);
-    }
-  };
-
-  const onToDateChange = (_event, inputDate, newToDate) => {
-    if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
-      newToDate.setHours(to.getHours());
-      newToDate.setMinutes(to.getMinutes());
-    }
-    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
-      setTo(newToDate);
-    }
-  };
-
-  const onToTimeChange = (_event, time, hour, minute) => {
-    if (isValidDate(to)) {
-      const updatedToDate = new Date(to);
-      updatedToDate.setHours(hour);
-      updatedToDate.setMinutes(minute);
-      setTo(updatedToDate);
-    }
-  };
+```ts file="examples/DateTimePicker/DateTimeRangePicker.tsx"
 
-  return (
-    <Flex direction={{ default: 'column', lg: 'row' }}>
-      <FlexItem>
-        <InputGroup>
-          <InputGroupItem>
-            <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
-          </InputGroupItem>
-          <InputGroupItem>
-            <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
-          </InputGroupItem>
-        </InputGroup>
-      </FlexItem>
-      <FlexItem>to</FlexItem>
-      <FlexItem>
-        <InputGroup>
-          <InputGroupItem>
-            <DatePicker
-              value={isValidDate(to) ? yyyyMMddFormat(to) : to}
-              onChange={onToDateChange}
-              isDisabled={!isValidDate(from)}
-              rangeStart={from}
-              validators={[toValidator]}
-              aria-label="End date"
-              placeholder="YYYY-MM-DD"
-            />
-          </InputGroupItem>
-          <InputGroupItem>
-            <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
-          </InputGroupItem>
-        </InputGroup>
-      </FlexItem>
-    </Flex>
-  );
-}
 ```

package/src/demos/JumpLinks.md

@@ -21,134 +21,7 @@ JumpLinks has a scrollspy built-in to make your implementation easier. When impl
 
 This demo expands on the previous to show the JumpLinks in a vertical layout with subsections. It scrolls the [Page](/components/page)'s `mainContainerId` with an `offset` calculated based on the height of the masthead and the nav list when it appears above the content. The headings are given a tab index to allow the jump links to focus on them.
 
-```js isFullscreen
-import { useEffect, useState } from 'react';
-import {
-  PageSection,
-  JumpLinks,
-  JumpLinksItem,
-  JumpLinksList,
-  PageGroup,
-  Sidebar,
-  SidebarContent,
-  SidebarPanel,
-  Switch,
-  Title,
-  Content,
-  getResizeObserver
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
-
-ScrollspyH2 = () => {
-  const headings = [1, 2, 3, 4, 5];
-
-  const [isVertical, setIsVertical] = useState(true);
-  const [offsetHeight, setOffsetHeight] = useState(10);
-  const offsetForPadding = 10;
-  let masthead;
-
-  // Update offset based on the masthead and jump links nav heights.
-  useEffect(() => {
-    masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
-
-    if (isVertical) {
-      setOffsetHeight(masthead.offsetHeight + offsetForPadding);
-    } else {
-      // Append jump links nav height to the masthead height when value exists.
-      const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
-      jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
-    }
-
-    
-  }, [isVertical]);
-
-  getResizeObserver(
-    document.getElementsByClassName(mastheadStyles.masthead)[0],
-    () => {
-      if (isVertical) {
-        setOffsetHeight(masthead.offsetHeight + offsetForPadding);
-      } else {
-        // Append jump links nav height to the masthead height when value exists.
-        const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
-        jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
-      }
-    },
-    true
-  );
-
-  return (
-    <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
-      <PageSection aria-labelledby='main-title'>
-        <Title headingLevel="h1" size="2xl" id='main-title'>
-          Main title
-        </Title>
-        <Switch
-          id="is-vertical"
-          label="Vertical jump links"
-          isChecked={isVertical}
-          onChange={(_event, check) => setIsVertical(check)}
-        />
-      </PageSection>
-      <PageSection padding={{ default: 'noPadding' }} >
-        <Sidebar hasGutter orientation={!isVertical && 'stack'}>
-          <SidebarPanel variant="sticky">
-            <PageSection aria-label='Jump links navigation'>
-              <JumpLinks
-                isVertical={isVertical}
-                isCentered={!isVertical}
-                label="Jump to section"
-                scrollableSelector=".pf-v6-c-page__main-container"
-                offset={offsetHeight}
-                expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }}
-                isExpanded
-              >
-                {headings.map(i => (
-                  <JumpLinksItem key={i} href={`#heading-${i}`}>
-                    {`Heading ${i}`}
-                    <JumpLinksList></JumpLinksList>
-                  </JumpLinksItem>
-                ))}
-              </JumpLinks>
-            </PageSection>
-          </SidebarPanel>
-          <SidebarContent hasNoBackground>
-            <PageSection aria-label='Main content'>
-              <Content>
-                {headings.map(i => (
-                  <div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>
-                    <h2 id={`heading-${i}`} tabIndex={-1}>
-                      {`Heading ${i}`}
-                    </h2>
-                    <p>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-                      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
-                      in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                    <br />
-                    <p>
-                      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-                      deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
-                      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
-                      fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
-                      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
-                      omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
-                      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-                      recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-                      maiores alias consequatur aut perferendis doloribus asperiores repellat.
-                    </p>
-                  </div>
-                ))}
-              </Content>
-            </PageSection>
-          </SidebarContent>
-        </Sidebar>
-      </PageSection>
-    </DashboardWrapper>
-  );
-};
+```ts file="examples/JumpLinks/JumpLinksScrollspy.tsx" isFullscreen 
 ```
 
 ### With drawer
@@ -157,5 +30,5 @@ This demo shows how jump links can be used in combination with a drawer.
 
 This demo uses a `scrollableRef` prop on the JumpLinks component, which is a React ref to the `DrawerContent` component.
 
-```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
+```ts file="examples/JumpLinks/JumpLinksWithDrawer.tsx" isFullscreen
 ```

package/src/demos/ProgressDemo.md

@@ -9,77 +9,14 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib
 
 ### Basic
 
-```js
-import { useState } from 'react';
-import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
-import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-
-ProgressStepperDemo = () => {
-  const [currentValue, setCurrentValue] = useState(0);
-
-  const onProgressUpdate = (nextValue) => {
-    setCurrentValue(nextValue);
-  };
+```ts file="examples/Progress/ProgressBasic.tsx"
 
-  return (
-    <Stack>
-      <StackItem>
-        <Button onClick={() => onProgressUpdate(currentValue - 10)} isDisabled={currentValue === 0}>
-          Decrease value
-        </Button>{' '}
-        <Button onClick={() => onProgressUpdate(currentValue + 10)} isDisabled={currentValue === 100}>
-          Increase value
-        </Button>
-        <br />
-        <br />
-      </StackItem>
-      <StackItem>
-        <div className={accessibilityStyles.screenReader} aria-live="polite">
-          {`Progress value is ${currentValue}%.`}
-        </div>
-        <Progress value={currentValue} title="Title" />
-      </StackItem>
-    </Stack>
-  );
-};
 ```
 
 ### With only increasing progress
 
 Sometimes a progress bar should only show increases to progress state. In this case, before the next value is set it should be checked against the current progress. The `Decrease progress` button attempts to set a lower progress value, simulating an update to a progress state that isn't desired, but won't change the progress state due to this check.
 
-```js
-import { useState } from 'react';
-import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
-
-ProgressStepperDemo = () => {
-  const [currentValue, setCurrentValue] = useState(0);
-
-  const onProgressUpdate = (nextValue) => {
-    if (nextValue > currentValue) {
-      setCurrentValue(nextValue);
-    }
-  };
+```ts file="examples/Progress/ProgressWithOnlyIncreasing.tsx"
 
-  return (
-    <Stack>
-      <StackItem>
-        <Button onClick={() => onProgressUpdate(currentValue - 10)} isDisabled={currentValue === 0}>
-          Decrease value
-        </Button>{' '}
-        <Button onClick={() => onProgressUpdate(currentValue + 10)} isDisabled={currentValue === 100}>
-          Increase value
-        </Button>
-        <br />
-        <br />
-      </StackItem>
-      <StackItem>
-          <div className={accessibilityStyles.screenReader} aria-live="polite">
-          {`Progress value is ${currentValue}%.`}
-        </div>
-        <Progress value={currentValue} title="Title" />
-      </StackItem>
-    </Stack>
-  );
-};
 ```

package/src/demos/ProgressStepperDemo.md

@@ -10,77 +10,6 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib
 
 ### Basic
 
-```js
-import { useState } from 'react';
-import { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core';
-import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-
-ProgressStepperDemo = () => {
-  const [currentStep, setCurrentStep] = useState(0);
-
-  const steps = [
-    { title: 'First step', id: 'step1' },
-    { title: 'Second step', id: 'step2' },
-    { title: 'Third step', id: 'step3' },
-    { title: 'Fourth step', id: 'step4' },
-    { title: 'Fifth step', id: 'step5' }
-  ];
-
-  const onStepForward = event => {
-    const next = currentStep + 1;
-    setCurrentStep(next <= 5 ? next : 4);
-  };
-
-  const onStepBack = event => {
-    const next = currentStep - 1;
-    setCurrentStep(next > 0 ? next : 0);
-  };
-
-  return (
-    <Stack>
-      <StackItem>
-        <Button onClick={onStepBack} isDisabled={currentStep === 0}>
-          Step back
-        </Button>{' '}
-        <Button onClick={onStepForward} isDisabled={currentStep === 5}>
-          Step forward
-        </Button>
-        <br />
-        <br />
-      </StackItem>
-      <StackItem>
-        <div className={accessibilityStyles.screenReader} aria-live="polite">
-          {steps[currentStep] && `On ${steps[currentStep].title}.`}
-          {steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`}
-        </div>
-        <ProgressStepper>
-          {steps.map((step, index) => {
-            let variant = 'pending';
-            let ariaLabel = 'pending step';
-            if (index < currentStep) {
-              variant = 'success';
-              ariaLabel = 'completed step, step with success';
-            } else if (index === currentStep) {
-              variant = 'info';
-              ariaLabel = 'current step';
-            }
+```ts file="examples/ProgressStepper/ProgressStepperBasic.tsx"
 
-            return (
-              <ProgressStep
-                id={index}
-                titleId={step.id}
-                key={index}
-                variant={variant}
-                isCurrent={index === currentStep}
-                aria-label={ariaLabel}
-              >
-                {step.title}
-              </ProgressStep>
-            );
-          })}
-        </ProgressStepper>
-      </StackItem>
-    </Stack>
-  );
-};
 ```