@patternfly/react-core 6.5.0-prerelease.26 → 6.5.0-prerelease.28

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.25","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.27","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.25","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.27","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.25","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.27","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.26",
+  "version": "6.5.0-prerelease.28",
   "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": "296178f84f2073ea2034858f812ab6d5dd03f3f0"
+  "gitHead": "884ad17d2ec8d71239e2f4f86b5fbc4fd4cc8196"
 }

package/src/demos/DatePicker/DatePicker.md

@@ -13,53 +13,7 @@ import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from
 
 This is intended to be used as a filter. After selecting a start date, the next date is automatically selected.
 
-```js
-import { useState } from 'react';
-import { Split, SplitItem, DatePicker, isValidDate, yyyyMMddFormat } from '@patternfly/react-core';
-
-DateRangePicker = () => {
-  const [from, setFrom] = useState();
-  const [to, setTo] = useState();
-
-  const toValidator = (date) =>
-    isValidDate(from) && date >= from ? '' : 'The "to" date must be after the "from" date';
-
-  const onFromChange = (_event, _value, date) => {
-    setFrom(new Date(date));
-    if (isValidDate(date)) {
-      date.setDate(date.getDate() + 1);
-      setTo(yyyyMMddFormat(date));
-    } else {
-      setTo('');
-    }
-  };
-
-  const onToChange = (_event, _value, date) => {
-    if (isValidDate(date)) {
-      setTo(yyyyMMddFormat(date));
-    }
-  };
-
-  return (
-    <Split>
-      <SplitItem>
-        <DatePicker onChange={onFromChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
-      </SplitItem>
-      <SplitItem style={{ padding: '6px 12px 0 12px' }}>to</SplitItem>
-      <SplitItem>
-        <DatePicker
-          value={to}
-          onChange={onToChange}
-          isDisabled={!isValidDate(from)}
-          rangeStart={from}
-          validators={[toValidator]}
-          aria-label="End date"
-          placeholder="YYYY-MM-DD"
-        />
-      </SplitItem>
-    </Split>
-  );
-};
+```ts file="./examples/DatePickerRange.tsx"
 ```
 
 ### Date and time pickers in modal

package/src/demos/DatePicker/examples/DatePickerRange.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { Split, SplitItem, DatePicker, isValidDate, yyyyMMddFormat } from '@patternfly/react-core';
+
+export const DatePickerRange: React.FunctionComponent = () => {
+  const [from, setFrom] = useState<Date | undefined>();
+  const [to, setTo] = useState<string>('');
+
+  const toValidator = (date: Date) =>
+    isValidDate(from) && date >= from ? '' : 'The "to" date must be after the "from" date';
+
+  const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {
+    setFrom(new Date(date));
+    if (isValidDate(date)) {
+      date.setDate(date.getDate() + 1);
+      setTo(yyyyMMddFormat(date));
+    } else {
+      setTo('');
+    }
+  };
+
+  const onToChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {
+    if (isValidDate(date)) {
+      setTo(yyyyMMddFormat(date));
+    }
+  };
+
+  return (
+    <Split>
+      <SplitItem>
+        <DatePicker onChange={onFromChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+      </SplitItem>
+      <SplitItem style={{ padding: '6px 12px 0 12px' }}>to</SplitItem>
+      <SplitItem>
+        <DatePicker
+          value={to}
+          onChange={onToChange}
+          isDisabled={!isValidDate(from)}
+          rangeStart={from}
+          validators={[toValidator]}
+          aria-label="End date"
+          placeholder="YYYY-MM-DD"
+        />
+      </SplitItem>
+    </Split>
+  );
+};

package/src/demos/Wizard/WizardDemo.md

@@ -14,30 +14,30 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### In modal
 
-```js file="../examples/Wizard/InModal.tsx" isFullscreen
+```ts file="../examples/Wizard/InModal.tsx" isFullscreen
 ```
 
 ### In modal, with drawer
 
