@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/date-and-time/date-picker/react.js

@@ -0,0 +1,395 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState, useRef } from 'react';
+const pageData = {
+  "id": "Date picker",
+  "section": "components",
+  "subsection": "date-and-time",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/date-and-time/date-picker/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/DatePicker/examples/DatePicker.md",
+  "relPath": "packages/react-core/src/components/DatePicker/examples/DatePicker.md",
+  "propComponents": [
+    {
+      "name": "DatePicker",
+      "description": "The main date picker component.",
+      "props": [
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'",
+          "description": "The container to append the menu to. Defaults to 'inline'.\nIf your menu is being cut off you can append it to an element higher up the DOM tree.\nSome examples:\nmenuAppendTo={() => document.body};\nmenuAppendTo={document.getElementById('target')}",
+          "defaultValue": "'inline'"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the date picker.",
+          "defaultValue": "'Date picker'"
+        },
+        {
+          "name": "buttonAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the button to open the date picker.",
+          "defaultValue": "'Toggle date picker'"
+        },
+        {
+          "name": "cellAriaLabel",
+          "type": "(date: Date) => string",
+          "description": "Accessible label for the date cells."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the date picker."
+        },
+        {
+          "name": "dateFormat",
+          "type": "(date: Date) => string",
+          "description": "How to format the date in the text input.",
+          "defaultValue": "(date: Date) =>\n`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date\n  .getDate()\n  .toString()\n  .padStart(2, '0')}`"
+        },
+        {
+          "name": "dateParse",
+          "type": "(value: string) => Date",
+          "description": "How to parse the date in the text input.",
+          "defaultValue": "(val: string) => (val.split('-').length === 3 ? new Date(`${val}T00:00:00`) : new Date(undefined))"
+        },
+        {
+          "name": "dayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format days in buttons in table cells."
+        },
+        {
+          "name": "helperText",
+          "type": "React.ReactNode",
+          "description": "Helper text to display alongside the date picker. Expects a HelperText component."
+        },
+        {
+          "name": "inlineProps",
+          "type": "CalendarMonthInlineProps",
+          "description": "Props used to ensure accessibility when displaying the calendar month inline."
+        },
+        {
+          "name": "inputProps",
+          "type": "TextInputProps",
+          "description": "Additional props for the text input.",
+          "defaultValue": "{}"
+        },
+        {
+          "name": "invalidFormatText",
+          "type": "string",
+          "description": "Error message to display when the text input contains a non-empty value in an invalid format.",
+          "defaultValue": "'Invalid date'"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the date picker is disabled.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "description": "If using the default formatters which locale to use. Undefined defaults to current locale.\nSee https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation",
+          "defaultValue": "undefined"
+        },
+        {
+          "name": "longWeekdayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format days in header for screen readers."
+        },
+        {
+          "name": "monthFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format months in month select."
+        },
+        {
+          "name": "nextMonthAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the next month button."
+        },
+        {
+          "name": "onBlur",
+          "type": "(event: any, value: string, date?: Date) => void",
+          "description": "Callback called every time the text input loses focus.",
+          "defaultValue": "(): any => undefined"
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.FormEvent<HTMLInputElement>, value: string, date?: Date) => void",
+          "description": "Callback called every time the text input value changes.",
+          "defaultValue": "(): any => undefined"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "description": "String to display in the empty text input as a hint for the expected date format.",
+          "defaultValue": "'YYYY-MM-DD'"
+        },
+        {
+          "name": "popoverProps",
+          "type": "Partial<Omit<PopoverProps, 'appendTo'>>",
+          "description": "Props to pass to the popover that contains the calendar month component."
+        },
+        {
+          "name": "prevMonthAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the previous month button."
+        },
+        {
+          "name": "rangeStart",
+          "type": "Date",
+          "description": "Which date to start range styles from."
+        },
+        {
+          "name": "requiredDateOptions",
+          "type": "DatePickerRequiredObject",
+          "description": "Options to customize the requirement of a date"
+        },
+        {
+          "name": "style",
+          "type": "No type info",
+          "defaultValue": "{}"
+        },
+        {
+          "name": "validators",
+          "type": "((date: Date) => string)[]",
+          "description": "Functions that returns an error message if a date is invalid.",
+          "defaultValue": "[]"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Value of the text input.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "weekdayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format week days in header."
+        },
+        {
+          "name": "weekStart",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday",
+          "description": "Day of week that starts the week. 0 is Sunday, 6 is Saturday."
+        },
+        {
+          "name": "yearInputAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the year input."
+        }
+      ]
+    },
+    {
+      "name": "CalendarFormat",
+      "description": "Additional properties that extend from and can be passed to the main component. These\nproperties allow customizing the calendar formatting and aria-labels.",
+      "props": [
+        {
+          "name": "cellAriaLabel",
+          "type": "(date: Date) => string",
+          "description": "Accessible label for the date cells."
+        },
+        {
+          "name": "dayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format days in buttons in table cells."
+        },
+        {
+          "name": "inlineProps",
+          "type": "CalendarMonthInlineProps",
+          "description": "Props used to ensure accessibility when displaying the calendar month inline."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "description": "If using the default formatters which locale to use. Undefined defaults to current locale.\nSee https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation"
+        },
+        {
+          "name": "longWeekdayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format days in header for screen readers."
+        },
+        {
+          "name": "monthFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format months in month select."
+        },
+        {
+          "name": "nextMonthAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the next month button."
+        },
+        {
+          "name": "prevMonthAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the previous month button."
+        },
+        {
+          "name": "rangeStart",
+          "type": "Date",
+          "description": "Which date to start range styles from."
+        },
+        {
+          "name": "weekdayFormat",
+          "type": "(date: Date) => React.ReactNode",
+          "description": "How to format week days in header."
+        },
+        {
+          "name": "weekStart",
+          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday",
+          "description": "Day of week that starts the week. 0 is Sunday, 6 is Saturday."
+        },
+        {
+          "name": "yearInputAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the year input."
+        }
+      ]
+    },
+    {
+      "name": "DatePickerRef",
+      "description": "Allows finer control over the calendar's open state when a React ref is passed into the\ndate picker component. Accessed via ref.current[property], e.g. ref.current.toggleCalendar().",
+      "props": [
+        {
+          "name": "isCalendarOpen",
+          "type": "boolean",
+          "description": "Current calendar open status.",
+          "required": true
+        },
+        {
+          "name": "setCalendarOpen",
+          "type": "(isOpen: boolean) => void",
+          "description": "Sets the calendar open status.",
+          "required": true
+        },
+        {
+          "name": "toggleCalendar",
+          "type": "(isOpen?: boolean) => void",
+          "description": "Toggles the calendar open status. If no parameters are passed, the calendar will simply\ntoggle its open status.\nIf the isOpen parameter is passed, that will set the calendar open status to the value\nof the isOpen parameter.\nIf the eventKey parameter is set to 'Escape', that will invoke the date pickers\nonEscapePress event to toggle the correct control appropriately.",
+          "required": true
+        }
+      ]
+    },
+    {
+      "name": "DatePickerRequiredObject",
+      "description": "Props that customize the requirement of a date",
+      "props": [
+        {
+          "name": "emptyDateText",
+          "type": "string",
+          "description": "Error message to display when the text input is empty and the isRequired prop is also passed in."
+        },
+        {
+          "name": "isRequired",
+          "type": "boolean",
+          "description": "Flag indicating the date is required."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-date-picker"
+  ],
+  "examples": [
+    "Basic",
+    "Required",
+    "American format",
+    "Helper text",
+    "Min and max date",
+    "French",
+    "Controlled",
+    "Controlled required",
+    "Controlling the date picker calendar state"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  useRef
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { DatePicker } from '@patternfly/react-core';\n\nexport const DatePickerBasic: React.FunctionComponent = () => (\n  <DatePicker\n    // eslint-disable-next-line no-console\n    onBlur={(_event, str, date) => console.log('onBlur', str, date)}\n    // eslint-disable-next-line no-console\n    onChange={(_event, str, date) => console.log('onChange', str, date)}\n  />\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Required': props => 
+    <Example {...pageData} {...props} {...{"code":"import { DatePicker } from '@patternfly/react-core';\n\nexport const DatePickerRequired: React.FunctionComponent = () => (\n  <DatePicker requiredDateOptions={{ isRequired: true, emptyDateText: 'Date is required' }} />\n);\n","title":"Required","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To require users to select a date before continuing, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`requiredDateOptions.isRequired`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A required date picker will be invalid when the text input is empty and either the text input loses focus or the date picker popover is closed.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The error message can be customized via the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`requiredDateOptions.emptyDateText`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'American format': props => 
+    <Example {...pageData} {...props} {...{"code":"import { DatePicker } from '@patternfly/react-core';\n\nexport const DatePickerAmerican: React.FunctionComponent = () => {\n  const dateFormat = (date: Date) =>\n    date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\\//g, '-');\n  const dateParse = (date: string) => {\n    const split = date.split('-');\n    if (split.length !== 3) {\n      return new Date();\n    }\n    const month = split[0];\n    const day = split[1];\n    const year = split[2];\n    return new Date(`${year.padStart(4, '0')}-${month.padStart(2, '0')}-${day.padStart(2, '0')}T00:00:00`);\n  };\n\n  return <DatePicker value=\"03-05-2020\" placeholder=\"MM-DD-YYYY\" dateFormat={dateFormat} dateParse={dateParse} />;\n};\n","title":"American format","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Helper text': props => 
+    <Example {...pageData} {...props} {...{"code":"import { DatePicker, HelperText, HelperTextItem } from '@patternfly/react-core';\n\nexport const DatePickerHelperText: React.FunctionComponent = () => (\n  <DatePicker\n    value=\"2020-03-05\"\n    helperText={\n      <HelperText>\n        <HelperTextItem>Select a date.</HelperTextItem>\n      </HelperText>\n    }\n  />\n);\n","title":"Helper text","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Min and max date': props => 
+    <Example {...pageData} {...props} {...{"code":"import { DatePicker } from '@patternfly/react-core';\n\nexport const DatePickerMinMax: React.FunctionComponent = () => {\n  const minDate = new Date(2020, 2, 16);\n  const maxDate = new Date(2020, 2, 20);\n  const rangeValidator = (date: Date) => {\n    if (date < minDate) {\n      return 'Date is before the allowable range.';\n    } else if (date > maxDate) {\n      return 'Date is after the allowable range.';\n    }\n\n    return '';\n  };\n  return <DatePicker value=\"2020-03-17\" validators={[rangeValidator]} />;\n};\n","title":"Min and max date","lang":"ts","className":""}}>
+      
+    </Example>,
+  'French': props => 
+    <Example {...pageData} {...props} {...{"code":"import { DatePicker, Weekday } from '@patternfly/react-core';\n\nexport const DatePickerFrench: React.FunctionComponent = () => {\n  const minDate = new Date(2020, 2, 16);\n  const maxDate = new Date(2020, 2, 20);\n  const rangeValidator = (date: Date) => {\n    if (date < minDate) {\n      return 'Cette date est antérieure à la première date valide.';\n    } else if (date > maxDate) {\n      return 'Cette date est postérieure à la dernière date valide.';\n    }\n\n    return '';\n  };\n  return (\n    <DatePicker\n      value=\"2020-03-17\"\n      validators={[rangeValidator]}\n      placeholder=\"aaaa-mm-jj\"\n      invalidFormatText=\"Cette date est invalide.\"\n      locale=\"fr\"\n      weekStart={Weekday.Monday}\n    />\n  );\n};\n","title":"French","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Controlled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, DatePicker, Flex, FlexItem } from '@patternfly/react-core';\n\nexport const DatePickerControlled: React.FunctionComponent = () => {\n  const initialValue = '2020-03-17';\n  const [value, setValue] = useState(initialValue);\n  return (\n    <Fragment>\n      <DatePicker value={value} onChange={(_event, value) => setValue(value)} />\n      <br />\n      <br />\n      <Flex>\n        <FlexItem>\n          <Button onClick={() => setValue(initialValue)}>Reset date</Button>\n        </FlexItem>\n        <FlexItem>\n          <Button onClick={() => setValue('')}>Clear date</Button>\n        </FlexItem>\n      </Flex>\n    </Fragment>\n  );\n};\n","title":"Controlled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Controlled required': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, DatePicker, Flex, FlexItem } from '@patternfly/react-core';\n\nexport const DatePickerControlled: React.FunctionComponent = () => {\n  const initialValue = '2020-03-17';\n  const [value, setValue] = useState(initialValue);\n  return (\n    <Fragment>\n      <DatePicker\n        requiredDateOptions={{ isRequired: true, emptyDateText: 'Date is required' }}\n        value={value}\n        onChange={(_event, value) => setValue(value)}\n      />\n      <br />\n      <br />\n      <Flex>\n        <FlexItem>\n          <Button onClick={() => setValue(initialValue)}>Reset date</Button>\n        </FlexItem>\n        <FlexItem>\n          <Button onClick={() => setValue('')}>Clear date</Button>\n        </FlexItem>\n      </Flex>\n    </Fragment>\n  );\n};\n","title":"Controlled required","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Controlling the date picker calendar state': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef } from 'react';\nimport { Button, DatePicker } from '@patternfly/react-core';\n\nexport const DatePickerControlledCalendar: React.FunctionComponent = () => {\n  const dateRef = useRef(null);\n  const onClick = () => {\n    if (dateRef.current) {\n      dateRef.current.toggleCalendar();\n    }\n  };\n  return (\n    <Fragment>\n      <DatePicker ref={dateRef} />\n      <br />\n      <br />\n      <Button onClick={onClick}>Toggle calendar</Button>\n    </Fragment>\n  );\n};\n","title":"Controlling the date picker calendar state","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Required"])}
+    {React.createElement(pageData.examples["American format"])}
+    {React.createElement(pageData.examples["Helper text"])}
+    {React.createElement(pageData.examples["Min and max date"])}
+    {React.createElement(pageData.examples["French"])}
+    {React.createElement(pageData.examples["Controlled"])}
+    {React.createElement(pageData.examples["Controlled required"])}
+    {React.createElement(pageData.examples["Controlling the date picker calendar state"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDateAndTimeDatePickerReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/date-and-time/time-picker/react.js

@@ -0,0 +1,241 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { TimePicker } from '@patternfly/react-core';
+const pageData = {
+  "id": "Time picker",
+  "section": "components",
+  "subsection": "date-and-time",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/date-and-time/time-picker/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/TimePicker/examples/TimePicker.md",
+  "relPath": "packages/react-core/src/components/TimePicker/examples/TimePicker.md",
+  "propComponents": [
+    {
+      "name": "TimePicker",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the time picker",
+          "defaultValue": "'Time picker'"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the time picker.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "delimiter",
+          "type": "string",
+          "description": "Character to display between the hour and minute",
+          "defaultValue": "':'"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id of the time picker"
+        },
+        {
+          "name": "includeSeconds",
+          "type": "boolean",
+          "description": "Includes number of seconds with the chosen time and allows users to manually edit the seconds value."
+        },
+        {
+          "name": "inputProps",
+          "type": "TextInputProps",
+          "description": "Additional props for input field",
+          "defaultValue": "{}"
+        },
+        {
+          "name": "invalidFormatErrorMessage",
+          "type": "string",
+          "description": "Error message to display when the time is provided in an invalid format.",
+          "defaultValue": "'Invalid time format'"
+        },
+        {
+          "name": "invalidMinMaxErrorMessage",
+          "type": "string",
+          "description": "Error message to display when the time provided is not within the minTime/maxTime constraints",
+          "defaultValue": "'Invalid time entered'"
+        },
+        {
+          "name": "is24Hour",
+          "type": "boolean",
+          "description": "True if the time is 24 hour time. False if the time is 12 hour time",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the time picker is disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Flag to control the opened state of the time picker menu",
+          "defaultValue": "false"
+        },
+        {
+          "name": "maxTime",
+          "type": "string | Date",
+          "description": "A time string indicating the maximum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format",
+          "defaultValue": "''"
+        },
+        {
+          "name": "menuAppendTo",
+          "type": "HTMLElement | (() => HTMLElement) | 'inline' | 'parent'",
+          "description": "The container to append the menu to. Defaults to 'inline'.\nIf your menu is being cut off you can append it to an element higher up the DOM tree.\nSome examples:\nmenuAppendTo=\"parent\"\nmenuAppendTo={() => document.body}\nmenuAppendTo={document.getElementById('target')}",
+          "defaultValue": "'inline'"
+        },
+        {
+          "name": "minTime",
+          "type": "string | Date",
+          "description": "A time string indicating the minimum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format",
+          "defaultValue": "''"
+        },
+        {
+          "name": "onChange",
+          "type": "(\n  event: React.FormEvent<HTMLInputElement>,\n  time: string,\n  hour?: number,\n  minute?: number,\n  seconds?: number,\n  isValid?: boolean\n) => void",
+          "description": "Optional event handler called each time the value in the time picker input changes."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "description": "String to display in the empty time picker field as a hint for the expected time format",
+          "defaultValue": "'hh:mm'"
+        },
+        {
+          "name": "setIsOpen",
+          "type": "(isOpen?: boolean) => void",
+          "description": "Handler invoked each time the open state of time picker updates",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "stepMinutes",
+          "type": "number",
+          "description": "Size of step between time options in minutes.",
+          "defaultValue": "30"
+        },
+        {
+          "name": "time",
+          "type": "string | Date",
+          "description": "A time string. The format could be  an ISO 8601 formatted date string or in 'HH{delimiter}MM' format",
+          "defaultValue": "''"
+        },
+        {
+          "name": "validateTime",
+          "type": "(time: string) => boolean",
+          "description": "Optional validator can be provided to override the internal time validator."
+        },
+        {
+          "name": "width",
+          "type": "string",
+          "description": "Width of the time picker.",
+          "defaultValue": "'150px'"
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "z-index of the time picker",
+          "defaultValue": "9999"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-time-picker"
+  ],
+  "examples": [
+    "Basic 12 hour",
+    "Basic 24 hour",
+    "Custom delimiter",
+    "Minimum/maximum times",
+    "With seconds",
+    "Basic 24 hours with seconds"
+  ]
+};
+pageData.liveContext = {
+  TimePicker
+};
+pageData.examples = {
+  'Basic 12 hour': props => 
+    <Example {...pageData} {...props} {...{"code":"/* eslint-disable no-console */\nimport { TimePicker } from '@patternfly/react-core';\n\nexport const TimePickerBasic12Hour: React.FunctionComponent = () => {\n  const onChange = (\n    _event: React.FormEvent<HTMLInputElement>,\n    time: string,\n    hour: number,\n    minute: number,\n    seconds: number,\n    isValid: boolean\n  ) => {\n    console.log('time', time);\n    console.log('hour', hour);\n    console.log('minute', minute);\n    console.log('seconds', seconds);\n    console.log('isValid', isValid);\n  };\n\n  return <TimePicker time=\"3:35 AM\" onChange={onChange} />;\n};\n","title":"Basic 12 hour","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Basic 24 hour': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TimePicker } from '@patternfly/react-core';\n\nexport const TimePickerBasic24Hour: React.FunctionComponent = () => <TimePicker time=\"2020-10-14T18:06:02Z\" is24Hour />;\n","title":"Basic 24 hour","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Custom delimiter': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TimePicker } from '@patternfly/react-core';\n\nexport const TimePickerCustomDelimiter: React.FunctionComponent = () => (\n  <TimePicker is24Hour delimiter=\"h\" placeholder=\"\" />\n);\n","title":"Custom delimiter","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Minimum/maximum times': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TimePicker } from '@patternfly/react-core';\n\nexport const TimePickerMinMaxTimes: React.FunctionComponent = () => (\n  <TimePicker is24Hour minTime=\"9:30\" maxTime=\"17:15\" placeholder=\"14:00\" />\n);\n","title":"Minimum/maximum times","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`minTime`}
+        </code>
+        {`/`}
+        
+        <code {...{"className":"ws-code "}}>
+          {`maxTime`}
+        </code>
+        {` props restrict the options shown for the user to select from as well as trigger the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`invalidMinMaxErrorMessage`}
+        </code>
+        {` if the user enters a time outside this range.`}
+      </p>
+    </Example>,
+  'With seconds': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TimePicker } from '@patternfly/react-core';\n\nexport const TimePickerWithSeconds: React.FunctionComponent = () => <TimePicker time=\"3:35:20 PM\" includeSeconds />;\n","title":"With seconds","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Basic 24 hours with seconds': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TimePicker } from '@patternfly/react-core';\n\nexport const TimePickerBasic24HourWithSeconds: React.FunctionComponent = () => (\n  <TimePicker time=\"12:35:50\" includeSeconds is24Hour />\n);\n","title":"Basic 24 hours with seconds","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Appending the TimePicker to the `}
+      <code {...{"className":"ws-code "}}>
+        {`document.body`}
+      </code>
+      {` may cause accessibility issues, including being unable to navigate into the menu via keyboard or other assistive technologies. Instead, appending to the `}
+      <code {...{"className":"ws-code "}}>
+        {`"parent"`}
+      </code>
+      {` is recommended.`}
+    </p>
+    {React.createElement(pageData.examples["Basic 12 hour"])}
+    {React.createElement(pageData.examples["Basic 24 hour"])}
+    {React.createElement(pageData.examples["Custom delimiter"])}
+    {React.createElement(pageData.examples["Minimum/maximum times"])}
+    {React.createElement(pageData.examples["With seconds"])}
+    {React.createElement(pageData.examples["Basic 24 hours with seconds"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDateAndTimeTimePickerReactDocs';
+Component.pageData = pageData;
+
+export default Component;