STCOM-1291 avoid defaultProps in functional components

CHANGELOG.md

@@ -8,6 +8,7 @@
 * `<MultiSelection/>`'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 `<AdvancedSearch>`. 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)

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);

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;

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;

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;

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 => (
-  <span className={classnames(props.className, css.badge, css[props.color], css[props.size])}>
-    <span className={css.label}>{props.children}</span>
+const Badge = ({
+  children,
+  className,
+  color = 'default',
+  size = 'medium',
+}) => (
+  <span className={classnames(className, css.badge, css[color], css[size])}>
+    <span className={css.label}>{children}</span>
   </span>
 );
 
@@ -16,9 +21,4 @@ Badge.propTypes = {
   size: PropTypes.oneOf(['small', 'medium']),
 };
 
-Badge.defaultProps = {
-  color: 'default',
-  size: 'medium',
-};
-
 export default Badge;

lib/Button/Button.js

@@ -31,57 +31,60 @@ export const propTypes = {
   type: PropTypes.string,
 };
 
-const defaultProps = {
-  buttonStyle: 'default',
-  type: 'button',
-};
-
-const Button = React.forwardRef((props, ref) => {
+const Button = React.forwardRef((
+  {
+    align,
+    allowAnchorClick,
+    autoFocus,
+    bottomMargin0,
+    buttonClass,
+    buttonRef,
+    buttonStyle = 'default',
+    children,
+    fullWidth,
+    href,
+    marginBottom0,
+    onClick,
+    paddingSide0,
+    role,
+    to,
+    type = 'button',
+    ...rest
+  },
+  ref) => {
   function getStyle() {
     const buttonBuiltIn = [];
-    if (/\s/.test(props.buttonStyle)) {
-      const csslist = props.buttonStyle.split(/\s+/);
+    if (/\s/.test(buttonStyle)) {
+      const csslist = buttonStyle.split(/\s+/);
       csslist.forEach((classname) => { buttonBuiltIn.push(css[classname]); });
     } else {
-      buttonBuiltIn.push(css[props.buttonStyle]);
+      buttonBuiltIn.push(css[buttonStyle]);
     }
     return className(
       css.button,
       buttonBuiltIn,
-      { [`${css.marginBottom0}`]: props.marginBottom0 },
-      { [`${css.marginBottom0}`]: props.bottomMargin0 },
-      { [`${css.paddingSide0}`]: props.paddingSide0 },
-      { [`${css.fullWidth}`]: props.fullWidth },
-      { [`${css[`align-${props.align}`]}`]: props.align },
-      props.buttonClass,
+      { [`${css.marginBottom0}`]: marginBottom0 },
+      { [`${css.marginBottom0}`]: bottomMargin0 },
+      { [`${css.paddingSide0}`]: paddingSide0 },
+      { [`${css.fullWidth}`]: fullWidth },
+      { [`${css[`align-${align}`]}`]: align },
+      buttonClass,
     );
   }
 
   function handleAnchorClick(e) {
-    if (e && !props.allowAnchorClick) e.preventDefault();
-    if (props.onClick) {
-      props.onClick(e);
+    if (e && !allowAnchorClick) e.preventDefault();
+    if (onClick) {
+      onClick(e);
     }
   }
 
-  const inputCustom = omitProps(props, [
-    'buttonClass',
-    'buttonStyle',
-    'bottomMargin0',
-    'marginBottom0',
-    'paddingSide0',
-    'align',
+  const inputCustom = omitProps(rest, [
     'hollow',
-    'fullWidth',
     'bsRole',
     'bsClass',
-    'onClick',
-    'allowAnchorClick',
     'buttonRef',
-    'type',
-    'to',
   ]);
-  const { children, onClick, type, to, buttonRef } = props;
 
   const sharedProps = {
     ...inputCustom,
@@ -106,11 +109,11 @@ const Button = React.forwardRef((props, ref) => {
 
   // Render a regular anchor tag
   // if the "href" prop is provided
-  if (props.href) {
+  if (href) {
     return (
       <a
         role="button"
-        href={props.href}
+        href={href}
         {...sharedProps}
         onClick={handleAnchorClick}
         ref={buttonRef || ref}
@@ -136,6 +139,5 @@ const Button = React.forwardRef((props, ref) => {
 
 Button.displayName = 'Button';
 Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
 
 export default Button;

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 (
     <Tag
       className={
@@ -41,6 +34,5 @@ const ButtonGroup = (props) => {
 };
 
 ButtonGroup.propTypes = propTypes;
-ButtonGroup.defaultProps = defaultProps;
 
 export default ButtonGroup;

lib/Callout/CalloutElement.js

@@ -35,35 +35,36 @@ const propTypes = {
   type: PropTypes.string,
 };
 
-const defaultProps = {
-  timeout: '6000',
-  transition: 'slide',
-  type: 'success',
-};
-
-const CalloutElement = props => (
-  <Transition
-    {...props}
-    timeout={300}
-    appear
-  >
-    {transitionState => (
-      <div className={css.calloutRow}>
-        <div
-          className={getClassNamefromTransitionState(transitionState, props.type, css.calloutBase, props.transition)}
-          data-test-callout-element
-          id={props.id}
-        >
-          <Icon icon={getIconForType(props.type)} />
-          <div className={css.message}>{props.message}</div>
-          <IconButton icon="times" onClick={() => 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 (
+    <Transition
+      {...props}
+      timeout={300}
+      appear
+    >
+      {transitionState => (
+        <div className={css.calloutRow}>
+          <div
+            className={getClassNamefromTransitionState(transitionState, props.type, css.calloutBase, props.transition)}
+            data-test-callout-element
+            id={props.id}
+          >
+            <Icon icon={getIconForType(props.type)} />
+            <div className={css.message}>{props.message}</div>
+            <IconButton icon="times" onClick={() => props.onDismiss(props.id)} data-test-callout-element-close-button />
+          </div>
         </div>
-      </div>
-    )}
-  </Transition>
-);
+      )}
+    </Transition>
+  );
+}
 
 CalloutElement.propTypes = propTypes;
-CalloutElement.defaultProps = defaultProps;
 
 export default CalloutElement;