@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

package/dist/docs/api/v6/components/radio/react

@@ -0,0 +1,66 @@
+## Examples
+
+### Controlled
+
+
+import RadioControlled from "./RadioControlled.tsx?raw"
+
+<LiveExample src={RadioControlled} />
+
+### Uncontrolled
+
+
+import RadioUncontrolled from "./RadioUncontrolled.tsx?raw"
+
+<LiveExample src={RadioUncontrolled} />
+
+### Reversed
+
+
+import RadioReversed from "./RadioReversed.tsx?raw"
+
+<LiveExample src={RadioReversed} />
+
+### Label wraps
+
+You can expand the clickable area of a radio so that it spans wider than the radio label by adding the `isLabelWrapped` property. This allows users to select a radio by clicking the radio itself, the label, or the area between the radio and the label.
+
+
+import RadioLabelWraps from "./RadioLabelWraps.tsx?raw"
+
+<LiveExample src={RadioLabelWraps} />
+
+### Disabled
+
+
+import RadioDisabled from "./RadioDisabled.tsx?raw"
+
+<LiveExample src={RadioDisabled} />
+
+### With description
+
+
+import RadioWithDescription from "./RadioWithDescription.tsx?raw"
+
+<LiveExample src={RadioWithDescription} />
+
+### With body
+
+
+import RadioWithBody from "./RadioWithBody.tsx?raw"
+
+<LiveExample src={RadioWithBody} />
+
+### With description and body
+
+
+import RadioWithDescriptionAndBody from "./RadioWithDescriptionAndBody.tsx?raw"
+
+<LiveExample src={RadioWithDescriptionAndBody} />
+
+### Standalone input
+
+
+import RadioStandaloneInput from "./RadioStandaloneInput.tsx?raw"
+
+<LiveExample src={RadioStandaloneInput} />

package/dist/docs/api/v6/components/search-input/react

@@ -0,0 +1,60 @@
+## Examples
+
+### Basic
+
+
+import SearchInputBasic from "./SearchInputBasic.tsx?raw"
+
+<LiveExample src={SearchInputBasic} />
+
+### Match with result count
+
+
+import SearchInputWithResultCount from "./SearchInputWithResultCount.tsx?raw"
+
+<LiveExample src={SearchInputWithResultCount} />
+
+### Match with navigable options
+
+
+import SearchInputWithNavigableOptions from "./SearchInputWithNavigableOptions.tsx?raw"
+
+<LiveExample src={SearchInputWithNavigableOptions} />
+
+### With submit button
+
+
+import SearchInputWithSubmitButton from "./SearchInputWithSubmitButton.tsx?raw"
+
+<LiveExample src={SearchInputWithSubmitButton} />
+
+### Focus search input using ref
+
+
+import SearchInputFocusSearch from "./SearchInputFocusSearch.tsx?raw"
+
+<LiveExample src={SearchInputFocusSearch} />
+
+### With expandable button
+
+
+import SearchInputWithExpandable from "./SearchInputWithExpandable.tsx?raw"
+
+<LiveExample src={SearchInputWithExpandable} />
+
+### Advanced
+
+The search input component can be used to dynamically build a one to one attribute-value advanced search.
+Using the `attributes` prop alongside the `advancedSearchDelimiter` will expose this functionality, as demonstrated in
+the following example. The search input component can also be used as a composable component and paired with a Popper 
+or other elements to build a completely custom advanced search form. This feature is demonstrated 
+in the search input's <a href="/components/search-input/react-demos">react demos</a>.
+
+The values used in the attribute-value form fields may contain spaces. The values containing spaces
+should be wrapped with quotes inside the summary search string in the input field. If the latter is
+autogenerated from the individual fields the quotes will be autoplaced.
+
+
+import SearchInputAdvanced from "./SearchInputAdvanced.tsx?raw"
+
+<LiveExample src={SearchInputAdvanced} />

package/dist/docs/api/v6/components/select/react

