Warning alert:Deprecated feature
Examples
Using more complex options with actions
Composable structure
The dual list selector can also be built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
<DualListSelector>
<DualListSelectorPane>
<DualListSelectorList>
<DualListSelectorListItem />
</DualListSelectorList>
</DualListSelectorPane>
<DualListSelectorControlsWrapper>
<DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
</DualListSelectorControlsWrapper>
<DualListSelectorPane isChosen>
<DualListSelectorList>
<DualListSelectorListItem />
</DualListSelectorList>
</DualListSelectorPane>
</DualListSelector>
Composable with drag and drop
Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the drag and drop demos.
This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
- wrap the
DualListSelectorPane
in aDragDrop
component - wrap the
DualListSelectorList
in aDroppable
component - wrap the
DualListSelectorListItem
components in aDraggable
component - define an
onDrop
callback which reorders the sortable options.- The
onDrop
function provides the starting location and destination location for a dragged item. It should return true to enable the 'drop' animation in the new location and false to enable the 'drop' animation back to the item's old position. - define an
onDrag
callback which ensures that the drag event will not cross hairs with theonOptionSelect
click event set on the option. Note: theignoreNextOptionSelect
state value is used to prevent selection while dragging.
- The
Keyboard and screen reader accessibility for the <DragDrop>
component is still in development.
Props
DualListSelector
Name | Type | Default | Description |
---|---|---|---|
addAll | (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void | Optional callback for the dynamically built add all button | |
addAllAriaLabel | string | 'Add all' | Accessible label for the dynamically built add all button |
addAllTooltip | React.ReactNode | Tooltip content for the dynamically built add all button | |
addAllTooltipProps | any | Additonal tooltip properties for the dynamically built add all tooltip | |
addSelected | (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void | Optional callback for the dynamically built add selected button | |
addSelectedAriaLabel | string | 'Add selected' | Accessible label for the dynamically built add selected button |
addSelectedTooltip | React.ReactNode | Tooltip content for the dynamically built add selected button | |
addSelectedTooltipProps | any | Additonal tooltip properties for the dynamically built add selected tooltip | |
availableOptions | React.ReactNode[] | DualListSelectorTreeItemData[] | [] | Options to display in the dynamically built available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format. |
availableOptionsActions | React.ReactNode[] | Actions to be displayed above the dynamically built available options pane. | |
availableOptionsSearchAriaLabel | string | 'Available search input' | Accessible label for the search input on the dynamically built available options pane. |
availableOptionsStatus | string | Status message to display above the dynamically built available options pane. | |
availableOptionsTitle | string | 'Available options' | Title applied to the dynamically built available options pane. |
children | React.ReactNode | '' | Content to be rendered in the dual list selector. Panes & controls will not be built dynamically when children are provided. |
chosenOptions | React.ReactNode[] | DualListSelectorTreeItemData[] | [] | Options to display in the dynamically built chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format. |
chosenOptionsActions | React.ReactNode[] | Actions to be displayed above the dynamically built chosen options pane. | |
chosenOptionsSearchAriaLabel | string | 'Chosen search input' | Accessible label for the search input on the dynamically built chosen options pane. |
chosenOptionsStatus | string | Status message to display above the dynamically built chosen options pane. | |
chosenOptionsTitle | string | 'Chosen options' | Title applied to the dynamically built chosen options pane. |
className | string | Additional classes applied to the dual list selector. | |
controlsAriaLabel | string | 'Selector controls' | Accessible label for the dynamically built controls between the two panes. |
filterOption | (option: React.ReactNode, input: string) => boolean | Optional filter function for custom filtering based on search string. Used with a dynamically built search input. | |
id | string | Id of the dual list selector. | |
isDisabled | boolean | false | Flag indicating if the dual list selector is in a disabled state |
isSearchable | boolean | Flag indicating a search bar should be included above both the dynamically built available and chosen panes. | |
isTree | boolean | false | Flag indicating if the dual list selector uses trees instead of simple lists |
onAvailableOptionsSearchInputChanged | (event: React.FormEvent<HTMLInputElement>, value: string) => void | A callback for when the search input value for the dynamically built available options changes. | |
onChosenOptionsSearchInputChanged | (event: React.FormEvent<HTMLInputElement>, value: string) => void | A callback for when the search input value for the dynamically built chosen options changes. | |
onListChange | ( event: React.MouseEvent<HTMLElement>, newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[] ) => void | Callback fired every time dynamically built options are chosen or removed | |
onOptionCheck | ( event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent, checked: boolean, checkedId: string, newCheckedItems: string[] ) => void | Optional callback fired when a dynamically built option is checked | |
onOptionSelect | ( event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, isChosen: boolean, id: string, itemData: any, parentData: any ) => void | Optional callback fired when a dynamically built option is selected | |
removeAll | (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void | Optional callback for the dynamically built remove all button | |
removeAllAriaLabel | string | 'Remove all' | Accessible label for the dynamically built remove all button |
removeAllTooltip | React.ReactNode | Tooltip content for the dynamically built remove all button | |
removeAllTooltipProps | any | Additonal tooltip properties for the dynamically built remove all tooltip | |
removeSelected | (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void | Optional callback for the dynamically built remove selected button | |
removeSelectedAriaLabel | string | 'Remove selected' | Accessible label for the dynamically built remove selected button |
removeSelectedTooltip | React.ReactNode | Tooltip content for the dynamically built remove selected button | |
removeSelectedTooltipProps | any | Additonal tooltip properties for the dynamically built remove selected tooltip |
DualListSelectorPane
Name | Type | Default | Description |
---|---|---|---|
actions | React.ReactNode[] | Actions to place above the pane. | |
children | React.ReactNode | A dual list selector list or dual list selector tree to be rendered in the pane. | |
className | string | '' | Additional classes applied to the dual list selector pane. |
id | string | getUniqueId('dual-list-selector-pane') | Id of the pane. |
isChosen | boolean | false | Flag indicating if this pane is the chosen pane. |
isDisabled | boolean | false | Flag indicating whether the component is disabled. |
listMinHeight | string | Minimum height of the list of options rendered in the pane. * | |
onSearch | (event: React.ChangeEvent<HTMLInputElement>) => void | Callback for search input. To be used when isSearchable is true. | |
searchInput | React.ReactNode | A search input placed above the list at the top of the pane, before actions. | |
status | string | '' | Status to display above the pane. |
title | React.ReactNode | '' | Title of the pane. |
DualListSelectorList
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the dual list selector list |
DualListSelectorListItem
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the dual list selector. | |
className | string | Additional classes applied to the dual list selector. | |
draggableButtonAriaLabel | string | Accessible label for the draggable button on draggable list items | |
id | string | ID of the option. | |
isDisabled | boolean | Flag indicating if the dual list selector is in a disabled state | |
isDraggable | boolean | Flag indicating this item is draggable for reordring | |
isSelected | boolean | Flag indicating the list item is currently selected. | |
onOptionSelect | (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, id?: string) => void | Callback fired when an option is selected. |
DualListSelectorControlsWrapper
Name | Type | Default | Description |
---|---|---|---|
aria-label | string | Accessible label for the dual list selector controls wrapper. | |
children | React.ReactNode | Anything that can be rendered inside of the wrapper. | |
className | string | Additional classes added to the wrapper. |
DualListSelectorControl
Name | Type | Default | Description |
---|---|---|---|
aria-label | string | Accessible label for the dual list selector control. | |
children | React.ReactNode | Content to be rendered in the dual list selector control. | |
className | string | Additional classes applied to the dual list selector control. | |
isDisabled | boolean | Flag indicating the control is disabled. | |
onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Callback fired when dual list selector control is selected. | |
tooltipContent | React.ReactNode | Content to be displayed in a tooltip on hover of control. | |
tooltipProps | any | Additional tooltip properties passed to the tooltip. |
DualListSelectorTree
Name | Type | Default | Description |
---|---|---|---|
datarequired | DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]) | Data of the tree view | |
defaultAllExpanded | boolean | false | Sets the default expanded behavior |
hasBadges | boolean | false | Flag indicating if all options should have badges |
id | string | ID of the tree view | |
isDisabled | boolean | false | Flag indicating if the dual list selector tree is in the disabled state |
onOptionCheck | ( event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent, isChecked: boolean, itemData: DualListSelectorTreeItemData ) => void | Callback fired when an option is checked |
DualListSelectorTreeItemData
Name | Type | Default | Description |
---|---|---|---|
idrequired | string | ID of the option | |
isCheckedrequired | boolean | Checked state of the option | |
textrequired | string | Text of the option | |
badgeProps | any | Additional properties to pass to the option badge | |
checkProps | any | Additional properties to pass to the option checkbox | |
children | DualListSelectorTreeItemData[] | Content rendered inside the dual list selector. | |
className | string | Additional classes applied to the dual list selector. | |
defaultExpanded | boolean | Flag indicating this option is expanded by default. | |
hasBadge | boolean | Flag indicating this option has a badge | |
isDisabled | boolean | Flag indicating whether the component is disabled. | |
onOptionCheck | ( event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent, isChecked: boolean, isChosen: boolean, itemData: DualListSelectorTreeItemData ) => void | Callback fired when an option is checked | |
parentId | string | Parent id of an option |
CSS variables
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__header--GridArea | pane-header | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__tools--GridArea | pane-tools | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__status--GridArea | pane-status | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__menu--GridArea | pane-menu | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__controls--GridArea | controls | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector--m-chosen__header--GridArea | pane-header-c | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector--m-chosen__tools--GridArea | pane-tools-c | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector--m-chosen__status--GridArea | pane-status-c | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector--m-chosen__menu--GridArea | pane-menu-c | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min | 12.5rem | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max | 28.125rem | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__header--MarginBlockEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__title-text--FontWeight | 500 | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__title-text--FontSize | 1rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__tools--MarginBlockEnd | 1rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__menu--BorderWidth | 1px | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__menu--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__menu--BorderRadius | 6px | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__menu--MinHeight | 12.5rem | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__menu--MaxHeight | 20rem | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__menu--MarginBlockStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item-row--FontSize | 0.875rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item--m-ghost-row--Opacity | .4 | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--PaddingBlockStart | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--PaddingInlineEnd | 1rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--PaddingBlockEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--indent--base | calc(1rem + 0.5rem + 0.875rem) | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--nested-indent--base | calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart | 0.25rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-text--Color | (In light theme) #4d4d4d | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color | (In light theme) #a3a3a3 | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__status--MarginBlockEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__status-text--FontSize | 0.875rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__status-text--Color | (In light theme) #4d4d4d | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__controls--PaddingInlineEnd | 1rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__controls--PaddingInlineStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__controls--Gap | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__controls--MarginBlockStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 0 | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX | -100% | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-check--MarginInlineEnd | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-count--MarginInlineStart | 0.5rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor | (In light theme) #e0e0e0 | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate | 0 | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate | 90deg | ||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-toggle-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth | 0.875rem | ||
| ||||
:where(:root, .pf-v6-c-dual-list-selector) | --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color | (In light theme) #a3a3a3 | ||
| ||||
.pf-v6-c-dual-list-selector__pane.pf-m-chosen | --pf-v6-c-dual-list-selector__header--GridArea | pane-header-c | ||
| ||||
.pf-v6-c-dual-list-selector__pane.pf-m-chosen | --pf-v6-c-dual-list-selector__tools--GridArea | pane-tools-c | ||
| ||||
.pf-v6-c-dual-list-selector__pane.pf-m-chosen | --pf-v6-c-dual-list-selector__status--GridArea | pane-status-c | ||
| ||||
.pf-v6-c-dual-list-selector__pane.pf-m-chosen | --pf-v6-c-dual-list-selector__menu--GridArea | pane-menu-c | ||
| ||||
.pf-v6-c-dual-list-selector__list | --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate | 0 | ||
.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list | --pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart | 0 | ||
.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list | --pf-v6-c-dual-list-selector__item-toggle--MarginBlockEnd | 0 | ||
.pf-v6-c-dual-list-selector__list-item:focus | --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-dual-list-selector__list-item.pf-m-expandable | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | 1rem | ||
| ||||
.pf-v6-c-dual-list-selector__list-item.pf-m-expanded | --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate | 90deg | ||
| ||||
.pf-v6-c-dual-list-selector__list-item.pf-m-disabled | --pf-v6-c-dual-list-selector__item-text--Color | (In light theme) #a3a3a3 | ||
| ||||
.pf-v6-c-dual-list-selector__list-item.pf-m-disabled | --pf-v6-c-dual-list-selector__item-toggle-icon--Color | (In light theme) #a3a3a3 | ||
| ||||
.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected | --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected .pf-v6-c-dual-list-selector__item-text | --pf-v6-c-dual-list-selector__item-text--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-dual-list-selector__list-item-row:hover | --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
.pf-v6-c-dual-list-selector__list-item-row.pf-m-check | --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor | transparent | ||
.pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row | --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor | (In light theme) rgba(199, 199, 199, 0.2500) | ||
| ||||
.pf-v6-c-dual-list-selector__draggable + .pf-v6-c-dual-list-selector__item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | 0.25rem | ||
| ||||
.pf-v6-c-dual-list-selector__draggable .pf-v6-c-button | --pf-v6-c-button--FontSize | inherit | ||
.pf-v6-c-dual-list-selector__item-count .pf-v6-c-badge.pf-m-read | --pf-v6-c-badge--m-read--BackgroundColor | (In light theme) #e0e0e0 | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem)) | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 1rem | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem)) | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 1rem | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem)) | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 1rem | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem)) | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 1rem | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem)) | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 1rem | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem)) | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 1rem | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem)) | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 1rem | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem)) | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 1rem | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem)) | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 1rem | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__item--PaddingInlineStart | calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem)) | ||
| ||||
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item | --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart | 1rem | ||
|