From f9238caa1c9cbea2eed8a21b2e06d5ca17c832ff Mon Sep 17 00:00:00 2001 From: Mohammer5 Date: Mon, 28 Oct 2024 15:28:47 +0800 Subject: [PATCH] chore(select a11y): add comment to all props and remove superfluous props --- .../menu/menu-options-list.js | 3 -- .../src/single-select-a11y/menu/menu.js | 3 -- .../single-select-a11y/single-select-a11y.js | 54 ++++++++++++++----- 3 files changed, 42 insertions(+), 18 deletions(-) diff --git a/components/select/src/single-select-a11y/menu/menu-options-list.js b/components/select/src/single-select-a11y/menu/menu-options-list.js index e69072146..e784ecc4e 100644 --- a/components/select/src/single-select-a11y/menu/menu-options-list.js +++ b/components/select/src/single-select-a11y/menu/menu-options-list.js @@ -18,7 +18,6 @@ export const MenuOptionsList = forwardRef(function MenuOptionsList( loading, onChange, onBlur, - onKeyDown, }, ref ) { @@ -54,7 +53,6 @@ export const MenuOptionsList = forwardRef(function MenuOptionsList( aria-busy={loading.toString()} data-test={dataTest} onBlur={onBlur} - onKeyDown={onKeyDown} > {options.map( ( @@ -100,5 +98,4 @@ MenuOptionsList.propTypes = { loading: PropTypes.bool, selected: PropTypes.string, onBlur: PropTypes.func, - onKeyDown: PropTypes.func, } diff --git a/components/select/src/single-select-a11y/menu/menu.js b/components/select/src/single-select-a11y/menu/menu.js index aa52c5129..aa4dd4bfc 100644 --- a/components/select/src/single-select-a11y/menu/menu.js +++ b/components/select/src/single-select-a11y/menu/menu.js @@ -33,7 +33,6 @@ export function Menu({ onBlur, onClose, onFilterChange, - onKeyDown, }) { const [menuWidth, setMenuWidth] = useState('auto') const dataTestPrefix = `${dataTest}-menu` @@ -80,7 +79,6 @@ export function Menu({ selected={selected} onChange={onChange} onBlur={onBlur} - onKeyDown={onKeyDown} /> {loading && } @@ -152,5 +150,4 @@ Menu.propTypes = { onBlur: PropTypes.func, onClose: PropTypes.func, onFilterChange: PropTypes.func, - onKeyDown: PropTypes.func, } diff --git a/components/select/src/single-select-a11y/single-select-a11y.js b/components/select/src/single-select-a11y/single-select-a11y.js index 0b8f7964d..3ff7d814a 100644 --- a/components/select/src/single-select-a11y/single-select-a11y.js +++ b/components/select/src/single-select-a11y/single-select-a11y.js @@ -26,7 +26,6 @@ export function SingleSelectA11y({ filterPlaceholder = '', filterValue = '', filterable = false, - inputMaxHeight = '', labelledBy = '', loading = false, menuLoadingText = '', @@ -42,10 +41,7 @@ export function SingleSelectA11y({ onBlur = () => undefined, onFilterChange = () => undefined, onFocus = () => undefined, - onKeyDown = () => undefined, }) { - // Non-stateful - // ======== const comboBoxId = `${idPrefix}-combo` const valueLabel = _valueLabel || @@ -63,9 +59,6 @@ export function SingleSelectA11y({ ) } - // Stateful - // ======== - // Using `useState` here so components get notified when the value changes (from null -> div) const comboBoxRef = useRef() const listBoxRef = useRef() @@ -188,7 +181,6 @@ export function SingleSelectA11y({ }} onClose={closeMenu} onFilterChange={onFilterChange} - onKeyDown={onKeyDown} /> ) @@ -216,29 +208,61 @@ SingleSelectA11y.propTypes = { /** This will allow us to put an aria-label on the clear button **/ clearText: requiredIf((props) => props.clearable, PropTypes.string), - /** Whether a clear button should be displayed or not **/ + /** Whether a clear button should be displayed or not */ clearable: PropTypes.bool, - /** A value for a `data-test` attribute on the root element **/ + /** A value for a `data-test` attribute on the root element */ dataTest: PropTypes.string, + /** Renders a select with lower height **/ dense: PropTypes.bool, + + /** Disables all interactions with the select (except focussing) */ disabled: PropTypes.bool, + + /** Text or component to display when there are no options */ empty: PropTypes.node, + + /** Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props */ error: sharedPropTypes.statusPropType, + + /** Value will be used as aria-label attribute on the filter input **/ filterLabel: PropTypes.string, + + /** Placeholder for the filter input **/ filterPlaceholder: PropTypes.string, + + /** Value of the filter input **/ filterValue: PropTypes.string, + + /** Whether the select should display a filter input **/ filterable: PropTypes.bool, - inputMaxHeight: PropTypes.string, + + /** Should contain the id of the element that labels the select, if applicable **/ labelledBy: PropTypes.string, + + /** Will show a loading indicator at the end of the options-list **/ loading: PropTypes.bool, + + /** Text that will be displayed next to the loading indicator **/ menuLoadingText: PropTypes.string, + + /** Allows to modify the max height of the menu **/ menuMaxHeight: PropTypes.string, + + /** String that will be displayed when the select is being filtered but the options array is empty **/ noMatchText: requiredIf((props) => props.filterable, PropTypes.string), + + /** String to show when there's no value and no valueLabel **/ placeholder: PropTypes.string, + + /** String that will be displayed before the label of the selected option **/ prefix: PropTypes.string, + + /** Standard HTML tab-index attribute that will be put on the combobox's root element **/ tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + + /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props */ valid: sharedPropTypes.statusPropType, /** @@ -254,9 +278,15 @@ SingleSelectA11y.propTypes = { return props.value }, PropTypes.string), + /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props */ warning: sharedPropTypes.statusPropType, + + /** Will be called when the combobox is loses focus */ onBlur: PropTypes.func, + + /** Will be called when the filter value changes **/ onFilterChange: PropTypes.func, + + /** Will be called when the combobox is being focused */ onFocus: PropTypes.func, - onKeyDown: PropTypes.func, }