@@ -0,0 +1,165 @@
+## Examples
+
+Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the [menu documentation](/components/menus/menu) for a full list of properties that may be used to further customize a select menu. View the [custom menu examples](/components/menus/custom-menus) to see examples of fully functional select menus.
+
+For use cases that do not require a lot of customization, there are various template components available to use in the `@react-templates` package. These templates have a streamlined API and logic, making them easier to set up and use, but are limited in scope and flexibility. See the [templates page](/components/menus/select/react-templates) for details.
+
+### Single select
+
+To let users select a single item from a list, use a single select menu.
+
+You can add multiple `<SelectOption>` components to build out a list of menu items. For each select option, pass a relevant option label to the `value` property.
+
+To disable the select menu toggle, use the `isDisabled` property. In the following example, select the checkbox to observe this behavior.
+
+
+import SelectBasic from "./SelectBasic.tsx?raw"
+
+<LiveExample src={SelectBasic} />
+
+### Select option variants
+
+The following example showcases different option variants and customizations that are commonly used in a select menu.
+
+To create these variants, you can pass different properties into a `<SelectOption>` component.
+
+This example provides examples of:
+
+- An option with a description, which is created by using the `description` property.
+- An option with a link, which is created by passing a URL into the `to` property. For external links, use the `isExternalLink` property so that the option is styled with an outbound link icon.
+- An option with an icon, which is created by using the `icon` property.
+- An option that is disabled by using the `isDisabled` property.
+
+
+import SelectOptionVariations from "./SelectOptionVariations.tsx?raw"
+
+<LiveExample src={SelectOptionVariations} />
+
+### With grouped items
+
+To group related select options together, use 1 or more `<SelectGroup>` components and title each group using the `label` property.
+
+
+import SelectGrouped from "./SelectGrouped.tsx?raw"
+
+<LiveExample src={SelectGrouped} />
+
+### With validation
+
+To create a toggle with a status, pass in `status` to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property.
+
+When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
+
+
+import SelectValidated from "./SelectValidated.tsx?raw"
+
+<LiveExample src={SelectValidated} />
+
+### Checkbox select
+
+To let users select multiple list options via checkbox input, use a checkbox select.
+
+To create a checkbox select, pass `role="menu"` to the `<Select>`, and `hasCheckbox` into each `<SelectOption>` component. To indicate that an option is selected, use the `isSelected` property.
+
+By default, the menu toggle will display a badge to indicate the number of items that a user has selected.
+
+
+import SelectCheckbox from "./SelectCheckbox.tsx?raw"
+
+<LiveExample src={SelectCheckbox} />
+
+### Typeahead
+Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
+
+Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
+
+To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
+
+Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
+
+To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
+
+
+import SelectTypeahead from "./SelectTypeahead.tsx?raw"
+
+<LiveExample src={SelectTypeahead} />
+
+### Typeahead with create option
+If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value. 
+
+If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
+
+To enable the creation ability, pass a predetermined `value` into a `<SelectOption>` component. You can use the `placeholder` property to change the default text shown in the text input.
+
+The following example outlines the code implementation required to create a working typeahead menu that allows for creation.
+
+If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
+
+To enable the creation ability, pass a predetermined `value` into a `<SelectOption>` component. You can use the `placeholder` property to change the default text shown in the text input.
+
+The following example outlines the code implementation required to create a working typeahead menu that allows for creation.
+
+
+import SelectTypeaheadCreatable from "./SelectTypeaheadCreatable.tsx?raw"
+
+<LiveExample src={SelectTypeaheadCreatable} />
+
+### Multiple typeahead with chips
+A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
+
+A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
+
+When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
+
+A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
+
+When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
+
+
+import SelectMultiTypeahead from "./SelectMultiTypeahead.tsx?raw"
+
+<LiveExample src={SelectMultiTypeahead} />
+
+### Multiple typeahead with create option
+If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
+
+If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
+
+If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
+
+
+import SelectMultiTypeaheadCreatable from "./SelectMultiTypeaheadCreatable.tsx?raw"
+
+<LiveExample src={SelectMultiTypeaheadCreatable} />
+
+### Multiple typeahead with checkboxes
+By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
+
+By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
+
+By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
+
+
+import SelectMultiTypeaheadCheckbox from "./SelectMultiTypeaheadCheckbox.tsx?raw"
+
+<LiveExample src={SelectMultiTypeaheadCheckbox} />
+
+### With view more
+
+To reduce the processing load for long select lists, you can add a "View more" action to load additional items.
+
+The following example shows 3 items before the "View more" link, but you can adjust the number of visible items for your use case.
+
+
+import SelectViewMore from "./SelectViewMore.tsx?raw"
+
+<LiveExample src={SelectViewMore} />
+
+### With a footer
+
+You can add a `<MenuFooter>` component to a select menu to hold additional actions that users can take on menu items, through elements such as link buttons. A footer will be placed beneath a divider at the end of the select menu.
+
+
+import SelectFooter from "./SelectFooter.tsx?raw"
+
+<LiveExample src={SelectFooter} />

