@patternfly/react-core 6.4.1-prerelease.6 → 6.4.1-prerelease.8

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.4.1-prerelease.5","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.4.1-prerelease.7","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.4.1-prerelease.5","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.4.1-prerelease.7","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.4.1-prerelease.5","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.4.1-prerelease.7","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.1-prerelease.6",
+  "version": "6.4.1-prerelease.8",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "697a5955be055c4639eaa91756a2d01043be3ce2"
+  "gitHead": "7d045b83d744f3b585b1a21216df2d1f5c63e16e"
 }

package/src/demos/AlertGroup.md

@@ -15,6 +15,6 @@ This demonstrates how you can assemble a full page view including the use of ale
 
 ### Alert group toast with notification drawer
 
-```js file='./examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx' isFullscreen
+```ts file="examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx" isFullscreen
 
 ```

package/src/demos/BackToTop.md

@@ -11,5 +11,5 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 Note that `tabIndex={0}` is added to the scrolling `PageSection` of the page to allow keyboard users the ability to focus and scroll.
 
-```js isFullscreen file="./examples/BackToTop/BackToTopNameDemo.tsx"
+```ts file="examples/BackToTop/BackToTopNameDemo.tsx" isFullscreen
 ```

package/src/demos/Button/Button.md

@@ -0,0 +1,19 @@
+---
+id: Button
+section: components
+---
+
+import { useState } from 'react';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+## Demos 
+
+### Progress button
+
+The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. 
+
+Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 
+
+```ts file="./examples/ButtonProgress.tsx"
+
+```

package/src/demos/{Button.md → Button/examples/ButtonProgress.tsx}

@@ -1,25 +1,8 @@
----
-id: Button
-section: components
----
-
-import { useState } from 'react';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-
-## Demos 
-
-### Progress button
-
-The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. 
-
-Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 
-
-```ts
 import { useState } from 'react';
 import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
-const ProgressButton: React.FunctionComponent = () => {
+export const ButtonProgress: React.FunctionComponent = () => {
   const [loginState, setLoginState] = useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');
 
   return (
@@ -69,4 +52,3 @@ const ProgressButton: React.FunctionComponent = () => {
     </Form>
   );
 };
-```

package/src/demos/CardView/CardView.md

@@ -27,5 +27,5 @@ This demonstrates how you can assemble a full page view that contains a grid of
 
 ### Card view
 
-```js file="./examples/CardView.tsx" isFullscreen
+```ts file="examples/CardView.tsx" isFullscreen
 ```

package/src/demos/DataListDemo.md

@@ -23,24 +23,24 @@ import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 
 ### Basic
 
-```js file="./DataList/examples/DataListBasic.tsx" isFullscreen
+```ts file="DataList/examples/DataListBasic.tsx" isFullscreen
 
 ```
 
 ### Expandable control in toolbar
 
-```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
+```ts file="DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 
 ```
 
 ### Actionable
 
-```js file="./DataList/examples/DataListActionable.tsx" isFullscreen
+```ts file="DataList/examples/DataListActionable.tsx" isFullscreen
 
 ```
 
 ### Static bottom pagination
 
-```js file="./DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
+```ts file="DataList/examples/DataListStaticBottomPagination.tsx" isFullscreen
 
 ```

package/src/demos/DescriptionList/DescriptionList.md

@@ -12,10 +12,10 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Basic
 
-```js file='./examples/DescriptionListBasic.tsx' isFullscreen
+```ts file="examples/DescriptionListBasic.tsx" isFullscreen
 ```
 
 ### In drawer
 
-```js file='./examples/DescriptionListInDrawer.tsx' isFullscreen
+```ts file="examples/DescriptionListInDrawer.tsx" isFullscreen
 ```

package/src/demos/Nav.md

@@ -19,45 +19,45 @@ import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardH
 
 ### Default nav
 
-```js file='./examples/Nav/NavDefault.tsx' isFullscreen
+```ts file="./examples/Nav/NavDefault.tsx" isFullscreen
 ```
 
 ### Grouped nav
 
-```js file='./examples/Nav/NavGrouped.tsx' isFullscreen
+```ts file="./examples/Nav/NavGrouped.tsx" isFullscreen
 ```
 
 ### Expandable nav
 
-```js file='./examples/Nav/NavExpandable.tsx' isFullscreen
+```ts file="./examples/Nav/NavExpandable.tsx" isFullscreen
 ```
 
 ### Horizontal nav
 
