@patternfly/react-core 6.5.0-prerelease.27 → 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.26","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.26","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.26","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.27",
+  "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "097dae1319f634100648d173b0334f97308dc4d2"
+  "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
 ```