package/dist/docs/api/v6/components/sidebar/html

@@ -0,0 +1,116 @@
+import './Sidebar.css'
+
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### With secondary background
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Gutter
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Stack
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Split
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Panel right (HTML)
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Panel right (modifier)
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Sticky panel
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Static panel
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Responsive panel width
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Border
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Padding on panel
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### Padding on content
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+## Documentation
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-sidebar` | `<div>` | Initiates the sidebar component. **Required** |
+| `.pf-v6-c-sidebar__main` | `<div>` | Initiates the sidebar main element. **Required** |
+| `.pf-v6-c-sidebar__panel` | `<div>` | Initiates the sidebar panel element. **Required** |
+| `.pf-v6-c-sidebar__content` | `<div>` | Initiates the sidebar content element. **Required** |
+| `.pf-m-border` | `.pf-v6-c-sidebar__main` | Modifies the sidebar component to add a border between the panel and content. |
+| `.pf-m-padding` | `.pf-v6-c-sidebar__panel`, `.pf-v6-c-sidebar__content` | Modifies the sidebar component to add a padding to panel and/or content. |
+| `.pf-m-gutter` | `.pf-v6-c-sidebar` | Modifies the sidebar component to add a gutter between the panel and content. |
+| `.pf-m-stack` | `.pf-v6-c-sidebar` | Modifies the sidebar to stack the panel on top of the content. |
+| `.pf-m-split` | `.pf-v6-c-sidebar` | Modifies the sidebar to position the panel and content side by side. |
+| `.pf-m-panel-right` | `.pf-v6-c-sidebar` | Modifies the sidebar to place the panel to the right of the content. |
+| `.pf-m-sticky` | `.pf-v6-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout. |
+| `.pf-m-static` | `.pf-v6-c-sidebar__panel` | Modifies the panel to be positioned statically. |
+| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** does not apply when the panel is stacked on top of the content. |
+| `.pf-m-no-background` | `.pf-v6-c-sidebar`, `.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` | Modifies the element to have a transparent background. |
+| `.pf-m-secondary` | `.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` | Modifies the element to have secondary styling. |

package/dist/docs/api/v6/components/sidebar/react