-```js file='./examples/Nav/NavHorizontal.tsx' isFullscreen
+```ts file="./examples/Nav/NavHorizontal.tsx" isFullscreen
 ```
 
 ### Horizontal subnav
 
-```js file='./examples/Nav/NavWithSubnav.tsx' isFullscreen
+```ts file="./examples/Nav/NavWithSubnav.tsx" isFullscreen
 ```
 
 ### Horizontal nav with horizontal subnav
 
-```js file='./examples/Nav/NavHorizontalWithSubnav.tsx' isFullscreen
+```ts file="./examples/Nav/NavHorizontalWithSubnav.tsx" isFullscreen
 ```
 
 ### Manual nav
 
-```js file='./examples/Nav/NavManual.tsx' isFullscreen
+```ts file="./examples/Nav/NavManual.tsx" isFullscreen
 ```
 
 ### Flyout nav
 
-```js file='./examples/Nav/NavFlyout.tsx' isFullscreen
+```ts file="./examples/Nav/NavFlyout.tsx" isFullscreen
 ```
 
 ### Drilldown nav
 
-```js isFullscreen file="./examples/Nav/NavDrilldown.tsx"
+```ts isFullscreen file="./examples/Nav/NavDrilldown.tsx"
 ```

package/src/demos/PasswordGenerator/PasswordGenerator.md

@@ -0,0 +1,16 @@
+---
+id: Password generator
+section: patterns
+---
+
+import { useEffect, useRef, useState } from 'react';
+import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
+import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
+import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
+
+## Demos
+
+### Provide a generated password
+
+```ts file="./examples/PasswordGenerator.tsx"
+```

package/src/demos/{PasswordGenerator.md → PasswordGenerator/examples/PasswordGenerator.tsx}

@@ -1,18 +1,3 @@
----
-id: Password generator
-section: patterns
----
-
-import { useEffect, useRef, useState } from 'react';
-import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
-import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
-import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
-
-## Demos
-
-### Provide a generated password
-
-```ts
 import { useEffect, useRef, useState } from 'react';
 import {
   InputGroup,
@@ -30,12 +15,12 @@ import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
-const PasswordGenerator: React.FunctionComponent = () => {
+export const PasswordGenerator: React.FunctionComponent = () => {
   const generatePassword = () => {
     const length = 12;
     const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@%()_-=+';
     let retVal = '';
-    for (var i = 0, n = charset.length; i < length; ++i) {
+    for (let i = 0, n = charset.length; i < length; ++i) {
       retVal += charset.charAt(Math.floor(Math.random() * n));
     }
     return retVal;
@@ -153,7 +138,7 @@ const PasswordGenerator: React.FunctionComponent = () => {
             actions={
               <MenuItemAction
                 icon={<RedoIcon />}
-                onClick={(e) => {
+                onClick={(_e) => {
                   setGeneratedPassword(generatePassword());
                 }}
                 actionId="redo"
@@ -181,4 +166,3 @@ const PasswordGenerator: React.FunctionComponent = () => {
     />
   );
 };
-```

package/src/demos/PrimaryDetail.md

@@ -31,32 +31,32 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Primary-detail full page
 
-```js file="./examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailFullPage.tsx" isFullscreen
 ```
 
 ### Primary-detail content padding
 
-```js file="./examples/PrimaryDetail/PrimaryDetailContentPadding.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailContentPadding.tsx" isFullscreen
 
 ```
 
 ### Primary-detail card view
 
-```js file="./examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen
 ```
 
 ### Primary-detail simple list in card
 
-```js file="./examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen
 ```
 
 ### Primary-detail data list in card
 
-```js file="./examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen
 ```
 
 ### Primary-detail inline modifier
 
-```js file="./examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx" isFullscreen
+```ts file="examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx" isFullscreen
 
 ```

package/src/demos/RTL/RTL.md

@@ -28,6 +28,6 @@ This demonstrates how the UI adapts to the writing mode of the page.
 
 ### Paginated table
 
-```js file="./examples/PaginatedTable.tsx" isFullscreen
+```ts file="examples/PaginatedTable.tsx" isFullscreen
 
 ```

package/src/demos/Toolbar.md

@@ -20,5 +20,5 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 This is an example of toolbar usage in log viewer.
 
-```js file="./examples/Toolbar/ConsoleLogViewerToolbar.tsx" isFullscreen
+```ts file="examples/Toolbar/ConsoleLogViewerToolbar.tsx" isFullscreen
 ```

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { BackToTop, Card, CardBody, Content, Gallery, GalleryItem, PageSection, Switch } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
-export const Name = () => {
+export const BacktoTopNameDemo: React.FunctionComponent = () => {
   const [isAlwaysVisible, setIsAlwaysVisible] = useState(false);
 
   const handleChange = (_event, isChecked) => {