diff --git a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx b/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx index a0c1b195c61..eeb8195f708 100644 --- a/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx +++ b/packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx @@ -8,44 +8,45 @@ import { Panel, PanelMain, PanelMainBody } from '../Panel'; import { css } from '@patternfly/react-styles'; export interface AdvancedSearchMenuProps extends Omit, 'onChange'> { - /** Additional classes added to the Advanced search menu */ + /** Delimiter in the query string for pairing attributes with search values. + * Required whenever attributes are passed as props. + */ + advancedSearchDelimiter?: string; + /** Array of attribute values used for dynamically generated advanced search. */ + attributes?: string[] | SearchAttribute[]; + /** Additional classes added to the advanced search menu. */ className?: string; - /** Value of the search input */ - value?: string; - /** Ref of the div wrapping the whole search input **/ - parentRef?: React.RefObject; - /** Ref of the input element within the search input**/ - parentInputRef?: React.RefObject; - /** Function which builds an attribute-value map by parsing the value in the search input */ + /* Additional elements added after the attributes in the form. + * The new form elements can be wrapped in a form group component for automatic formatting. */ + formAdditionalItems?: React.ReactNode; + /** Function which builds an attribute-value map by parsing the value in the search input. */ getAttrValueMap?: () => { [key: string]: string }; - /** A callback for when the search button clicked changes */ + /** Attribute label for strings unassociated with one of the provided listed attributes. */ + hasWordsAttrLabel?: React.ReactNode; + /** Flag for toggling the open/close state of the advanced search menu. */ + isSearchMenuOpen?: boolean; + /** A callback for when the input value changes. */ + onChange?: (value: string, event: React.FormEvent) => void; + /** A callback for when the user clicks the clear button. */ + onClear?: (event: React.SyntheticEvent) => void; + /** A callback for when the search button is clicked. */ onSearch?: ( value: string, event: React.SyntheticEvent, attrValueMap: { [key: string]: string } ) => void; - /** A callback for when the user clicks the clear button */ - onClear?: (event: React.SyntheticEvent) => void; - /** A callback for when the input value changes */ - onChange?: (value: string, event: React.FormEvent) => void; - /** Function called to toggle the advanced search menu */ + /** A callback for when the open advanced search button is clicked. */ onToggleAdvancedMenu?: (e: React.SyntheticEvent) => void; - /** Flag for toggling the open/close state of the advanced search menu */ - isSearchMenuOpen?: boolean; - /** Label for the buttons which reset the advanced search form and clear the search input */ + /** Ref of the input element within the search input. */ + parentInputRef?: React.RefObject; + /** Ref of the div wrapping the whole search input. */ + parentRef?: React.RefObject; + /** Label for the button which resets the advanced search form and clears the search input. */ resetButtonLabel?: string; - /** Label for the buttons which called the onSearch event handler */ + /** Label for the button which calls the onSearch event handler. */ submitSearchButtonLabel?: string; - /** Array of attribute values used for dynamically generated advanced search */ - attributes?: string[] | SearchAttribute[]; - /* Additional elements added after the attributes in the form. - * The new form elements can be wrapped in a FormGroup component for automatic formatting */ - formAdditionalItems?: React.ReactNode; - /** Attribute label for strings unassociated with one of the provided listed attributes */ - hasWordsAttrLabel?: React.ReactNode; - /** Delimiter in the query string for pairing attributes with search values. - * Required whenever attributes are passed as props */ - advancedSearchDelimiter?: string; + /** Value of the search input. */ + value?: string; } export const AdvancedSearchMenu: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx index d9f8a125346..a7290a35fc6 100644 --- a/packages/react-core/src/components/SearchInput/SearchInput.tsx +++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx @@ -13,94 +13,108 @@ import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../ import { InputGroup } from '../InputGroup'; import { Popper } from '../../helpers'; +/** Properties for adding search attributes to an advanced search input. These properties must + * be passed in as an object within an array to the search input component's attribute properrty. + */ + export interface SearchAttribute { /** The search attribute's value to be provided in the search input's query string. - * It should have no spaces and be unique for every attribute */ + * It should have no spaces and be unique for every attribute. + */ attr: string; - /** The search attribute's display name. It is used to label the field in the advanced search menu */ + /** The search attribute's display name. It is used to label the field in the advanced + * search menu. + */ display: React.ReactNode; } +/** Properties for creating an expandable search input. These properties should be passed into + * the search input component's expandableInput property. + */ + export interface ExpandableInput { - /** Flag to indicate if the search input is expanded */ + /** Flag to indicate if the search input is expanded. */ isExpanded: boolean; - /** Callback function to toggle the expandable search input */ + /** Callback function to toggle the expandable search input. */ onToggleExpand: (isExpanded: boolean, event: React.SyntheticEvent) => void; - /** An accessible label for the expandable search input toggle */ + /** An accessible label for the expandable search input toggle. */ toggleAriaLabel: string; } +/** The main search input component. */ + export interface SearchInputProps extends Omit, 'onChange' | 'results' | 'ref'> { - /** Additional classes added to the banner */ - className?: string; - /** Value of the search input */ - value?: string; - /** Flag indicating if search input is disabled */ - isDisabled?: boolean; - /** An accessible label for the search input */ + /** Delimiter in the query string for pairing attributes with search values. + * Required whenever attributes are passed as props. + */ + advancedSearchDelimiter?: string; + /** The container to append the menu to. + * If your menu is being cut off you can append it to an element higher up the DOM tree. + * Some examples: + * appendTo={() => document.body} + * appendTo={document.getElementById('target')} + */ + appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; + /** An accessible label for the search input. */ 'aria-label'?: string; - /** placeholder text of the search input */ - placeholder?: string; - /** @hide A reference object to attach to the input box */ + /** Array of attribute values used for dynamically generated advanced search. */ + attributes?: string[] | SearchAttribute[]; + /** Additional classes added to the search input. */ + className?: string; + /** Object that makes the search input expandable/collapsible. */ + expandableInput?: ExpandableInput; + /* Additional elements added after the attributes in the form. + * The new form elements can be wrapped in a form group component for automatic formatting. */ + formAdditionalItems?: React.ReactNode; + /** Attribute label for strings unassociated with one of the provided listed attributes. */ + hasWordsAttrLabel?: React.ReactNode; + /** A suggestion for autocompleting. */ + hint?: string; + /** @hide A reference object to attach to the input box. */ innerRef?: React.RefObject; - /** A callback for when the input value changes */ + /** A flag for controlling the open state of a custom advanced search implementation. */ + isAdvancedSearchOpen?: boolean; + /** Flag indicating if search input is disabled. */ + isDisabled?: boolean; + /** Flag indicating if the next navigation button is disabled. */ + isNextNavigationButtonDisabled?: boolean; + /** Flag indicating if the previous navigation button is disabled. */ + isPreviousNavigationButtonDisabled?: boolean; + /** Accessible label for the button to navigate to next result. */ + nextNavigationButtonAriaLabel?: string; + /** A callback for when the input value changes. */ onChange?: (value: string, event: React.FormEvent) => void; - /** A suggestion for autocompleting */ - hint?: string; - /** Object that makes the search input expandable/collapsible */ - expandableInput?: ExpandableInput; - /** A callback for when the search button clicked changes */ + /** A callback for when the user clicks the clear button. */ + onClear?: (event: React.SyntheticEvent) => void; + /** A callback for when the user clicks to navigate to next result. */ + onNextClick?: (event: React.SyntheticEvent) => void; + /** A callback for when the user clicks to navigate to previous result. */ + onPreviousClick?: (event: React.SyntheticEvent) => void; + /** A callback for when the search button is clicked. */ onSearch?: ( value: string, event: React.SyntheticEvent, attrValueMap: { [key: string]: string } ) => void; - /** A callback for when the user clicks the clear button */ - onClear?: (event: React.SyntheticEvent) => void; - /** Label for the buttons which reset the advanced search form and clear the search input */ - resetButtonLabel?: string; - /** Label for the buttons which called the onSearch event handler */ - submitSearchButtonLabel?: string; - /** A callback for when the open advanced search button is clicked */ + /** A callback for when the open advanced search button is clicked. */ onToggleAdvancedSearch?: (event: React.SyntheticEvent, isOpen?: boolean) => void; - /** A flag for controlling the open state of a custom advanced search implementation */ - isAdvancedSearchOpen?: boolean; - /** Label for the button which opens the advanced search form menu */ + /** Accessible label for the button which opens the advanced search form menu. */ openMenuButtonAriaLabel?: string; - /** Label for the button to navigate to previous result */ + /** Placeholder text of the search input. */ + placeholder?: string; + /** Accessible label for the button to navigate to previous result. */ previousNavigationButtonAriaLabel?: string; - /** Flag indicating if the previous navigation button is disabled */ - isPreviousNavigationButtonDisabled?: boolean; - /** Label for the button to navigate to next result */ - nextNavigationButtonAriaLabel?: string; - /** Flag indicating if the next navigation button is disabled */ - isNextNavigationButtonDisabled?: boolean; - /** Function called when user clicks to navigate to next result */ - onNextClick?: (event: React.SyntheticEvent) => void; - /** Function called when user clicks to navigate to previous result */ - onPreviousClick?: (event: React.SyntheticEvent) => void; - /** The number of search results returned. Either a total number of results, - * or a string representing the current result over the total number of results. i.e. "1 / 5" */ - resultsCount?: number | string; - /** Array of attribute values used for dynamically generated advanced search */ - attributes?: string[] | SearchAttribute[]; - /* Additional elements added after the attributes in the form. - * The new form elements can be wrapped in a FormGroup component for automatic formatting */ - formAdditionalItems?: React.ReactNode; - /** Attribute label for strings unassociated with one of the provided listed attributes */ - hasWordsAttrLabel?: React.ReactNode; - /** Delimiter in the query string for pairing attributes with search values. - * Required whenever attributes are passed as props */ - advancedSearchDelimiter?: string; - /** The container to append the menu to. - * If your menu is being cut off you can append it to an element higher up the DOM tree. - * Some examples: - * appendTo={() => document.body} - * appendTo={document.getElementById('target')} - */ - appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; /** @beta Opt-in for updated popper that does not use findDOMNode. */ removeFindDomNode?: boolean; + /** Label for the button which resets the advanced search form and clears the search input. */ + resetButtonLabel?: string; + /** The number of search results returned. Either a total number of results, + * or a string representing the current result over the total number of results. i.e. "1 / 5". */ + resultsCount?: number | string; + /** Label for the button which calls the onSearch event handler. */ + submitSearchButtonLabel?: string; + /** Value of the search input. */ + value?: string; } const SearchInputBase: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/Slider/Slider.tsx b/packages/react-core/src/components/Slider/Slider.tsx index 6fdcb839dfb..ff0e97f8787 100644 --- a/packages/react-core/src/components/Slider/Slider.tsx +++ b/packages/react-core/src/components/Slider/Slider.tsx @@ -7,64 +7,70 @@ import { InputGroup, InputGroupText } from '../InputGroup'; import { TextInput } from '../TextInput'; import { Tooltip } from '../Tooltip'; +/** Properties for creating custom steps in a slider. These properties should be passed in as + * an object within an array to the slider component's customSteps property. + */ export interface SliderStepObject { - /** Value of the step. This value is a percentage of the slider where the tick is drawn. */ - value: number; - /** The display label for the step value. This is also used for the aria-valuetext */ - label: string; - /** Flag to hide the label */ + /** Flag to hide the label. */ isLabelHidden?: boolean; + /** The display label for the step value. This is also used for the aria-valuetext attribute. */ + label: string; + /** Value of the step. This value is a percentage of the slider where the tick is drawn. */ + value: number; } +/** The main slider component. */ export interface SliderProps extends Omit, 'onChange'> { - /** Additional classes added to the spinner. */ - className?: string; - /** Current value */ - value?: number; - /** Flag indicating if the slider is is discrete for custom steps. This will cause the slider to snap to the closest value. */ + /** Flag indicating if the slider is discrete for custom steps. This will cause the slider + * to snap to the closest value. + */ areCustomStepsContinuous?: boolean; - /** Adds disabled styling and disables the slider and the input component is present */ - isDisabled?: boolean; - /** The step interval*/ - step?: number; - /** Minimum permitted value */ - min?: number; - /** The maximum permitted value */ - max?: number; - /** Flag to indicate if boundaries should be shown for slider that does not have custom steps */ - showBoundaries?: boolean; - /** Flag to indicate if ticks should be shown for slider that does not have custom steps */ - showTicks?: boolean; + /** One or more id's to use for the slider thumb's accessible description. */ + 'aria-describedby'?: string; + /** One or more id's to use for the slider thumb's accessible label. */ + 'aria-labelledby'?: string; + /** Additional classes added to the slider. */ + className?: string; /** Array of custom slider step objects (value and label of each step) for the slider. */ customSteps?: SliderStepObject[]; - /** Flag to show value input field */ - isInputVisible?: boolean; - /** Value displayed in the input field */ - inputValue?: number; - /** Aria label for the input field */ - inputAriaLabel?: string; - /* Aria label for the thumb */ - thumbAriaLabel?: string; - /* Adds a tooltip over the thumb containing the current value */ + /* Adds a tooltip over the slider thumb containing the current value. */ hasTooltipOverThumb?: boolean; - /** Label that is place after the input field */ + /** Accessible label for the input field. */ + inputAriaLabel?: string; + /** Text label that is place after the input field. */ inputLabel?: string | number; - /** Position of the input */ + /** Position of the input. */ inputPosition?: 'aboveThumb' | 'right'; - /** Value change callback. This is called when the slider value changes */ + /** Value displayed in the input field. */ + inputValue?: number; + /** Adds disabled styling, and disables the slider and the input component if present. */ + isDisabled?: boolean; + /** Flag to show value input field. */ + isInputVisible?: boolean; + /** Actions placed to the left of the slider. */ + leftActions?: React.ReactNode; + /** The maximum permitted value. */ + max?: number; + /** The minimum permitted value. */ + min?: number; + /** Value change callback. This is called when the slider value changes. */ onChange?: ( value: number, inputValue?: number, setLocalInputValue?: React.Dispatch> ) => void; - /** Actions placed to the left of the slider */ - leftActions?: React.ReactNode; - /** Actions placed to the right of the slider */ + /** Actions placed to the right of the slider. */ rightActions?: React.ReactNode; - /** One or more id's to use for the slider thumb description */ - 'aria-describedby'?: string; - /** One or more id's to use for the slider thumb label */ - 'aria-labelledby'?: string; + /** Flag to indicate if boundaries should be shown for slider that does not have custom steps. */ + showBoundaries?: boolean; + /** Flag to indicate if ticks should be shown for slider that does not have custom steps. */ + showTicks?: boolean; + /** The step interval. */ + step?: number; + /* Accessible label for the slider thumb. */ + thumbAriaLabel?: string; + /** Current value of the slider. */ + value?: number; } const getPercentage = (current: number, max: number) => (100 * current) / max; diff --git a/packages/react-core/src/components/Slider/SliderStep.tsx b/packages/react-core/src/components/Slider/SliderStep.tsx index 4ab87ed23ce..ad7d6f939b9 100644 --- a/packages/react-core/src/components/Slider/SliderStep.tsx +++ b/packages/react-core/src/components/Slider/SliderStep.tsx @@ -3,18 +3,18 @@ import styles from '@patternfly/react-styles/css/components/Slider/slider'; import { css } from '@patternfly/react-styles'; export interface SliderStepProps extends Omit, 'label'> { - /** Additional classes added to the slider steps. */ + /** Additional classes added to the slider step. */ className?: string; - /** Step value **/ - value?: number; - /** Step label **/ - label?: string; - /** Flag indicating that the tick should be hidden */ - isTickHidden?: boolean; - /** Flag indicating that the label should be hidden */ - isLabelHidden?: boolean; - /** Flag indicating the step is active */ + /** Flag indicating the step is active. */ isActive?: boolean; + /** Flag indicating that the label should be hidden. */ + isLabelHidden?: boolean; + /** Flag indicating that the tick should be hidden. */ + isTickHidden?: boolean; + /** Step label. **/ + label?: string; + /** Step value. **/ + value?: number; } export const SliderStep: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/TreeView/TreeView.tsx b/packages/react-core/src/components/TreeView/TreeView.tsx index 598a932ac0c..f42d021a3f9 100644 --- a/packages/react-core/src/components/TreeView/TreeView.tsx +++ b/packages/react-core/src/components/TreeView/TreeView.tsx @@ -3,76 +3,90 @@ import { TreeViewList } from './TreeViewList'; import { TreeViewCheckProps, TreeViewListItem } from './TreeViewListItem'; import { TreeViewRoot } from './TreeViewRoot'; +/** Properties that make up a tree view data item. These properties should be passed in as an + * object to one of the various tree view component properties which accept TreeViewDataItem as + * a type. + */ + export interface TreeViewDataItem { - /** Internal content of a tree view item */ - name: React.ReactNode; - /** Title a tree view item. Only used in Compact presentations. */ - title?: React.ReactNode; - /** ID of a tree view item */ - id?: string; - /** Child nodes of a tree view item */ + /** Action of a tree view item, which can be either a button or dropdown component. */ + action?: React.ReactNode; + /** Additional properties of the tree view item badge. */ + badgeProps?: any; + /** Additional properties of the tree view item checkbox. */ + checkProps?: TreeViewCheckProps; + /** Child nodes of a tree view item. */ children?: TreeViewDataItem[]; - /** Flag indicating if node is expanded by default */ + /** Optional prop for a custom badge. */ + customBadgeContent?: React.ReactNode; + /** Flag indicating if node is expanded by default. */ defaultExpanded?: boolean; - /** Default icon of a tree view item */ - icon?: React.ReactNode; - /** Expanded icon of a tree view item */ + /** Expanded icon of a tree view item. */ expandedIcon?: React.ReactNode; - /** Flag indicating if a tree view item has a checkbox */ - hasCheck?: boolean; - /** Additional properties of the tree view item checkbox */ - checkProps?: TreeViewCheckProps; - /** Flag indicating if a tree view item has a badge */ + /** Flag indicating if a tree view item has a badge. */ hasBadge?: boolean; - /** Optional prop for custom badge */ - customBadgeContent?: React.ReactNode; - /** Additional properties of the tree view item badge */ - badgeProps?: any; - /** Action of a tree view item, can be a Button or Dropdown */ - action?: React.ReactNode; + /** Flag indicating if a tree view item has a checkbox. */ + hasCheck?: boolean; + /** Default icon of a tree view item. */ + icon?: React.ReactNode; + /** ID of a tree view item. */ + id?: string; + /** Internal content of a tree view item. */ + name: React.ReactNode; + /** Title of a tree view item. Only used in compact presentations. */ + title?: React.ReactNode; } +/** The main tree view component. */ + export interface TreeViewProps { - /** Data of the tree view */ + /** Active items of tree view. */ + activeItems?: TreeViewDataItem[]; + /** Sets the expanded state on all tree nodes, overriding default behavior and current + * internal state. + */ + allExpanded?: boolean; + /** Class to add if not passed a parentItem property. */ + className?: string; + /** Comparison function for determining active items. */ + compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean; + /** Data of the tree view. */ data: TreeViewDataItem[]; - /** ID of the tree view */ - id?: string; - /** Flag indicating if the tree view is nested */ - isNested?: boolean; - /** Flag indicating if all nodes in the tree view should have checkboxes */ - hasChecks?: boolean; - /** Flag indicating if all nodes in the tree view should have badges */ + /** Sets the default expanded behavior. */ + defaultAllExpanded?: boolean; + /** Icon for all expanded node items. */ + expandedIcon?: React.ReactNode; + /** Flag indicating if all nodes in the tree view should have badges. */ hasBadges?: boolean; - /** Flag indicating if tree view has guide lines. */ + /** Flag indicating if all nodes in the tree view should have checkboxes. */ + hasChecks?: boolean; + /** Flag indicating if the tree view has guide lines. */ hasGuides?: boolean; - /** Flag indicating that tree nodes should be independently selectable, even when having children */ + /** Flag indicating if the tree view is nested. */ + isNested?: boolean; + /** Flag indicating that tree nodes should be independently selectable, even when having + * children. + */ hasSelectableNodes?: boolean; - /** Variant presentation styles for the tree view. */ - variant?: 'default' | 'compact' | 'compactNoBackground'; - /** Icon for all leaf or unexpanded node items */ + /** Icon for all leaf or unexpanded node items. */ icon?: React.ReactNode; - /** Icon for all expanded node items */ - expandedIcon?: React.ReactNode; - /** Sets the expanded state on all tree nodes, overriding default behavior and current internal state */ - allExpanded?: boolean; - /** Sets the default expanded behavior */ - defaultAllExpanded?: boolean; - /** Callback for item selection */ - onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void; - /** Callback for item checkbox selection */ + /** ID of the tree view. */ + id?: string; + /** Callback for item checkbox selection. */ onCheck?: (event: React.ChangeEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void; - /** Active items of tree view */ - activeItems?: TreeViewDataItem[]; - /** Internal. Parent item of a TreeViewListItem */ + /** Callback for item selection. */ + onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void; + /** Internal. Parent item of a tree view list item. */ parentItem?: TreeViewDataItem; - /** Comparison function for determining active items */ - compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean; - /** Class to add to add if not passed a parentItem */ - className?: string; - /** Toolbar to display above the tree view */ + /** Toolbar to display above the tree view. */ toolbar?: React.ReactNode; - /** Flag indicating the TreeView should utilize memoization to help render large data sets. Setting this property requires that `activeItems` pass in an array containing every node in the selected item's path. */ + /** Flag indicating the tree view should utilize memoization to help render large data sets. + * Setting this property requires that the activeItems property is passed an array containing + * every node in the selected item's path. + */ useMemo?: boolean; + /** Variant presentation styles for the tree view. */ + variant?: 'default' | 'compact' | 'compactNoBackground'; } export const TreeView: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/TreeView/TreeViewList.tsx b/packages/react-core/src/components/TreeView/TreeViewList.tsx index 049f814d703..bbca3de692c 100644 --- a/packages/react-core/src/components/TreeView/TreeViewList.tsx +++ b/packages/react-core/src/components/TreeView/TreeViewList.tsx @@ -3,12 +3,12 @@ import { css } from '@patternfly/react-styles'; import { Divider } from '../Divider'; export interface TreeViewListProps extends React.HTMLProps { - /** Flag indicating if the tree view is nested under another tree view */ + /** Child nodes of the current tree view. */ + children: React.ReactNode; + /** Flag indicating if the tree view is nested under another tree view. */ isNested?: boolean; - /** Toolbar to display above the tree view */ + /** Toolbar to display above the tree view. */ toolbar?: React.ReactNode; - /** Child nodes of the current tree view */ - children: React.ReactNode; } export const TreeViewList: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/TreeView/TreeViewListItem.tsx b/packages/react-core/src/components/TreeView/TreeViewListItem.tsx index c4bee30aa15..b678061bc33 100644 --- a/packages/react-core/src/components/TreeView/TreeViewListItem.tsx +++ b/packages/react-core/src/components/TreeView/TreeViewListItem.tsx @@ -11,51 +11,58 @@ export interface TreeViewCheckProps extends Omit void; - /** Callback for item checkbox selection */ - onCheck?: (event: React.ChangeEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void; - /** Flag indicating if a tree view item has a checkbox */ - hasCheck?: boolean; - /** Additional properties of the tree view item checkbox */ + /** Action of a tree view item, which can be either a button or dropdown component. */ + action?: React.ReactNode; + /** Active items of tree view. */ + activeItems?: TreeViewDataItem[]; + /** Additional properties of the tree view item badge. */ + badgeProps?: any; + /** Additional properties of the tree view item checkbox. */ checkProps?: TreeViewCheckProps; - /** Flag indicating if a tree view item has a badge */ - hasBadge?: boolean; - /** Flag indicating that tree nodes should be independently selectable, even when having children */ - isSelectable?: boolean; - /** Optional prop for custom badge */ + /** Child nodes of a tree view item. */ + children?: React.ReactNode; + /** Callback for item comparison function. */ + compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean; + /** Optional prop for a custom badge. */ customBadgeContent?: React.ReactNode; - /** Additional properties of the tree view item badge */ - badgeProps?: any; + /** Flag indicating if node is expanded by default. */ + defaultExpanded?: boolean; + /** Expanded icon of a tree view item. */ + expandedIcon?: React.ReactNode; + /** Flag indicating if a tree view item has a badge. */ + hasBadge?: boolean; + /** Flag indicating if a tree view item has a checkbox. */ + hasCheck?: boolean; + /** Default icon of a tree view item. */ + icon?: React.ReactNode; + /** ID of a tree view item. */ + id?: string; /** Flag indicating if the tree view is using a compact variation. */ isCompact?: boolean; - /** Active items of tree view */ - activeItems?: TreeViewDataItem[]; - /** Data structure of tree view item */ + /** Flag indicating if the node is expanded, overrides internal state. */ + isExpanded?: boolean; + /** Flag indicating that tree nodes should be independently selectable, even when having + * children. + */ + isSelectable?: boolean; + /** Data structure of tree view item. */ itemData?: TreeViewDataItem; - /** Parent item of tree view item */ + /** Internal content of a tree view item. */ + name: React.ReactNode; + /** Callback for item checkbox selection. */ + onCheck?: (event: React.ChangeEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void; + /** Callback for item selection. Note: calling event.preventDefault() will prevent the node + * from toggling. + */ + onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void; + /** Parent item of tree view item. */ parentItem?: TreeViewDataItem; - /** Default icon of a tree view item */ - icon?: React.ReactNode; - /** Expanded icon of a tree view item */ - expandedIcon?: React.ReactNode; - /** Action of a tree view item, can be a Button or Dropdown */ - action?: React.ReactNode; - /** Callback for item comparison function */ - compareItems?: (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean; - /** Flag indicating the TreeView should utilize memoization to help render large data sets. Setting this property requires that `activeItems` pass in an array containing every node in the selected item's path. */ + /** Title of a tree view item. */ + title: React.ReactNode; + /** Flag indicating the tree view should utilize memoization to help render large data sets. + * Setting this property requires that the activeItems property is passed an array containing + * every node in the selected item's path. + */ useMemo?: boolean; } diff --git a/packages/react-core/src/components/TreeView/TreeViewRoot.tsx b/packages/react-core/src/components/TreeView/TreeViewRoot.tsx index 6303e744ea7..511aca77d4b 100644 --- a/packages/react-core/src/components/TreeView/TreeViewRoot.tsx +++ b/packages/react-core/src/components/TreeView/TreeViewRoot.tsx @@ -5,16 +5,16 @@ import { canUseDOM } from '../../helpers/util'; import { handleArrows } from '../../helpers'; export interface TreeViewRootProps { - /** Child nodes of the tree view */ + /** Child nodes of the tree view. */ children: React.ReactNode; - /** Flag indicating if the tree view has checkboxes */ + /** Class to add to add if not passed a parentItem property. */ + className?: string; + /** Flag indicating if the tree view has checkboxes. */ hasChecks?: boolean; /** Flag indicating if tree view has guide lines. */ hasGuides?: boolean; /** Variant presentation styles for the tree view. */ variant?: 'default' | 'compact' | 'compactNoBackground'; - /** Class to add to add if not passed a parentItem */ - className?: string; } export class TreeViewRoot extends React.Component { diff --git a/packages/react-core/src/components/TreeView/TreeViewSearch.tsx b/packages/react-core/src/components/TreeView/TreeViewSearch.tsx index f83ed3744f1..1eea53b1b19 100644 --- a/packages/react-core/src/components/TreeView/TreeViewSearch.tsx +++ b/packages/react-core/src/components/TreeView/TreeViewSearch.tsx @@ -3,17 +3,21 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/TreeView/tree-view'; import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control'; +/** Renders a search input for the tree view. This sub-component should be passed into the + * tree view component's toolbar property. + */ + export interface TreeViewSearchProps extends React.HTMLProps { - /** Callback for search input */ - onSearch?: (event: React.ChangeEvent) => void; - /** Id for the search input */ - id?: string; - /** Name for the search input */ - name?: string; - /** Accessible label for the search input */ + /** Accessible label for the search input. */ 'aria-label'?: string; - /** Classes applied to the wrapper for the search input */ + /** Classes applied to the wrapper for the search input. */ className?: string; + /** Id for the search input. */ + id?: string; + /** Name for the search input. */ + name?: string; + /** Callback for search input. */ + onSearch?: (event: React.ChangeEvent) => void; } export const TreeViewSearch: React.FunctionComponent = ({