@@ -0,0 +1,57 @@
+## Examples
+### Basic
+
+import SidebarBasic from "./SidebarBasic.tsx?raw"
+
+<LiveExample src={SidebarBasic} />
+
+### Stack
+
+import SidebarStack from "./SidebarStack.tsx?raw"
+
+<LiveExample src={SidebarStack} />
+
+### Panel right with gutter
+
+import SidebarPanelRightGutter from "./SidebarPanelRightGutter.tsx?raw"
+
+<LiveExample src={SidebarPanelRightGutter} />
+
+### Sticky panel
+A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
+
+import SidebarStickyPanel from "./SidebarStickyPanel.tsx?raw"
+
+<LiveExample src={SidebarStickyPanel} />
+
+### Static panel
+A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
+
+import SidebarStaticPanel from "./SidebarStaticPanel.tsx?raw"
+
+<LiveExample src={SidebarStaticPanel} />
+
+### Responsive panel width
+A `tabIndex` should be added to the `Sidebar` when there is scrollable content in order for the  overflow content to be accessible by keyboard.
+
+import SidebarResponsivePanel from "./SidebarResponsivePanel.tsx?raw"
+
+<LiveExample src={SidebarResponsivePanel} />
+
+### Border
+
+import SidebarBorder from "./SidebarBorder.tsx?raw"
+
+<LiveExample src={SidebarBorder} />
+
+### Padding on panel
+
+import SidebarPaddingPanel from "./SidebarPaddingPanel.tsx?raw"
+
+<LiveExample src={SidebarPaddingPanel} />
+
+### Padding on content
+
+import SidebarPaddingContent from "./SidebarPaddingContent.tsx?raw"
+
+<LiveExample src={SidebarPaddingContent} />

package/dist/docs/api/v6/components/simple-file-upload/html

@@ -0,0 +1,66 @@
+## Examples
+
+### Basic file upload
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### With helper text
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Upload complete non editable
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Upload complete editable
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Drag file hover component
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### File upload in form with error
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### File upload loading
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+## Documentation
+
+### Overview
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. |
+| `.pf-v6-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
+| `.pf-v6-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
+| `.pf-v6-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
+| `.pf-v6-c-file-upload__helper-text` | `<div>` | Initiates a container for [helper text](/components/helper-text) |
+| `.pf-m-drag-hover` | `.pf-v6-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
+| `.pf-m-loading` | `.pf-v6-c-file-upload` | Modifies file upload for the loading state. |

package/dist/docs/api/v6/components/simple-file-upload/react

