diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index ce4877a71160..e973969f6d79 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -1557,9 +1557,6 @@ Map { }, }, "Content" => Object { - "defaultProps": Object { - "tagName": "main", - }, "propTypes": Object { "children": Object { "type": "node", @@ -1577,15 +1574,6 @@ Map { }, "ControlledPasswordInput" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "disabled": false, - "helperText": "", - "invalid": false, - "invalidText": "", - "onChange": [Function], - "onClick": [Function], - "size": undefined, - }, "propTypes": Object { "className": Object { "type": "string", @@ -6049,9 +6037,6 @@ Map { }, }, "ProgressStep" => Object { - "defaultProps": Object { - "translateWithId": [Function], - }, "propTypes": Object { "className": Object { "type": "string", @@ -6250,10 +6235,6 @@ Map { }, "RadioTile" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "onChange": [Function], - "tabIndex": 0, - }, "propTypes": Object { "checked": Object { "type": "bool", @@ -6426,9 +6407,6 @@ Map { "render": [Function], }, "SearchSkeleton" => Object { - "defaultProps": Object { - "small": false, - }, "propTypes": Object { "className": Object { "type": "string", @@ -6459,14 +6437,6 @@ Map { }, "Select" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "disabled": false, - "helperText": "", - "inline": false, - "invalid": false, - "invalidText": "", - "labelText": "Select", - }, "propTypes": Object { "children": Object { "type": "node", @@ -6532,12 +6502,6 @@ Map { "render": [Function], }, "SelectItem" => Object { - "defaultProps": Object { - "disabled": false, - "hidden": false, - "text": "", - "value": "", - }, "propTypes": Object { "className": Object { "type": "string", @@ -6559,9 +6523,6 @@ Map { }, }, "SelectItemGroup" => Object { - "defaultProps": Object { - "disabled": false, - }, "propTypes": Object { "children": Object { "type": "node", @@ -6714,13 +6675,9 @@ Map { }, }, "SideNavFooter" => Object { - "defaultProps": Object { - "assistiveText": "Toggle opening or closing the side navigation", - }, "displayName": "SideNavFooter", "propTypes": Object { "assistiveText": Object { - "isRequired": true, "type": "string", }, "className": Object { @@ -6765,9 +6722,6 @@ Map { }, }, "SideNavIcon" => Object { - "defaultProps": Object { - "small": false, - }, "propTypes": Object { "children": Object { "isRequired": true, @@ -6777,7 +6731,6 @@ Map { "type": "string", }, "small": Object { - "isRequired": true, "type": "bool", }, }, @@ -6966,12 +6919,6 @@ Map { }, }, "SkeletonText" => Object { - "defaultProps": Object { - "heading": false, - "lineCount": 3, - "paragraph": false, - "width": "100%", - }, "propTypes": Object { "className": Object { "type": "string", @@ -7190,11 +7137,6 @@ Map { }, "Switch" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "onClick": [Function], - "onKeyDown": [Function], - "selected": false, - }, "propTypes": Object { "children": Object { "type": "node", @@ -8066,20 +8008,6 @@ Map { }, "TextArea" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "disabled": false, - "enableCounter": false, - "helperText": "", - "invalid": false, - "invalidText": "", - "maxCount": undefined, - "onChange": [Function], - "onClick": [Function], - "placeholder": "", - "rows": 4, - "warn": false, - "warnText": "", - }, "propTypes": Object { "className": Object { "type": "string", @@ -8180,15 +8108,6 @@ Map { "$$typeof": Symbol(react.forward_ref), "ControlledPasswordInput": Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "disabled": false, - "helperText": "", - "invalid": false, - "invalidText": "", - "onChange": [Function], - "onClick": [Function], - "size": undefined, - }, "propTypes": Object { "className": Object { "type": "string", @@ -9329,11 +9248,6 @@ Map { }, "unstable_OverflowMenuV2" => Object {}, "unstable_PageSelector" => Object { - "defaultProps": Object { - "className": null, - "id": 1, - "labelText": "Current page number", - }, "propTypes": Object { "className": Object { "type": "string", @@ -9365,24 +9279,6 @@ Map { }, }, "unstable_Pagination" => Object { - "defaultProps": Object { - "backwardText": "Previous page", - "children": undefined, - "className": null, - "disabled": false, - "forwardText": "Next page", - "id": 1, - "initialPage": 1, - "itemRangeText": [Function], - "itemText": [Function], - "itemsPerPageText": "Items per page:", - "pageRangeText": [Function], - "pageSize": 10, - "pageSizes": undefined, - "pageText": [Function], - "pagesUnknown": false, - "totalItems": undefined, - }, "propTypes": Object { "backwardText": Object { "type": "string", diff --git a/packages/react/src/components/Pagination/experimental/PageSelector.js b/packages/react/src/components/Pagination/experimental/PageSelector.js index 51568ab21c46..0ba404724570 100644 --- a/packages/react/src/components/Pagination/experimental/PageSelector.js +++ b/packages/react/src/components/Pagination/experimental/PageSelector.js @@ -14,12 +14,11 @@ import SelectItem from '../../SelectItem'; import { usePrefix } from '../../../internal/usePrefix'; const getInstanceId = setupGetInstanceId(); - function PageSelector({ - className, + className = null, currentPage, - id, - labelText, + id = 1, + labelText = 'Current page number', totalPages, ...other }) { @@ -71,10 +70,4 @@ PageSelector.propTypes = { totalPages: PropTypes.number.isRequired, }; -PageSelector.defaultProps = { - className: null, - id: 1, - labelText: 'Current page number', -}; - export default PageSelector; diff --git a/packages/react/src/components/Pagination/experimental/Pagination.js b/packages/react/src/components/Pagination/experimental/Pagination.js index 618c70f62888..98e7928e9da1 100644 --- a/packages/react/src/components/Pagination/experimental/Pagination.js +++ b/packages/react/src/components/Pagination/experimental/Pagination.js @@ -15,23 +15,23 @@ import { IconButton } from '../../IconButton'; import { usePrefix } from '../../../internal/usePrefix'; function Pagination({ - backwardText, - children, - className, - disabled, - forwardText, - id, - initialPage, - itemsPerPageText, - itemRangeText, - itemText, + backwardText = 'Previous page', + children = undefined, + className = null, + disabled = false, + forwardText = 'Next page', + id = 1, + initialPage = 1, + itemsPerPageText = 'Items per page:', + itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`, + itemText = (min, max) => `${min}–${max} items`, onChange, - pageRangeText, - pageSize, - pageSizes, - pageText, - pagesUnknown, - totalItems, + pageRangeText = (current, total) => `${current} of ${total} pages`, + pageSize = 10, + pageSizes = undefined, + pageText = (page) => `page ${page}`, + pagesUnknown = false, + totalItems = undefined, ...other }) { const [currentPage, setCurrentPage] = useState(initialPage); @@ -270,23 +270,4 @@ Pagination.propTypes = { totalItems: PropTypes.number, }; -Pagination.defaultProps = { - backwardText: 'Previous page', - className: null, - children: undefined, - disabled: false, - forwardText: 'Next page', - id: 1, - itemsPerPageText: 'Items per page:', - itemRangeText: (min, max, total) => `${min}–${max} of ${total} items`, - itemText: (min, max) => `${min}–${max} items`, - initialPage: 1, - pageRangeText: (current, total) => `${current} of ${total} pages`, - pageSize: 10, - pageSizes: undefined, - pageText: (page) => `page ${page}`, - pagesUnknown: false, - totalItems: undefined, -}; - export default Pagination; diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js index cf1af1fff618..f6fff1e51bcf 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js @@ -127,7 +127,7 @@ function ProgressStep({ secondaryLabel, disabled, onClick, - translateWithId: t, + translateWithId: t = translateWithId, ...rest }) { const prefix = usePrefix(); @@ -292,8 +292,4 @@ ProgressStep.propTypes = { translateWithId: PropTypes.func, }; -ProgressStep.defaultProps = { - translateWithId, -}; - export { ProgressIndicator, ProgressStep }; diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.js index 26a85591981b..c62927feb519 100644 --- a/packages/react/src/components/RadioTile/RadioTile.js +++ b/packages/react/src/components/RadioTile/RadioTile.js @@ -13,6 +13,7 @@ import { keys, matches } from '../../internal/keyboard'; import { useFallbackId } from '../../internal/useId'; import { usePrefix } from '../../internal/usePrefix'; import deprecate from '../../prop-types/deprecate'; +import { noopFn } from '../../internal/noopFn'; const RadioTile = React.forwardRef(function RadioTile( { @@ -25,8 +26,8 @@ const RadioTile = React.forwardRef(function RadioTile( name, value, id, - onChange, - tabIndex, + onChange = noopFn, + tabIndex = 0, ...rest }, ref @@ -137,9 +138,4 @@ RadioTile.propTypes = { value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, }; -RadioTile.defaultProps = { - onChange: () => {}, - tabIndex: 0, -}; - export default RadioTile; diff --git a/packages/react/src/components/Search/Search-test.js b/packages/react/src/components/Search/Search-test.js index 0a4b16ccf745..d011baa4edb0 100644 --- a/packages/react/src/components/Search/Search-test.js +++ b/packages/react/src/components/Search/Search-test.js @@ -147,7 +147,7 @@ describe('Search', () => { /> ); - expect(screen.getAllByRole('button')[0]).toHaveAttribute('tabIndex', '1'); + expect(screen.getAllByRole('button')[0]).toHaveAttribute('tabIndex', '0'); expect(screen.getByRole('searchbox')).toHaveAttribute('tabIndex', '-1'); }); diff --git a/packages/react/src/components/Search/Search.Skeleton.tsx b/packages/react/src/components/Search/Search.Skeleton.tsx index 1bb0a469b11e..c5695cbf4b81 100644 --- a/packages/react/src/components/Search/Search.Skeleton.tsx +++ b/packages/react/src/components/Search/Search.Skeleton.tsx @@ -23,7 +23,11 @@ export interface SearchSkeletonProps small?: boolean; } -const SearchSkeleton = ({ small, className, ...rest }: SearchSkeletonProps) => { +const SearchSkeleton = ({ + small = false, + className, + ...rest +}: SearchSkeletonProps) => { const prefix = usePrefix(); const searchClasses = cx(className, { [`${prefix}--skeleton`]: true, @@ -51,9 +55,5 @@ SearchSkeleton.propTypes = { small: PropTypes.bool, }; -SearchSkeleton.defaultProps = { - small: false, -}; - export default SearchSkeleton; export { SearchSkeleton }; diff --git a/packages/react/src/components/Search/Search.tsx b/packages/react/src/components/Search/Search.tsx index cfb765b34bc8..dba8a5ed2eea 100644 --- a/packages/react/src/components/Search/Search.tsx +++ b/packages/react/src/components/Search/Search.tsx @@ -233,7 +233,7 @@ const Search = React.forwardRef(function Search( className={`${prefix}--search-magnifier`} onClick={onExpand} onKeyDown={handleExpandButtonKeyDown} - tabIndex={onExpand && !isExpanded ? 1 : -1} + tabIndex={onExpand && !isExpanded ? 0 : -1} ref={expandButtonRef} aria-expanded={onExpand && isExpanded ? true : undefined} aria-controls={onExpand ? uniqueId : undefined}> diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx index a8a57368f27a..e1c784e8a593 100644 --- a/packages/react/src/components/Select/Select.tsx +++ b/packages/react/src/components/Select/Select.tsx @@ -98,7 +98,7 @@ interface SelectProps light?: boolean; /** - * Reserved for use with component. Will not render a label for the + * Reserved for use with Pagination component. Will not render a label for the * select since Pagination renders one for us. */ noLabel?: boolean; @@ -134,16 +134,16 @@ const Select = React.forwardRef(function Select( className, id, inline = false, - labelText, + labelText = 'Select', disabled = false, children, - // reserved for use with component + // reserved for use with Pagination component noLabel = false, // eslint-disable-next-line no-unused-vars hideLabel = false, invalid = false, - invalidText, - helperText, + invalidText = '', + helperText = '', light = false, readOnly, size, @@ -374,7 +374,7 @@ Select.propTypes = { ), /** - * Reserved for use with component. Will not render a label for the + * Reserved for use with Pagination component. Will not render a label for the * select since Pagination renders one for us. */ noLabel: PropTypes.bool, @@ -406,13 +406,4 @@ Select.propTypes = { warnText: PropTypes.node, }; -Select.defaultProps = { - disabled: false, - labelText: 'Select', - inline: false, - invalid: false, - invalidText: '', - helperText: '', -}; - export default Select; diff --git a/packages/react/src/components/SelectItem/SelectItem-test.js b/packages/react/src/components/SelectItem/SelectItem-test.js index ffb34d4b4c1b..b55c489e27c9 100644 --- a/packages/react/src/components/SelectItem/SelectItem-test.js +++ b/packages/react/src/components/SelectItem/SelectItem-test.js @@ -14,7 +14,9 @@ const prefix = 'cds'; describe('SelectItem', () => { describe('renders as expected - Component API', () => { it('should spread extra props onto outermost element', () => { - render(); + render( + + ); expect(screen.getByText('testText')).toHaveAttribute( 'data-testid', 'test-id' @@ -22,29 +24,35 @@ describe('SelectItem', () => { }); it('Has the expected classes', () => { - render(); + render(); expect(screen.getByText('testText')).toHaveClass( `${prefix}--select-option` ); }); it('should support a custom `className` prop on the outermost element', () => { - render(); + render( + + ); expect(screen.getByText('testText')).toHaveClass('custom-class'); }); it('should respect disabled prop', () => { - render(); + render(); expect(screen.getByText('testText')).toBeDisabled(); }); it('Should not be disabled by default', () => { - render(); + render(); expect(screen.getByText('testText')).toBeEnabled(); }); it('should respect hidden prop', () => { - render(