diff --git a/CHANGELOG.md b/CHANGELOG.md index 4dd0dc34f..17448dc6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ * ``'s overlay will use the overlay container as its boundary when the `renderToOverlay` prop is applied, as opposed to the scrollParent of the control. Refs STCOM-1282. * Add `isCursorAtEnd` property to `TextArea` to place the cursor at the end of the value. Refs STCOM-1289. * Focus the last modified query field when opening ``. Refs STCOM-1288. +* Avoid deprecated `defaultProps` for functional components. Refs STCOM-1291. ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12) [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0) diff --git a/lib/Accordion/Accordion.js b/lib/Accordion/Accordion.js index 8440af74d..33382fcf2 100644 --- a/lib/Accordion/Accordion.js +++ b/lib/Accordion/Accordion.js @@ -86,26 +86,27 @@ const getHighestStackOrder = () => { return highest; } + const Accordion = (props) => { const { accordionSet, children, + className = '', closedByDefault, contentHeight, contentId: contentIdProp, contentRef, disabled, - header, - headerProps, + header = DefaultAccordionHeader, + headerProps = { headingLevel: 3 }, id, + label, + onClickToggle = noop, onToggle: onToggleProp, open, - separator, + separator = true, toggleKeyHandlers, toggleKeyMap, - className, - onClickToggle, - label, } = props; const toggle = useRef(null); @@ -236,11 +237,5 @@ const Accordion = (props) => { }; Accordion.propTypes = propTypes; -Accordion.defaultProps = { - className: '', - header: DefaultAccordionHeader, - separator: true, - onClickToggle: noop, -}; export default withAccordionSet(Accordion); diff --git a/lib/Accordion/headers/DefaultAccordionHeader.js b/lib/Accordion/headers/DefaultAccordionHeader.js index 08ca23812..4743251de 100644 --- a/lib/Accordion/headers/DefaultAccordionHeader.js +++ b/lib/Accordion/headers/DefaultAccordionHeader.js @@ -19,13 +19,8 @@ const propTypes = { toggleRef: PropTypes.func, }; -const defaultProps = { - headerProps: { - headingLevel: 3, - } -}; - -const DefaultAccordionHeader = (props) => { +const DefaultAccordionHeader = ({ headerProps = { headingLevel: 3 }, ...rest }) => { + const props = { headerProps, ...rest }; function handleHeaderClick(e) { const { id, label } = props; props.onToggle({ id, label }); @@ -92,6 +87,5 @@ const DefaultAccordionHeader = (props) => { }; DefaultAccordionHeader.propTypes = propTypes; -DefaultAccordionHeader.defaultProps = defaultProps; export default DefaultAccordionHeader; diff --git a/lib/AdvancedSearch/AdvancedSearch.js b/lib/AdvancedSearch/AdvancedSearch.js index 03741c421..1ae8413a9 100644 --- a/lib/AdvancedSearch/AdvancedSearch.js +++ b/lib/AdvancedSearch/AdvancedSearch.js @@ -36,12 +36,12 @@ const AdvancedSearch = ({ searchOptions, onSearch, onCancel, - queryBuilder, - rowFormatter, - hasQueryOption, - hasMatchSelection, - defaultSearchOptionValue, - firstRowInitialSearch, + queryBuilder = defaultQueryBuilder, + rowFormatter = defaultRowFormatter, + hasQueryOption = true, + hasMatchSelection = true, + defaultSearchOptionValue = '', + firstRowInitialSearch = null, queryToRow, children, }) => { @@ -103,13 +103,5 @@ const AdvancedSearch = ({ }; AdvancedSearch.propTypes = propTypes; -AdvancedSearch.defaultProps = { - queryBuilder: defaultQueryBuilder, - defaultSearchOptionValue: '', - rowFormatter: defaultRowFormatter, - firstRowInitialSearch: null, - hasQueryOption: true, - hasMatchSelection: true, -}; export default AdvancedSearch; diff --git a/lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.js b/lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.js index 21636db61..c2d75bbad 100644 --- a/lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.js +++ b/lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.js @@ -45,7 +45,7 @@ const AdvancedSearchRow = ({ rowState, searchOptions, onChange, - errorMessage, + errorMessage = '', hasMatchSelection, }) => { const intl = useIntl(); @@ -134,8 +134,5 @@ const AdvancedSearchRow = ({ }; AdvancedSearchRow.propTypes = propTypes; -AdvancedSearchRow.defaultProps = { - errorMessage: '', -}; export default AdvancedSearchRow; diff --git a/lib/Badge/Badge.js b/lib/Badge/Badge.js index fa282de61..fc8116bcb 100644 --- a/lib/Badge/Badge.js +++ b/lib/Badge/Badge.js @@ -3,9 +3,14 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import css from './Badge.css'; -const Badge = props => ( - - {props.children} +const Badge = ({ + children, + className, + color = 'default', + size = 'medium', +}) => ( + + {children} ); @@ -16,9 +21,4 @@ Badge.propTypes = { size: PropTypes.oneOf(['small', 'medium']), }; -Badge.defaultProps = { - color: 'default', - size: 'medium', -}; - export default Badge; diff --git a/lib/Button/Button.js b/lib/Button/Button.js index 7f5a96ad4..edcb32382 100644 --- a/lib/Button/Button.js +++ b/lib/Button/Button.js @@ -31,12 +31,13 @@ export const propTypes = { type: PropTypes.string, }; -const defaultProps = { - buttonStyle: 'default', - type: 'button', -}; - -const Button = React.forwardRef((props, ref) => { +const Button = React.forwardRef(( + { + buttonStyle = 'default', + type = 'button', + ...rest + }, ref) => { + const props = { buttonStyle, type, ...rest }; function getStyle() { const buttonBuiltIn = []; if (/\s/.test(props.buttonStyle)) { @@ -81,7 +82,7 @@ const Button = React.forwardRef((props, ref) => { 'type', 'to', ]); - const { children, onClick, type, to, buttonRef } = props; + const { children, onClick, to, buttonRef } = props; const sharedProps = { ...inputCustom, @@ -136,6 +137,5 @@ const Button = React.forwardRef((props, ref) => { Button.displayName = 'Button'; Button.propTypes = propTypes; -Button.defaultProps = defaultProps; export default Button; diff --git a/lib/ButtonGroup/ButtonGroup.js b/lib/ButtonGroup/ButtonGroup.js index af81742f6..31e70bd16 100644 --- a/lib/ButtonGroup/ButtonGroup.js +++ b/lib/ButtonGroup/ButtonGroup.js @@ -10,20 +10,13 @@ const propTypes = { tagName: PropTypes.string, }; -const defaultProps = { - fullWidth: false, - tagName: 'div' -}; - -const ButtonGroup = (props) => { - const { - children, - className, - fullWidth, - tagName: Tag, - ...rest - } = props; - +const ButtonGroup = ({ + children, + className, + fullWidth = false, + tagName: Tag = 'div', + ...rest +}) => { return ( { }; ButtonGroup.propTypes = propTypes; -ButtonGroup.defaultProps = defaultProps; export default ButtonGroup; diff --git a/lib/Callout/CalloutElement.js b/lib/Callout/CalloutElement.js index b52143a7a..66f3499cc 100644 --- a/lib/Callout/CalloutElement.js +++ b/lib/Callout/CalloutElement.js @@ -35,35 +35,36 @@ const propTypes = { type: PropTypes.string, }; -const defaultProps = { - timeout: '6000', - transition: 'slide', - type: 'success', -}; - -const CalloutElement = props => ( - - {transitionState => ( -
-
- -
{props.message}
- props.onDismiss(props.id)} data-test-callout-element-close-button /> +const CalloutElement = ({ + timeout = '6000', + transition = 'slide', + type = 'success', + ...rest +}) => { + const props = { timeout, transition, type, ...rest }; + return ( + + {transitionState => ( +
+
+ +
{props.message}
+ props.onDismiss(props.id)} data-test-callout-element-close-button /> +
-
- )} - -); + )} + + ); +} CalloutElement.propTypes = propTypes; -CalloutElement.defaultProps = defaultProps; export default CalloutElement; diff --git a/lib/ConfirmationModal/ConfirmationModal.js b/lib/ConfirmationModal/ConfirmationModal.js index ddb10ba3b..f25dd84e8 100644 --- a/lib/ConfirmationModal/ConfirmationModal.js +++ b/lib/ConfirmationModal/ConfirmationModal.js @@ -28,24 +28,19 @@ const propTypes = { open: PropTypes.bool.isRequired, }; -const defaultProps = { - bodyTag: 'p', - buttonStyle: 'primary', - cancelButtonStyle: 'default', - isConfirmButtonDisabled: false, -}; - -const ConfirmationModal = (props) => { +const ConfirmationModal = ({ + bodyTag: Element = 'p', + buttonStyle = 'primary', + cancelButtonStyle = 'default', + isConfirmButtonDisabled = false, + ...rest + }) => { + const props = { Element, buttonStyle, cancelButtonStyle, isConfirmButtonDisabled, ...rest }; const footerPrimary = useRef(null); const contentId = useRef(uniqueId('modal-content')).current; const testId = props.id || uniqueId('confirmation-'); const cancelLabel = props.cancelLabel || ; const confirmLabel = props.confirmLabel || ; - const { - bodyTag: Element, - onCancel, - isConfirmButtonDisabled, - } = props; const footer = ( @@ -73,7 +68,7 @@ const ConfirmationModal = (props) => { return ( { focusFooterPrimary(footerPrimary); }} id={testId} label={props.heading} @@ -94,6 +89,5 @@ const ConfirmationModal = (props) => { }; ConfirmationModal.propTypes = propTypes; -ConfirmationModal.defaultProps = defaultProps; export default ConfirmationModal; diff --git a/lib/Datepicker/Datepicker.js b/lib/Datepicker/Datepicker.js index dd334bbfa..2fef910be 100644 --- a/lib/Datepicker/Datepicker.js +++ b/lib/Datepicker/Datepicker.js @@ -127,41 +127,31 @@ const getBackendDateStandard = (standard, use) => { return [standard, 'YYYY-MM-DDTHH:mm:ss.sssZ', 'ddd, DD MMM YYYY HH:mm:ss ZZ']; }; -const defaultProps = { - autoFocus: false, - backendDateStandard: 'ISO8601', - hideOnChoose: true, - modifiers: {}, - outputFormatter: defaultOutputFormatter, - outputBackendValue: true, - parser: defaultParser, - placement: 'bottom', - screenReaderMessage: '', - useFocus: true, -}; const Datepicker = ( - { backendDateStandard, // eslint-disable-line no-unused-vars + { + autoFocus = false, + backendDateStandard = 'ISO8601', disabled, dateFormat, exclude, - hideOnChoose, + hideOnChoose = true, id, intl, locale, - modifiers, + modifiers = {}, onBlur, onChange, onFocus, - outputBackendValue, - outputFormatter, - parser, - placement, + outputBackendValue = true, + outputFormatter = defaultOutputFormatter, + parser = defaultParser, + placement = 'bottom', readOnly, - screenReaderMessage, // eslint-disable-line no-unused-vars + screenReaderMessage = '', showCalendar: showCalendarProp, timeZone: timeZoneProp, // eslint-disable-line no-unused-vars - useFocus, // eslint-disable-line no-unused-vars + useFocus = true, useInput, usePortal, value: valueProp, @@ -483,7 +473,6 @@ const Datepicker = ( }; Datepicker.propTypes = propTypes; -Datepicker.defaultProps = defaultProps; export default formField( injectIntl(Datepicker), diff --git a/lib/Dropdown/Popdown.js b/lib/Dropdown/Popdown.js index 7e0791ad5..1a9b7765b 100644 --- a/lib/Dropdown/Popdown.js +++ b/lib/Dropdown/Popdown.js @@ -44,16 +44,19 @@ const Popdown = ({ label, id, menuKeyHandler, - modifiers, + modifiers = { + flip: { boundariesElement: 'viewport', padding: 10 }, + preventOverflow: { boundariesElement: 'viewport', padding: 10 } + }, onToggle, open: openProp, overlayRef: overlayRefProp, - placement, + placement = 'bottom', renderMenu, - renderTrigger, + renderTrigger = DefaultTrigger, triggerKeyHandler, triggerRef: triggerRefProp, - usePortal, + usePortal = false, }) => { const [open, setOpen] = useState(false); const [keyCode, setKeyCode] = useState(); @@ -62,7 +65,7 @@ const Popdown = ({ let focusTimeoutId; - const _focusHandlers = Object.assign({}, Popdown.defaultProps.focusHandlers, focusHandlers); + const _focusHandlers = { ...focusHandlers, ...defaultFocusHandlers }; useEffect(() => { if (open) { @@ -289,15 +292,4 @@ Popdown.propTypes = { usePortal: PropTypes.bool, }; -Popdown.defaultProps = { - placement: 'bottom', - modifiers: { - flip: { boundariesElement: 'viewport', padding: 10 }, - preventOverflow: { boundariesElement: 'viewport', padding: 10 } - }, - focusHandlers: defaultFocusHandlers, - renderTrigger: DefaultTrigger, - usePortal: false, -}; - export default Popdown; diff --git a/lib/DropdownMenu/DropdownMenu.js b/lib/DropdownMenu/DropdownMenu.js index eb295a794..12d1bf049 100644 --- a/lib/DropdownMenu/DropdownMenu.js +++ b/lib/DropdownMenu/DropdownMenu.js @@ -25,11 +25,8 @@ const propTypes = { width: PropTypes.string, }; -const defaultProps = { - overrideStyle: {}, -}; - -const DropdownMenu = props => { +const DropdownMenu = ({ overrideStyle = {}, ...rest }) => { + const props = { overrideStyle, ...rest }; const { children, minWidth, @@ -37,7 +34,6 @@ const DropdownMenu = props => { onSelectItem, onToggle, open, - overrideStyle, pullRight, width } = props; @@ -96,6 +92,5 @@ const DropdownMenu = props => { }; DropdownMenu.propTypes = propTypes; -DropdownMenu.defaultProps = defaultProps; export default DropdownMenu; diff --git a/lib/ErrorModal/ErrorModal.js b/lib/ErrorModal/ErrorModal.js index 1f8d00925..71e5ff651 100644 --- a/lib/ErrorModal/ErrorModal.js +++ b/lib/ErrorModal/ErrorModal.js @@ -8,7 +8,7 @@ import ModalFooter from '../ModalFooter'; const ErrorModal = ({ ariaLabel, - bodyTag: Element, + bodyTag: Element = 'div', open, content, label, @@ -56,8 +56,4 @@ ErrorModal.propTypes = { open: PropTypes.bool.isRequired, }; -ErrorModal.defaultProps = { - bodyTag: 'div', -}; - export default ErrorModal; diff --git a/lib/Headline/Headline.js b/lib/Headline/Headline.js index aaf68293b..951a7bfd0 100644 --- a/lib/Headline/Headline.js +++ b/lib/Headline/Headline.js @@ -8,7 +8,17 @@ import PropTypes from 'prop-types'; import css from './Headline.css'; const Headline = forwardRef(( - { size, margin, tag: Element, faded, flex, block, children, className, weight, ...rest }, + { + size = 'medium', + margin = '', // If nothing is set it will default to the value of size + tag: Element = 'div', + faded = false, + flex, + block, + children, + className, + weight = 'bold', + ...rest }, ref ) => { const classes = classNames( @@ -42,14 +52,6 @@ const Headline = forwardRef(( ); }); -Headline.defaultProps = { - faded: false, - weight: 'bold', - margin: '', // If nothing is set it will default to the value of size - size: 'medium', - tag: 'div', -}; - Headline.propTypes = { block: PropTypes.bool, children: PropTypes.node, diff --git a/lib/Highlighter/Highlighter.js b/lib/Highlighter/Highlighter.js index 416035451..54dd3f983 100644 --- a/lib/Highlighter/Highlighter.js +++ b/lib/Highlighter/Highlighter.js @@ -17,13 +17,13 @@ HighlightMark.propTypes = { }; const Highlighter = ({ - autoEscape, + autoEscape = true, className, highlightClassName, - searchWords, + searchWords = [], sanitize, style, - text, + text = '', }) => ( { let Element = 'button'; @@ -50,6 +51,7 @@ const IconButton = React.forwardRef(({ tabIndex, autoFocus, ref, + disabled, ...rest, 'className': classNames( css.iconButton, @@ -127,12 +129,4 @@ IconButton.propTypes = { type: PropTypes.string, }; -IconButton.defaultProps = { - badgeColor: 'default', - disabled: false, - iconSize: 'medium', - size: 'medium', - type: 'button', -}; - export default IconButton; diff --git a/lib/InfoPopover/InfoPopover.js b/lib/InfoPopover/InfoPopover.js index 7e33a8a74..2fbb4e4c1 100644 --- a/lib/InfoPopover/InfoPopover.js +++ b/lib/InfoPopover/InfoPopover.js @@ -26,27 +26,18 @@ const propTypes = { renderTrigger: PropTypes.func, }; -const defaultProps = { - allowAnchorClick: false, - buttonLabel: , - buttonTarget: '_blank', - hideOnButtonClick: false, - iconSize: 'small', - popperProps: {}, -}; - const InfoPopover = ({ content, contentClass, - allowAnchorClick, - iconSize, - buttonLabel, + allowAnchorClick = false, + iconSize = 'small', + buttonLabel = , buttonHref, buttonProps, - buttonTarget, - hideOnButtonClick, + buttonTarget = '_blank', + hideOnButtonClick = false, renderTrigger, - popperProps, + popperProps = {}, ...rest }) => { const getContentClass = () => classnames( @@ -107,6 +98,5 @@ const InfoPopover = ({ }; InfoPopover.propTypes = propTypes; -InfoPopover.defaultProps = defaultProps; export default InfoPopover; diff --git a/lib/Label/Label.js b/lib/Label/Label.js index e5fe832af..9e31d66da 100644 --- a/lib/Label/Label.js +++ b/lib/Label/Label.js @@ -10,7 +10,7 @@ import Icon from '../Icon'; import Asterisk from './components/Asterisk'; import css from './Label.css'; -const Label = ({ children, className, htmlFor, id, readOnly, required, tagName, ...rest }) => { +const Label = ({ children, className, htmlFor, id, readOnly, required, tagName = 'label', ...rest }) => { const Element = tagName; return ( @@ -43,8 +43,4 @@ Label.propTypes = { tagName: PropTypes.string, }; -Label.defaultProps = { - tagName: 'label', -}; - export default Label; diff --git a/lib/Layout/Layout.js b/lib/Layout/Layout.js index 01dca29b9..037ac912f 100644 --- a/lib/Layout/Layout.js +++ b/lib/Layout/Layout.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import css from './Layout.css'; -function Layout({ className, children, element, ...rest }) { +function Layout({ className, children, element = 'div', ...rest }) { const Element = element; function getClassName() { @@ -36,8 +36,4 @@ Layout.propTypes = { ]), }; -Layout.defaultProps = { - element: 'div', -}; - export default Layout; diff --git a/lib/LayoutHeader/LayoutHeader.js b/lib/LayoutHeader/LayoutHeader.js index 31d4c4ccb..7b72dfedd 100644 --- a/lib/LayoutHeader/LayoutHeader.js +++ b/lib/LayoutHeader/LayoutHeader.js @@ -26,11 +26,7 @@ const propTypes = { ]), }; -const defaultProps = { - level: 3, -}; - -const LayoutHeader = ({ title, level, actions, onDelete, noActions }) => { +const LayoutHeader = ({ title, level = 3, actions, onDelete, noActions }) => { const getHeader = () => React.createElement(`h${level}`, { style: { margin: 0 } }, title); const renderActions = () => { @@ -80,6 +76,5 @@ const LayoutHeader = ({ title, level, actions, onDelete, noActions }) => { }; LayoutHeader.propTypes = propTypes; -LayoutHeader.defaultProps = defaultProps; export default LayoutHeader; diff --git a/lib/List/List.js b/lib/List/List.js index a3f9fef9c..26f7dd9d5 100644 --- a/lib/List/List.js +++ b/lib/List/List.js @@ -21,18 +21,12 @@ const propTypes = { marginBottom0: PropTypes.bool, }; -const defaultProps = { - listStyle: 'default', - marginBottom0: false, - itemFormatter: (item, i) => (
  • {item}
    • ), -}; - const List = ({ id, - itemFormatter, + itemFormatter = (item, i) => (
  • {item}
    • ), listClass, - marginBottom0, - listStyle, + marginBottom0 = false, + listStyle = 'default', items, isEmptyMessage }) => { @@ -62,6 +56,5 @@ const List = ({ }; List.propTypes = propTypes; -List.defaultProps = defaultProps; export default List; diff --git a/lib/Loading/Loading.js b/lib/Loading/Loading.js index c56a5d432..cccdc0834 100644 --- a/lib/Loading/Loading.js +++ b/lib/Loading/Loading.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import css from './DotSpinner.css'; -const Loading = ({ size, useCurrentColor }) => { +const Loading = ({ size = 'medium', useCurrentColor }) => { const multiplyerMap = { small: 0.5, medium: 1, @@ -36,8 +36,5 @@ Loading.propTypes = { size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']), useCurrentColor: PropTypes.bool, }; -Loading.defaultProps = { - size: 'medium' -}; export default Loading; diff --git a/lib/MenuSection/MenuSection.js b/lib/MenuSection/MenuSection.js index d923dbdcc..48056e51b 100644 --- a/lib/MenuSection/MenuSection.js +++ b/lib/MenuSection/MenuSection.js @@ -9,7 +9,7 @@ import uniqueId from 'lodash/uniqueId'; import css from './MenuSection.css'; import Headline from '../Headline'; -const MenuSection = ({ className, children, id, label, labelTag, ...rest }) => { +const MenuSection = ({ className, children, id, label, labelTag = 'div', ...rest }) => { const sectionId = id || uniqueId('menu-section-'); return (
    TYPES[key])), }; -MessageBanner.defaultProps = { - 'aria-live': 'assertive', - type: TYPES.DEFAULT, - show: true, - element: 'div', - dismissButtonProps: {}, - autoFocusDismissButton: false, -}; - MessageBanner.displayName = 'MessageBanner'; export default MessageBanner; diff --git a/lib/MetaSection/MetaAccordionHeader.js b/lib/MetaSection/MetaAccordionHeader.js index 0efaa6f80..169c598e6 100644 --- a/lib/MetaSection/MetaAccordionHeader.js +++ b/lib/MetaSection/MetaAccordionHeader.js @@ -16,11 +16,8 @@ const propTypes = { open: PropTypes.bool, }; -const defaultProps = { - headingLevel: 4 -}; - -const MetaAccordionHeader = (props) => { +const MetaAccordionHeader = ({ headingLevel = 4, ...rest }) => { + const props = { headingLevel, ...rest }; let toggleElem = null; let labelElem = null; let containerElem = null; @@ -71,6 +68,5 @@ const MetaAccordionHeader = (props) => { }; MetaAccordionHeader.propTypes = propTypes; -MetaAccordionHeader.defaultProps = defaultProps; export default MetaAccordionHeader; diff --git a/lib/Modal/Modal.js b/lib/Modal/Modal.js index 6a08a909e..ad2e273d9 100644 --- a/lib/Modal/Modal.js +++ b/lib/Modal/Modal.js @@ -74,38 +74,25 @@ const propTypes = { wrappingElement: PropTypes.oneOf(['div', 'form']), }; -const defaultProps = { - closeOnBackgroundClick: false, - dismissible: false, - enforceFocus: true, - onOpen: () => { }, - open: false, - restoreFocus: true, - scope: 'module', - showHeader: true, - size: 'medium', - wrappingElement: 'div', -}; - const Modal = forwardRef((props, ref) => { const { ariaLabel, ariaLabelledBy, children, - closeOnBackgroundClick, + closeOnBackgroundClick = false, contentClass, - dismissible, - enforceFocus, + dismissible = false, + enforceFocus = true, footer, id, onClose, - onOpen, - open, - restoreFocus, - scope, - showHeader, - size, - wrappingElement, + onOpen = () => { }, + open = false, + restoreFocus = true, + scope = 'module', + showHeader = true, + size = 'medium', + wrappingElement = 'div', ...rest } = props; const modalId = useRef(id || uniqueId('modal')).current; @@ -221,6 +208,5 @@ const Modal = forwardRef((props, ref) => { }); Modal.propTypes = propTypes; -Modal.defaultProps = defaultProps; export default Modal; diff --git a/lib/NavListSection/NavListSection.js b/lib/NavListSection/NavListSection.js index e2d0ed06b..d8a4f0518 100644 --- a/lib/NavListSection/NavListSection.js +++ b/lib/NavListSection/NavListSection.js @@ -6,11 +6,11 @@ import css from './NavListSection.css'; import NavListSectionContext from './NavListSectionContext'; const NavListSection = forwardRef(({ - activeLink, + activeLink = null, children, className, label, - tag, + tag = 'div', striped, ...rest }, ref) => ( @@ -52,11 +52,6 @@ NavListSection.propTypes = { tag: PropTypes.string, }; -NavListSection.defaultProps = { - activeLink: null, - tag: 'div', -}; - NavListSection.displayName = 'NavListSection'; export default NavListSection; diff --git a/lib/PaneFooter/PaneFooter.js b/lib/PaneFooter/PaneFooter.js index 4161f8360..11b275dd1 100644 --- a/lib/PaneFooter/PaneFooter.js +++ b/lib/PaneFooter/PaneFooter.js @@ -6,7 +6,7 @@ import DefaultPaneFooter from './DefaultPaneFooter'; import css from './PaneFooter.css'; -const PaneFooter = React.forwardRef(({ element: Element, children, className, innerClassName, ...rest }, ref) => ( +const PaneFooter = React.forwardRef(({ element: Element = 'div', children, className, innerClassName, ...rest }, ref) => ( { const [open, setOpen] = useState(false); @@ -155,14 +155,6 @@ Popover.propTypes = { renderTrigger: PropTypes.func, }; -Popover.defaultProps = { - modifiers: {}, - noPadding: false, - offset: 5, - placement: 'bottom', - popperProps: {}, -}; - /** * Legacy support */ diff --git a/lib/SearchField/SearchField.js b/lib/SearchField/SearchField.js index dad8ef49a..cb0654932 100644 --- a/lib/SearchField/SearchField.js +++ b/lib/SearchField/SearchField.js @@ -81,19 +81,19 @@ const SearchField = (props) => { value, onChange, onClear, - loading, + loading = false, clearSearchId, searchableIndexes, - searchableOptions, + searchableOptions = null, onChangeIndex, selectedIndex, searchableIndexesPlaceholder, inputClass, disabled, - inputType, - onSubmitSearch, - lockWidth, - newLineOnShiftEnter, + inputType = INPUT_TYPES.INPUT, + onSubmitSearch = noop, + lockWidth = false, + newLineOnShiftEnter = false, inputRef, indexRef, ...rest @@ -195,13 +195,5 @@ const SearchField = (props) => { }; SearchField.propTypes = propTypes; -SearchField.defaultProps = { - loading: false, - lockWidth: false, - newLineOnShiftEnter: false, - searchableOptions: null, - inputType: INPUT_TYPES.INPUT, - onSubmitSearch: noop, -}; export default SearchField; diff --git a/lib/TextField/TextFieldIcon.js b/lib/TextField/TextFieldIcon.js index 9dcf67247..7cc8247c5 100644 --- a/lib/TextField/TextFieldIcon.js +++ b/lib/TextField/TextFieldIcon.js @@ -7,7 +7,7 @@ import css from './TextField.css'; import Icon from '../Icon'; import IconButton from '../IconButton'; -const TextFieldIcon = ({ onClick, ariaLabel, icon, iconClassName, onMouseDown, tabIndex, id, iconSize, ...rest }) => ( +const TextFieldIcon = ({ onClick, ariaLabel, icon, iconClassName, onMouseDown, tabIndex, id, iconSize = 'medium', ...rest }) => (
    { (typeof onClick === 'function' || typeof onMouseDown === 'function') ? (