@@ -0,0 +1,97 @@
+## Examples
+
+The `FileUpload` component can accept a file via browse or drag-and-drop, and behaves like a standard form field with its `value` and `onFileInputChange` event that is similar to `<input onChange="...">` prop. The `type` prop determines how the `FileUpload` component behaves upon accepting a file, what type of value it passes to its `onDataChange` event.
+
+### Text files
+
+If `type="text"` is passed (and `hideDefaultPreview` is not), a `TextArea` preview will be rendered underneath the filename bar. When a file is selected, its contents will be read into memory and passed to the `onDataChange` event as a string. Every filename change is passed to `onFileInputChange` same as it would do with the `<input>` element.
+Pressing _Clear_ button triggers `onClearClick` event.
+
+### Simple text file
+
+
+import FileUploadSimpleText from "./FileUploadSimpleText.tsx?raw"
+
+<LiveExample src={FileUploadSimpleText} />
+
+### With helper text
+
+You can pass in the `<FileUploadHelperText` sub-component via the `children` property to `<FileUpload>`.
+
+
+import FileUploadWithHelperText from "./FileUploadWithHelperText.tsx?raw"
+
+<LiveExample src={FileUploadWithHelperText} />
+
+### Text file with edits allowed
+
+A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the `allowEditingUploadedText` prop.
+Typing/pasting text in the box will call `onTextChange` with a string, and a string value is expected for the `value` prop. :
+
+
+import FileUploadTextWithEdits from "./FileUploadTextWithEdits.tsx?raw"
+
+<LiveExample src={FileUploadTextWithEdits} />
+
+### Restricting file size and type
+
+Any [props accepted by `react-dropzone`'s `Dropzone` component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a `dropzoneProps` object in order to customize the behavior of the Dropzone, such as restricting the size and type of files allowed. You can also capture and act upon native `react-dropzone` errors using the exposed `DropzoneErrorCode` enum. The following example will only accept CSV files smaller than 1 KB. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the `accept` prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.
+
+#### IMPORTANT: A note about security
+
+Restricting file sizes and types in this way is for user convenience only, and it cannot prevent a malicious user from submitting anything to your server. As with any user input, your application should also validate, sanitize and/or reject restricted files on the server side.
+
+### Text file with restrictions
+
+
+import FileUploadTextWithRestrictions from "./FileUploadTextWithRestrictions.tsx?raw"
+
+<LiveExample src={FileUploadTextWithRestrictions} />
+
+### Other file types
+
+If no `type` prop is specified, the component will not read files directly. When a file is selected, a [`File` object](https://developer.mozilla.org/en-US/docs/Web/API/File) will be passed as a second argument to `onFileInputChange` and your application will be responsible for reading from it (e.g. by using the [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) or attaching it to a [FormData object](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects)). A `File` object will also be expected for the `value` prop instead of a string, and no preview of the file contents will be shown by default. The `onReadStarted` and `onReadFinished` callbacks will also not be called since the component is not reading the file.
+
+### Simple file of any format
+
+
+import FileUploadSimpleFile from "./FileUploadSimpleFile.tsx?raw"
+
+<LiveExample src={FileUploadSimpleFile} />
+
+### Customizing the file preview
+
+Regardless of `type`, the preview area (the TextArea, or any future implementations of default previews for other types) can be removed by passing `hideDefaultPreview`, and a custom one can be rendered by passing `children`.
+
+### Custom file preview
+
+
+import FileUploadCustomPreview from "./FileUploadCustomPreview.tsx?raw"
+
+<LiveExample src={FileUploadCustomPreview} />
+
+### Bringing your own file browse logic
+
+`FileUpload` is a thin wrapper around the `FileUploadField` presentational component. If you need to implement your own logic for accepting files, you can instead render a `FileUploadField` directly, which does not include `react-dropzone` and requires additional props (e.g. `onBrowseButtonClick`, `onClearButtonClick`, `isDragActive`).
+
+Note that the `isLoading` prop is styled to position the spinner dead center above the entire component, so it should not be used with `hideDefaultPreview` unless a custom empty-state preview is provided via `children`. The below example prevents `isLoading` and `hideDefaultPreview` from being used at the same time. You can always provide your own spinner as part of the `children`!
+
+### Custom file upload
+
+
+import FileUploadCustomUpload from "./FileUploadCustomUpload.tsx?raw"
+
+<LiveExample src={FileUploadCustomUpload} />
+
+## Types
+
+File upload uses the `DropzoneOptions` type from react-dropzone. It is comprised of additional props with their own types. For more information on using `DropzoneOptions` visit [react-dropzone props and methods](https://react-dropzone.js.org/#src).
+
+Additionally, it calls the `onDataChange`, `onReadFailed`, `onReadFinished`, and `onReadStarted` callbacks with an event of type `DropEvent`. `DropEvent` is a union comprised of the following types:
+
+```
+ React.DragEvent<HTMLElement>
+ | React.ChangeEvent<HTMLInputElement>
+ | DragEvent
+ | Event
+```

package/dist/docs/api/v6/components/simple-list/html

@@ -0,0 +1,42 @@
+## Examples
+
+### Simple list
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Simple list with links
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Grouped list
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `tabindex="0"` | `a.pf-v6-c-simple-list__item-link` | Inserts the link into the tab order of the page so that it is focusable. **Required** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-simple-list` | `<div>` | Initiates a simple list. |
+| `.pf-v6-c-simple-list__section` | `<section>` | Initiates a simple list section. |
+| `.pf-v6-c-simple-list__title` | `<h2>` | Initiates a simple list title. |
+| `.pf-v6-c-simple-list__list` | `<ul>` | Initiates a simple list unordered list. |
+| `.pf-v6-c-simple-list__item` | `<li>` | Initiates a simple list item. |
+| `.pf-v6-c-simple-list__item-link` | `<button>`, `<a>` | Initiates a simple list item link. It can be a button or a link depending on the context. |
+| `.pf-m-current` | `.pf-v6-c-simple-list__item-link` | Modifies the simple list item link for the current state. |