-```js file="../examples/Wizard/InModalWithDrawer.tsx" isFullscreen
+```ts file="../examples/Wizard/InModalWithDrawer.tsx" isFullscreen
 ```
 
 ### In modal, with drawer and informational step
 
-```js file="../examples/Wizard/InModalWithDrawerInformationalStep.tsx" isFullscreen
+```ts file="../examples/Wizard/InModalWithDrawerInformationalStep.tsx" isFullscreen
 ```
 
 ### In page
 
-```js file="../examples/Wizard/InPage.tsx" isFullscreen
+```ts file="../examples/Wizard/InPage.tsx" isFullscreen
 ```
 
 ### In page, with drawer
 
-```js file="../examples/Wizard/InPageWithDrawer.tsx" isFullscreen
+```ts file="../examples/Wizard/InPageWithDrawer.tsx" isFullscreen
 ```
 
 ### In page, with drawer and informational step
 
-```js file="../examples/Wizard/InPageWithDrawerInformationalStep.tsx" isFullscreen
+```ts file="../examples/Wizard/InPageWithDrawerInformationalStep.tsx" isFullscreen
 ```

package/src/layouts/Grid/examples/Grid.md

@@ -12,134 +12,38 @@ import './grid.css';
 
 ### Basic
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid>
-  <GridItem span={8}>span = 8</GridItem>
-  <GridItem span={4} rowSpan={2}>
-    span = 4, rowSpan = 2
-  </GridItem>
-  <GridItem span={2} rowSpan={3}>
-    span = 2, rowSpan = 3
-  </GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-</Grid>;
+```ts file="GridBasic.tsx"
 ```
 
 ### With gutters
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid hasGutter>
-  <GridItem span={8}>span = 8</GridItem>
-  <GridItem span={4} rowSpan={2}>
-    span = 4, rowSpan = 2
-  </GridItem>
-  <GridItem span={2} rowSpan={3}>
-    span = 2, rowSpan = 3
-  </GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-</Grid>;
+```ts file="GridWithGutters.tsx"
 ```
 
 ### With overrides
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid sm={6} md={4} lg={3} xl2={1}>
-  <GridItem span={3} rowSpan={2}>
-    span = 3 rowSpan= 2
-  </GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-</Grid>;
+```ts file="GridWithOverrides.tsx"
 ```
 
 ## Ordering
 
 ### Standard ordering
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid hasGutter span={3}>
-  <GridItem order={{ default: '2' }}>Item A</GridItem>
-  <GridItem>Item B</GridItem>
-  <GridItem order={{ default: '-1' }}>Item C</GridItem>
-</Grid>;
+```ts file="GridStandardOrdering.tsx"
 ```
 
 ### Responsive ordering
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid hasGutter span={3}>
-  <GridItem order={{ lg: '2' }}>Item A</GridItem>
-  <GridItem>Item B</GridItem>
-  <GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
-</Grid>;
+```ts file="GridResponsiveOrdering.tsx"
 ```
 
 ### Grouped ordering
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid hasGutter span={12}>
-  <Grid hasGutter span={6} order={{ default: '2' }}>
-    <GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
-    <GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
-    <GridItem>Set 1, Item C</GridItem>
-    <GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
-  </Grid>
-  <Grid hasGutter span={6}>
-    <GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
-    <GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
-    <GridItem>Set 2, Item C</GridItem>
-    <GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
-  </Grid>
-</Grid>;
+```ts file="GridGroupingOrdering.tsx"
+
 ```
 
 ### Alternative components
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid component="ul">
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-</Grid>;
+```ts file="GridAlternativeComponents.tsx"
 ```

package/src/layouts/Grid/examples/GridAlternativeComponents.tsx

@@ -0,0 +1,11 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridAlternativeComponents: React.FunctionComponent = () => (
+  <Grid component="ul">
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridBasic.tsx

@@ -0,0 +1,22 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridBasic: React.FunctionComponent = () => (
+  <Grid>
+    <GridItem span={8}>span = 8</GridItem>
+    <GridItem span={4} rowSpan={2}>
+      span = 4, rowSpan = 2
+    </GridItem>
+    <GridItem span={2} rowSpan={3}>
+      span = 2, rowSpan = 3
+    </GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridGroupingOrdering.tsx

@@ -0,0 +1,18 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridGroupingOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={12}>
+    <Grid hasGutter span={6} order={{ default: '2' }}>
+      <GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
+      <GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
+      <GridItem>Set 1, Item C</GridItem>
+      <GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
+    </Grid>
+    <Grid hasGutter span={6}>
+      <GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
+      <GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
+      <GridItem>Set 2, Item C</GridItem>
+      <GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
+    </Grid>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridResponsiveOrdering.tsx

@@ -0,0 +1,9 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridResponsiveOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={3}>
+    <GridItem order={{ lg: '2' }}>Item A</GridItem>
+    <GridItem>Item B</GridItem>
+    <GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridStandardOrdering.tsx

@@ -0,0 +1,9 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridStandardOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={3}>
+    <GridItem order={{ default: '2' }}>Item A</GridItem>
+    <GridItem>Item B</GridItem>
+    <GridItem order={{ default: '-1' }}>Item C</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridWithGutters.tsx

@@ -0,0 +1,22 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridWithGutters: React.FunctionComponent = () => (
+  <Grid hasGutter>
+    <GridItem span={8}>span = 8</GridItem>
+    <GridItem span={4} rowSpan={2}>
+      span = 4, rowSpan = 2
+    </GridItem>
+    <GridItem span={2} rowSpan={3}>
+      span = 2, rowSpan = 3
+    </GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+  </Grid>
+);

package/src/layouts/Grid/examples/GridWithOverrides.tsx

@@ -0,0 +1,20 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridWithOverrides: React.FunctionComponent = () => (
+  <Grid sm={6} md={4} lg={3} xl2={1}>
+    <GridItem span={3} rowSpan={2}>
+      span = 3 rowSpan= 2
+    </GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+  </Grid>
+);

package/src/layouts/Stack/examples/Stack.md

@@ -12,24 +12,10 @@ import './stack.css';
 
 ### Basic
 
-```js
-import { Stack, StackItem } from '@patternfly/react-core';
-
-<Stack>
-  <StackItem>content</StackItem>
-  <StackItem isFilled>pf-m-fill</StackItem>
-  <StackItem>content</StackItem>
-</Stack>;
+```ts file="StackBasic.tsx"
 ```
 
 ### With gutter
 
-```js
-import { Stack, StackItem } from '@patternfly/react-core';
-
-<Stack hasGutter>
-  <StackItem>content</StackItem>
-  <StackItem isFilled>pf-m-fill</StackItem>
-  <StackItem>content</StackItem>
-</Stack>;
+```ts file="StackWithGutter.tsx"
 ```

package/src/layouts/Stack/examples/StackBasic.tsx

@@ -0,0 +1,9 @@
+import { Stack, StackItem } from '@patternfly/react-core';
+
+export const StackBasic: React.FunctionComponent = () => (
+  <Stack>
+    <StackItem>content</StackItem>
+    <StackItem isFilled>pf-m-fill</StackItem>
+    <StackItem>content</StackItem>
+  </Stack>
+);

package/src/layouts/Stack/examples/StackWithGutter.tsx

@@ -0,0 +1,9 @@
+import { Stack, StackItem } from '@patternfly/react-core';
+
+export const StackWithGutter: React.FunctionComponent = () => (
+  <Stack hasGutter>
+    <StackItem>content</StackItem>
+    <StackItem isFilled>pf-m-fill</StackItem>
+    <StackItem>content</StackItem>
+  </Stack>
+);