From 018c2fc26c46a5a3be5aeaf828f2ac8cca475f0c Mon Sep 17 00:00:00 2001
From: Mozafar Haider <mozafar@dhis2.org>
Date: Sat, 14 Sep 2024 15:15:10 +0100
Subject: [PATCH 1/7] refactor(react-18): replace defaultProps with JS default
 params

---
 components/alert/src/alert-bar/alert-bar.js   | 12 ++-----
 components/alert/src/alert-bar/icon.js        |  6 +---
 .../alert/src/alert-stack/alert-stack.js      | 10 +++---
 components/box/src/box.js                     |  6 +---
 .../button/src/button-strip/button-strip.js   | 12 ++++---
 components/button/src/button/button.js        |  9 ++---
 .../src/dropdown-button/dropdown-button.js    |  4 ---
 .../button/src/split-button/split-button.js   |  4 ---
 .../src/calendar-input/calendar-input.js      |  3 --
 components/calendar/src/calendar/calendar.js  | 12 ++-----
 .../src/stories/calendar-story-wrapper.js     |  6 ----
 components/card/src/card.js                   |  6 +---
 components/center/src/center.js               |  5 ---
 .../src/checkbox-field/checkbox-field.js      | 12 +++----
 components/checkbox/src/checkbox/checkbox.js  |  6 ----
 components/chip/src/chip.js                   | 12 ++-----
 components/cover/src/cover.js                 | 12 ++++---
 .../css/src/css-variables/css-variables.js    | 16 ++++-----
 components/divider/src/divider.js             | 12 +++----
 .../field/src/field-group/field-group.js      |  6 +---
 components/field/src/field-set/field-set.js   | 10 +++---
 components/field/src/field/field.js           |  6 +---
 .../file-input-field-with-list.js             |  9 -----
 .../src/file-input-field/file-input-field.js  | 16 +++------
 .../file-input/src/file-input/file-input.js   |  5 ---
 .../src/file-list/file-list-item.js           |  6 +---
 .../src/file-list/file-list-placeholder.js    |  9 +++--
 .../file-input/src/file-list/file-list.js     | 10 +++---
 .../header-bar/src/notification-icon.js       |  6 +---
 components/help/src/help.js                   | 13 ++++---
 .../input/src/input-field/input-field.js      |  4 ---
 components/input/src/input/input.js           |  5 ---
 .../src/intersection-detector.js              |  9 ++---
 components/label/src/label.js                 |  6 +---
 components/layer/src/layer.js                 | 12 ++-----
 components/legend/src/legend.js               | 11 +++---
 .../src/circular-loader/circular-loader.js    |  6 +---
 .../loader/src/linear-loader/linear-loader.js | 12 ++-----
 components/logo/src/logo.js                   | 35 +++++++-----------
 .../menu/src/flyout-menu/flyout-menu.js       | 12 ++-----
 .../menu/src/menu-divider/menu-divider.js     | 10 +++---
 components/menu/src/menu-item/menu-item.js    |  6 +---
 .../menu-section-header.js                    |  6 +---
 components/menu/src/menu/menu.js              | 11 +++---
 .../modal/src/modal-actions/modal-actions.js  |  9 +++--
 .../modal/src/modal-content/modal-content.js  | 10 +++---
 .../modal/src/modal-title/modal-title.js      |  9 +++--
 components/modal/src/modal/modal.js           |  9 ++---
 components/node/src/node.js                   |  6 +---
 .../notice-box/src/notice-box-content.js      | 10 +++---
 components/notice-box/src/notice-box.js       |  6 +---
 .../organisation-unit-tree-root-error.js      |  9 +++--
 .../organisation-unit-tree-root-loading.js    |  8 ++---
 .../organisation-unit-tree.js                 | 21 ++++-------
 components/pagination/src/pagination.js       | 24 ++++---------
 components/popover/src/popover.e2e.stories.js |  5 ---
 components/popover/src/popover.js             | 17 +++------
 components/popper/src/popper.js               | 12 ++-----
 components/radio/src/radio.js                 |  4 ---
 .../multi-select-field/multi-select-field.js  | 11 ------
 .../multi-select-option.js                    |  6 +---
 components/select/src/multi-select/input.js   |  6 +---
 components/select/src/multi-select/menu.js    |  6 +---
 .../select/src/multi-select/multi-select.js   |  9 ++---
 components/select/src/select/input-wrapper.js |  6 +---
 components/select/src/select/menu-wrapper.js  |  6 +---
 components/select/src/select/select.js        |  4 ---
 .../single-select-field.js                    | 11 ------
 .../single-select-option.js                   |  6 +---
 components/select/src/single-select/input.js  |  6 +---
 components/select/src/single-select/menu.js   |  6 +---
 .../select/src/single-select/single-select.js |  9 ++---
 .../selector-bar-item/selector-bar-item.js    |  6 +---
 .../src/selector-bar/selector-bar.js          |  6 +---
 .../src/autocomplete/autocomplete.js          |  6 +---
 .../src/autocomplete/menu-popup.js            |  6 +---
 components/sharing-dialog/src/modal/modal.js  | 11 +++---
 .../sharing-dialog/src/sharing-dialog.js      | 30 ++++++----------
 .../switch/src/switch-field/switch-field.js   | 12 +++----
 components/switch/src/switch/switch.js        |  6 ----
 components/tab/src/tab-bar/tab-bar.js         | 12 ++++---
 components/tab/src/tab/tab.js                 |  4 ---
 .../table/src/data-table/data-table-cell.js   |  7 ----
 .../data-table-column-header.js               |  4 ---
 .../data-table-row/data-table-row.js          |  4 ---
 components/table/src/data-table/data-table.js |  6 ----
 .../data-table/table-elements/table-body.js   |  4 ---
 .../table-data-cell/table-data-cell.js        |  7 ----
 .../data-table/table-elements/table-foot.js   |  4 ---
 .../data-table/table-elements/table-head.js   |  4 ---
 .../table-header-cell-action.js               |  4 ---
 .../table-header-cell/table-header-cell.js    |  8 -----
 .../data-table/table-elements/table-row.js    |  4 ---
 .../table-elements/table-scroll-box.js        |  6 ----
 .../table-elements/table-toolbar.js           |  5 ---
 .../src/data-table/table-elements/table.js    |  6 ----
 .../src/stacked-table/stacked-table-body.js   | 10 +++---
 .../stacked-table/stacked-table-cell-head.js  |  9 ++---
 .../src/stacked-table/stacked-table-cell.js   |  9 ++---
 .../src/stacked-table/stacked-table-foot.js   | 10 +++---
 .../src/stacked-table/stacked-table-head.js   | 10 +++---
 .../stacked-table/stacked-table-row-head.js   | 10 +++---
 .../src/stacked-table/stacked-table-row.js    | 10 +++---
 .../table/src/stacked-table/stacked-table.js  |  6 +---
 components/table/src/table/table-body.js      | 11 +++---
 components/table/src/table/table-cell-head.js |  6 +---
 components/table/src/table/table-cell.js      |  6 +---
 components/table/src/table/table-foot.js      | 11 +++---
 components/table/src/table/table-head.js      | 11 +++---
 components/table/src/table/table-row-head.js  |  6 +---
 components/table/src/table/table-row.js       |  6 +---
 components/table/src/table/table.js           |  6 +---
 components/tag/src/tag.js                     |  9 ++---
 .../src/text-area-field/text-area-field.js    | 12 ++-----
 .../text-area/src/text-area/text-area.js      |  7 ----
 components/tooltip/src/tooltip.js             | 18 +++-------
 components/transfer/src/options-container.js  |  6 +---
 components/transfer/src/transfer-option.js    |  6 +---
 components/transfer/src/transfer.js           | 36 ++++++-------------
 .../transfer/src/transfer.prod.stories.js     | 11 +++---
 components/user-avatar/src/text-avatar.js     |  6 +---
 components/user-avatar/src/user-avatar.js     |  6 +---
 122 files changed, 306 insertions(+), 777 deletions(-)

diff --git a/components/alert/src/alert-bar/alert-bar.js b/components/alert/src/alert-bar/alert-bar.js
index 8e84bd2c23..4440e1996f 100644
--- a/components/alert/src/alert-bar/alert-bar.js
+++ b/components/alert/src/alert-bar/alert-bar.js
@@ -13,10 +13,10 @@ const AlertBar = ({
     children,
     className,
     critical,
-    dataTest,
-    duration,
+    dataTest = 'dhis2-uicore-alertbar',
+    duration = 8000,
     hidden,
-    icon,
+    icon = true,
     permanent,
     success,
     warning,
@@ -142,12 +142,6 @@ const alertTypePropType = mutuallyExclusive(
     PropTypes.bool
 )
 
-AlertBar.defaultProps = {
-    duration: 8000,
-    dataTest: 'dhis2-uicore-alertbar',
-    icon: true,
-}
-
 AlertBar.propTypes = {
     /** An array of 0-2 action objects 
 `[{label: "Save", onClick: clickHandler}]`*/
diff --git a/components/alert/src/alert-bar/icon.js b/components/alert/src/alert-bar/icon.js
index cb78de8a30..dec45757b7 100644
--- a/components/alert/src/alert-bar/icon.js
+++ b/components/alert/src/alert-bar/icon.js
@@ -9,7 +9,7 @@ import {
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const StatusIcon = ({ error, warning, valid, info, defaultTo }) => {
+const StatusIcon = ({ error, warning, valid, info, defaultTo = null }) => {
     if (error) {
         return <IconErrorFilled24 color={colors.white} />
     }
@@ -26,10 +26,6 @@ const StatusIcon = ({ error, warning, valid, info, defaultTo }) => {
     return defaultTo
 }
 
-StatusIcon.defaultProps = {
-    defaultTo: null,
-}
-
 StatusIcon.propTypes = {
     defaultTo: PropTypes.element,
     error: PropTypes.bool,
diff --git a/components/alert/src/alert-stack/alert-stack.js b/components/alert/src/alert-stack/alert-stack.js
index c4b35ed022..31ce8f4838 100644
--- a/components/alert/src/alert-stack/alert-stack.js
+++ b/components/alert/src/alert-stack/alert-stack.js
@@ -4,7 +4,11 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const AlertStack = ({ className, children, dataTest }) => (
+export const AlertStack = ({
+    className,
+    children,
+    dataTest = 'dhis2-uicore-alertstack',
+}) => (
     <Portal>
         <div className={cx(className)} data-test={dataTest}>
             {children}
@@ -33,10 +37,6 @@ export const AlertStack = ({ className, children, dataTest }) => (
     </Portal>
 )
 
-AlertStack.defaultProps = {
-    dataTest: 'dhis2-uicore-alertstack',
-}
-
 AlertStack.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/box/src/box.js b/components/box/src/box.js
index da9daa35b1..0221e1462e 100644
--- a/components/box/src/box.js
+++ b/components/box/src/box.js
@@ -11,7 +11,7 @@ export const Box = ({
     maxWidth,
     marginTop,
     children,
-    dataTest,
+    dataTest = 'dhis2-uicore-box',
     className,
 }) => (
     <div data-test={dataTest} className={className}>
@@ -31,10 +31,6 @@ export const Box = ({
     </div>
 )
 
-Box.defaultProps = {
-    dataTest: 'dhis2-uicore-box',
-}
-
 Box.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/button/src/button-strip/button-strip.js b/components/button/src/button-strip/button-strip.js
index 38ccc7a8d5..3857a0b194 100644
--- a/components/button/src/button-strip/button-strip.js
+++ b/components/button/src/button-strip/button-strip.js
@@ -4,7 +4,13 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Children } from 'react'
 
-const ButtonStrip = ({ className, children, middle, end, dataTest }) => (
+const ButtonStrip = ({
+    className,
+    children,
+    middle,
+    end,
+    dataTest = 'dhis2-uicore-buttonstrip',
+}) => (
     <div
         className={cx(className, { start: !middle && !end, middle, end })}
         data-test={dataTest}
@@ -39,10 +45,6 @@ const ButtonStrip = ({ className, children, middle, end, dataTest }) => (
 
 const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool)
 
-ButtonStrip.defaultProps = {
-    dataTest: 'dhis2-uicore-buttonstrip',
-}
-
 ButtonStrip.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
index a920e49b77..b25843f6e7 100644
--- a/components/button/src/button/button.js
+++ b/components/button/src/button/button.js
@@ -8,7 +8,7 @@ import styles from './button.styles.js'
 export const Button = ({
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-button',
     destructive,
     disabled,
     icon,
@@ -20,7 +20,7 @@ export const Button = ({
     small,
     tabIndex,
     toggled,
-    type,
+    type = 'button',
     value,
     onBlur,
     onClick,
@@ -94,11 +94,6 @@ export const Button = ({
     )
 }
 
-Button.defaultProps = {
-    type: 'button',
-    dataTest: 'dhis2-uicore-button',
-}
-
 Button.propTypes = {
     /** Component to render inside the button */
     children: PropTypes.node,
diff --git a/components/button/src/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js
index 82abc73249..7120a625d5 100644
--- a/components/button/src/dropdown-button/dropdown-button.js
+++ b/components/button/src/dropdown-button/dropdown-button.js
@@ -181,10 +181,6 @@ class DropdownButton extends Component {
     }
 }
 
-DropdownButton.defaultProps = {
-    dataTest: 'dhis2-uicore-dropdownbutton',
-}
-
 DropdownButton.propTypes = {
     /** Children to render inside the buton */
     children: PropTypes.node,
diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js
index 4aab19d6f5..192f59ea62 100644
--- a/components/button/src/split-button/split-button.js
+++ b/components/button/src/split-button/split-button.js
@@ -159,10 +159,6 @@ class SplitButton extends Component {
     }
 }
 
-SplitButton.defaultProps = {
-    dataTest: 'dhis2-uicore-splitbutton',
-}
-
 SplitButton.propTypes = {
     children: PropTypes.string,
     className: PropTypes.string,
diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
index 2a8ae395fe..cbc26d885d 100644
--- a/components/calendar/src/calendar-input/calendar-input.js
+++ b/components/calendar/src/calendar-input/calendar-input.js
@@ -143,9 +143,6 @@ export const CalendarInput = ({
     )
 }
 
-CalendarInput.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-calendar-inputfield',
-}
 CalendarInput.propTypes = {
     ...CalendarProps,
     ...InputFieldProps,
diff --git a/components/calendar/src/calendar/calendar.js b/components/calendar/src/calendar/calendar.js
index 51176ea25d..59962a09ec 100644
--- a/components/calendar/src/calendar/calendar.js
+++ b/components/calendar/src/calendar/calendar.js
@@ -15,10 +15,10 @@ export const Calendar = ({
     dir,
     locale,
     numberingSystem,
-    weekDayFormat,
+    weekDayFormat = 'narrow',
     timeZone,
-    width,
-    cellSize,
+    width = '240px',
+    cellSize = '32px',
 }) => {
     const wrapperBorderColor = colors.grey300
     const backgroundColor = 'none'
@@ -85,12 +85,6 @@ export const Calendar = ({
     )
 }
 
-Calendar.defaultProps = {
-    cellSize: '32px',
-    width: '240px',
-    weekDayFormat: 'narrow',
-}
-
 export const CalendarProps = {
     /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
     calendar: PropTypes.any.isRequired,
diff --git a/components/calendar/src/stories/calendar-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js
index e43ed91688..89724da63a 100644
--- a/components/calendar/src/stories/calendar-story-wrapper.js
+++ b/components/calendar/src/stories/calendar-story-wrapper.js
@@ -159,12 +159,6 @@ export const CalendarStoryWrapper = (props) => {
     )
 }
 
-CalendarStoryWrapper.defaultProps = {
-    calendar: 'gregorian',
-    component: Calendar,
-    weekDayFormat: 'narrow',
-}
-
 CalendarStoryWrapper.propTypes = {
     calendar: PropTypes.string.isRequired,
     component: PropTypes.elementType.isRequired,
diff --git a/components/card/src/card.js b/components/card/src/card.js
index 9319d2b974..8de324e841 100644
--- a/components/card/src/card.js
+++ b/components/card/src/card.js
@@ -3,7 +3,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Card = ({ className, children, dataTest }) => (
+const Card = ({ className, children, dataTest = 'dhis2-uicore-card' }) => (
     <div className={cx(className)} data-test={dataTest}>
         {children}
 
@@ -23,10 +23,6 @@ const Card = ({ className, children, dataTest }) => (
     </div>
 )
 
-Card.defaultProps = {
-    dataTest: 'dhis2-uicore-card',
-}
-
 Card.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/center/src/center.js b/components/center/src/center.js
index 7222bbb4aa..09f27ab6a2 100644
--- a/components/center/src/center.js
+++ b/components/center/src/center.js
@@ -37,11 +37,6 @@ export const Center = forwardRef(
 
 Center.displayName = 'Center'
 
-Center.defaultProps = {
-    dataTest: 'dhis2-uicore-centeredcontent',
-    position: 'middle',
-}
-
 Center.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/checkbox/src/checkbox-field/checkbox-field.js b/components/checkbox/src/checkbox-field/checkbox-field.js
index 78e5883eed..3659bd6a5f 100644
--- a/components/checkbox/src/checkbox-field/checkbox-field.js
+++ b/components/checkbox/src/checkbox-field/checkbox-field.js
@@ -5,7 +5,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Checkbox } from '../checkbox/index.js'
 
-const AddRequired = ({ label, required, dataTest }) => (
+const AddRequired = ({
+    label,
+    required,
+    dataTest = 'dhis2-uiwidgets-checkboxfield',
+}) => (
     <React.Fragment>
         {label}
         {required && <Required dataTest={`${dataTest}-required`} />}
@@ -37,7 +41,7 @@ const CheckboxField = ({
     required,
     helpText,
     validationText,
-    dataTest,
+    dataTest = 'dhis2-uiwidgets-checkboxfield',
 }) => (
     <Field
         className={className}
@@ -75,10 +79,6 @@ const CheckboxField = ({
     </Field>
 )
 
-CheckboxField.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-checkboxfield',
-}
-
 CheckboxField.propTypes = {
     checked: PropTypes.bool,
     className: PropTypes.string,
diff --git a/components/checkbox/src/checkbox/checkbox.js b/components/checkbox/src/checkbox/checkbox.js
index c4e95492df..0a722e57c3 100644
--- a/components/checkbox/src/checkbox/checkbox.js
+++ b/components/checkbox/src/checkbox/checkbox.js
@@ -178,12 +178,6 @@ class Checkbox extends Component {
     }
 }
 
-Checkbox.defaultProps = {
-    checked: false,
-    indeterminate: false,
-    dataTest: 'dhis2-uicore-checkbox',
-}
-
 const uniqueOnStatePropType = mutuallyExclusive(
     ['checked', 'indeterminate'],
     PropTypes.bool
diff --git a/components/chip/src/chip.js b/components/chip/src/chip.js
index 221bf677cd..c06364b3b3 100644
--- a/components/chip/src/chip.js
+++ b/components/chip/src/chip.js
@@ -19,11 +19,11 @@ const Chip = ({
     onRemove,
     onClick,
     icon,
-    dataTest,
-    marginBottom,
+    dataTest = 'dhis2-uicore-chip',
+    marginBottom = 4,
     marginLeft,
     marginRight,
-    marginTop,
+    marginTop = 4,
     marginInlineStart,
     marginInlineEnd,
 }) => (
@@ -114,12 +114,6 @@ const Chip = ({
     </span>
 )
 
-Chip.defaultProps = {
-    dataTest: 'dhis2-uicore-chip',
-    marginBottom: 4,
-    marginTop: 4,
-}
-
 Chip.propTypes = {
     children: PropTypes.any,
     className: PropTypes.string,
diff --git a/components/cover/src/cover.js b/components/cover/src/cover.js
index 01b2422fdc..2ddb89ff52 100644
--- a/components/cover/src/cover.js
+++ b/components/cover/src/cover.js
@@ -10,7 +10,13 @@ const createClickHandler = (onClick) => (event) => {
     }
 }
 
-const Cover = ({ children, className, dataTest, onClick, translucent }) => (
+const Cover = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-componentcover',
+    onClick,
+    translucent,
+}) => (
     <div
         className={cx(className, { translucent })}
         onClick={createClickHandler(onClick)}
@@ -33,10 +39,6 @@ const Cover = ({ children, className, dataTest, onClick, translucent }) => (
     </div>
 )
 
-Cover.defaultProps = {
-    dataTest: 'dhis2-uicore-componentcover',
-}
-
 Cover.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/css/src/css-variables/css-variables.js b/components/css/src/css-variables/css-variables.js
index d1136932fa..959956efc7 100644
--- a/components/css/src/css-variables/css-variables.js
+++ b/components/css/src/css-variables/css-variables.js
@@ -15,7 +15,13 @@ const toCustomPropertyString = (themeSection) =>
         .map(([key, value]) => `--${key}: ${value};`)
         .join('\n')
 
-const CssVariables = ({ colors, theme, layers, spacers, elevations }) => {
+const CssVariables = ({
+    colors = false,
+    theme = false,
+    layers = false,
+    spacers = false,
+    elevations = false,
+}) => {
     const allowedProps = { colors, theme, layers, spacers, elevations }
     const variables = Object.keys(allowedProps)
         // Filter all props that are false
@@ -36,14 +42,6 @@ const CssVariables = ({ colors, theme, layers, spacers, elevations }) => {
     )
 }
 
-CssVariables.defaultProps = {
-    colors: false,
-    theme: false,
-    layers: false,
-    spacers: false,
-    elevations: false,
-}
-
 CssVariables.propTypes = {
     colors: PropTypes.bool,
     elevations: PropTypes.bool,
diff --git a/components/divider/src/divider.js b/components/divider/src/divider.js
index 1db09c1b3e..10f75165db 100644
--- a/components/divider/src/divider.js
+++ b/components/divider/src/divider.js
@@ -15,7 +15,12 @@ const flipMargin = (margin) => {
     return margin
 }
 
-const Divider = ({ className, dataTest, dense, margin }) => {
+const Divider = ({
+    className,
+    dataTest = 'dhis2-uicore-divider',
+    dense,
+    margin = `${spacers.dp8} 0`,
+}) => {
     return (
         <div className={className} data-test={dataTest} role="separator">
             <style jsx>{`
@@ -38,11 +43,6 @@ const Divider = ({ className, dataTest, dense, margin }) => {
     )
 }
 
-Divider.defaultProps = {
-    dataTest: 'dhis2-uicore-divider',
-    margin: `${spacers.dp8} 0`,
-}
-
 Divider.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
diff --git a/components/field/src/field-group/field-group.js b/components/field/src/field-group/field-group.js
index 735753f839..bccbd38916 100644
--- a/components/field/src/field-group/field-group.js
+++ b/components/field/src/field-group/field-group.js
@@ -12,7 +12,7 @@ const FieldGroup = ({
     label,
     name,
     required,
-    dataTest,
+    dataTest = 'dhis2-uiwidgets-fieldsetfield',
     valid,
     error,
     warning,
@@ -34,10 +34,6 @@ const FieldGroup = ({
     </FieldSet>
 )
 
-FieldGroup.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-fieldsetfield',
-}
-
 FieldGroup.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/field/src/field-set/field-set.js b/components/field/src/field-set/field-set.js
index 6b6e05dbff..1f14a80a4e 100644
--- a/components/field/src/field-set/field-set.js
+++ b/components/field/src/field-set/field-set.js
@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const FieldSet = ({ className, children, dataTest }) => (
+const FieldSet = ({
+    className,
+    children,
+    dataTest = 'dhis2-uicore-fieldset',
+}) => (
     <fieldset className={className} data-test={dataTest}>
         {children}
         <style jsx>{`
@@ -14,10 +18,6 @@ const FieldSet = ({ className, children, dataTest }) => (
     </fieldset>
 )
 
-FieldSet.defaultProps = {
-    dataTest: 'dhis2-uicore-fieldset',
-}
-
 FieldSet.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/field/src/field/field.js b/components/field/src/field/field.js
index f7d11cde39..70aa9bdbd8 100644
--- a/components/field/src/field/field.js
+++ b/components/field/src/field/field.js
@@ -14,7 +14,7 @@ const Field = ({
     name,
     validationText,
     required,
-    dataTest,
+    dataTest = 'dhis2-uicore-field',
     valid,
     error,
     warning,
@@ -50,10 +50,6 @@ const Field = ({
     </Box>
 )
 
-Field.defaultProps = {
-    dataTest: 'dhis2-uicore-field',
-}
-
 Field.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
index e09c88f1d8..c63eae61e1 100644
--- a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
+++ b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
@@ -128,15 +128,6 @@ class FileInputFieldWithList extends Component {
     }
 }
 
-FileInputFieldWithList.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-fileinputfieldwithlist',
-    files: [],
-
-    buttonLabel: () => i18n.t('Upload a file'),
-    placeholder: () => i18n.t('No file uploaded yet'),
-    removeText: () => i18n.t('Remove'),
-}
-
 FileInputFieldWithList.propTypes = {
     /** Called with signature `({ name: string, files: [File] }, event)` */
     onChange: PropTypes.func.isRequired,
diff --git a/components/file-input/src/file-input-field/file-input-field.js b/components/file-input/src/file-input-field/file-input-field.js
index 981ae9af80..3f26a8f120 100644
--- a/components/file-input/src/file-input-field/file-input-field.js
+++ b/components/file-input/src/file-input-field/file-input-field.js
@@ -17,11 +17,11 @@ const translate = (prop, interpolationObject) => {
 }
 
 const FileInputField = ({
-    accept,
-    buttonLabel,
+    accept = '*',
+    buttonLabel = () => i18n.t('Upload a file'),
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uiwidgets-fileinputfield',
     disabled,
     error,
     helpText,
@@ -34,7 +34,7 @@ const FileInputField = ({
     onChange,
     onFocus,
     onKeyDown,
-    placeholder,
+    placeholder = () => i18n.t('No file uploaded yet'),
     required,
     small,
     tabIndex,
@@ -89,14 +89,6 @@ const FileInputField = ({
     </Field>
 )
 
-FileInputField.defaultProps = {
-    accept: '*',
-    dataTest: 'dhis2-uiwidgets-fileinputfield',
-
-    buttonLabel: () => i18n.t('Upload a file'),
-    placeholder: () => i18n.t('No file uploaded yet'),
-}
-
 FileInputField.propTypes = {
     /** The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) */
     accept: PropTypes.string,
diff --git a/components/file-input/src/file-input/file-input.js b/components/file-input/src/file-input/file-input.js
index 9af94cb9ca..f5b012b408 100644
--- a/components/file-input/src/file-input/file-input.js
+++ b/components/file-input/src/file-input/file-input.js
@@ -115,11 +115,6 @@ class FileInput extends Component {
     }
 }
 
-FileInput.defaultProps = {
-    accept: '*',
-    dataTest: 'dhis2-uicore-fileinput',
-}
-
 FileInput.propTypes = {
     /**
      * The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)
diff --git a/components/file-input/src/file-list/file-list-item.js b/components/file-input/src/file-list/file-list-item.js
index 93b961d58e..7b5f6acc32 100644
--- a/components/file-input/src/file-list/file-list-item.js
+++ b/components/file-input/src/file-list/file-list-item.js
@@ -13,7 +13,7 @@ const FileListItem = ({
     loading,
     onCancel,
     cancelText,
-    dataTest,
+    dataTest = 'dhis2-uicore-filelistitem',
 }) => {
     const handleKeyDown = (event) => {
         if (!onRemove) {
@@ -117,10 +117,6 @@ const FileListItem = ({
     )
 }
 
-FileListItem.defaultProps = {
-    dataTest: 'dhis2-uicore-filelistitem',
-}
-
 FileListItem.propTypes = {
     onRemove: PropTypes.func.isRequired,
     cancelText: PropTypes.string,
diff --git a/components/file-input/src/file-list/file-list-placeholder.js b/components/file-input/src/file-list/file-list-placeholder.js
index 687d9271a2..8f6b74dcdd 100644
--- a/components/file-input/src/file-list/file-list-placeholder.js
+++ b/components/file-input/src/file-list/file-list-placeholder.js
@@ -2,7 +2,10 @@ import { colors, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const FileListPlaceholder = ({ children, dataTest }) => (
+const FileListPlaceholder = ({
+    children,
+    dataTest = 'dhis2-uicore-filelistplaceholder',
+}) => (
     <p data-test={dataTest}>
         {children}
         <style jsx>{`
@@ -16,10 +19,6 @@ const FileListPlaceholder = ({ children, dataTest }) => (
     </p>
 )
 
-FileListPlaceholder.defaultProps = {
-    dataTest: 'dhis2-uicore-filelistplaceholder',
-}
-
 FileListPlaceholder.propTypes = {
     children: PropTypes.string,
     dataTest: PropTypes.string,
diff --git a/components/file-input/src/file-list/file-list.js b/components/file-input/src/file-list/file-list.js
index f87aa9fd2a..60247d9f6a 100644
--- a/components/file-input/src/file-list/file-list.js
+++ b/components/file-input/src/file-list/file-list.js
@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const FileList = ({ children, className, dataTest }) => (
+const FileList = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-filelist',
+}) => (
     <div className={className} data-test={dataTest}>
         {children}
         <style jsx>{`
@@ -15,10 +19,6 @@ const FileList = ({ children, className, dataTest }) => (
     </div>
 )
 
-FileList.defaultProps = {
-    dataTest: 'dhis2-uicore-filelist',
-}
-
 FileList.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/header-bar/src/notification-icon.js b/components/header-bar/src/notification-icon.js
index 46f96db6ea..6a2010030d 100755
--- a/components/header-bar/src/notification-icon.js
+++ b/components/header-bar/src/notification-icon.js
@@ -13,7 +13,7 @@ function icon(kind) {
 }
 
 export const NotificationIcon = ({
-    count,
+    count = 0,
     href,
     kind,
     dataTestId,
@@ -81,10 +81,6 @@ export const NotificationIcon = ({
     </a>
 )
 
-NotificationIcon.defaultProps = {
-    count: 0,
-}
-
 NotificationIcon.propTypes = {
     'aria-label': PropTypes.string.isRequired,
     href: PropTypes.string.isRequired,
diff --git a/components/help/src/help.js b/components/help/src/help.js
index 68da79e2f3..298a03e4c6 100644
--- a/components/help/src/help.js
+++ b/components/help/src/help.js
@@ -3,7 +3,14 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Help = ({ children, valid, error, warning, className, dataTest }) => (
+const Help = ({
+    children,
+    valid,
+    error,
+    warning,
+    className,
+    dataTest = 'dhis2-uicore-help',
+}) => (
     <p
         className={cx(className, {
             valid,
@@ -40,10 +47,6 @@ const Help = ({ children, valid, error, warning, className, dataTest }) => (
     </p>
 )
 
-Help.defaultProps = {
-    dataTest: 'dhis2-uicore-help',
-}
-
 Help.propTypes = {
     children: PropTypes.string,
     className: PropTypes.string,
diff --git a/components/input/src/input-field/input-field.js b/components/input/src/input-field/input-field.js
index 1b7857bdab..e7d45315a2 100644
--- a/components/input/src/input-field/input-field.js
+++ b/components/input/src/input-field/input-field.js
@@ -82,10 +82,6 @@ class InputField extends React.Component {
     }
 }
 
-InputField.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-inputfield',
-}
-
 const InputFieldProps = {
     /** The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) */
     autoComplete: PropTypes.string,
diff --git a/components/input/src/input/input.js b/components/input/src/input/input.js
index cfa536a7ed..d26a4e96ad 100644
--- a/components/input/src/input/input.js
+++ b/components/input/src/input/input.js
@@ -199,11 +199,6 @@ export class Input extends Component {
     }
 }
 
-Input.defaultProps = {
-    type: 'text',
-    dataTest: 'dhis2-uicore-input',
-}
-
 Input.propTypes = {
     /** The [native `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete) */
     autoComplete: PropTypes.string,
diff --git a/components/intersection-detector/src/intersection-detector.js b/components/intersection-detector/src/intersection-detector.js
index 03ab923797..90dcd0fc4e 100644
--- a/components/intersection-detector/src/intersection-detector.js
+++ b/components/intersection-detector/src/intersection-detector.js
@@ -2,11 +2,11 @@ import PropTypes from 'prop-types'
 import React, { useEffect, useRef } from 'react'
 
 export const IntersectionDetector = ({
-    threshold,
+    threshold = 0,
     onChange,
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-intersectiondetector',
     rootRef,
 }) => {
     // Use useRef instead of useState to prevent unnecessary re-render:
@@ -77,11 +77,6 @@ export const IntersectionDetector = ({
     )
 }
 
-IntersectionDetector.defaultProps = {
-    threshold: 0,
-    dataTest: 'dhis2-uicore-intersectiondetector',
-}
-
 IntersectionDetector.propTypes = {
     /** React ref on other component to detect intersections with */
     rootRef: PropTypes.shape({
diff --git a/components/label/src/label.js b/components/label/src/label.js
index a7a90c534a..146c0f39a1 100644
--- a/components/label/src/label.js
+++ b/components/label/src/label.js
@@ -31,7 +31,7 @@ export const Label = ({
     required,
     disabled,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-label',
 }) => (
     <label
         htmlFor={htmlFor}
@@ -46,10 +46,6 @@ export const Label = ({
     </label>
 )
 
-Label.defaultProps = {
-    dataTest: 'dhis2-uicore-label',
-}
-
 Label.propTypes = {
     children: PropTypes.string,
     className: PropTypes.string,
diff --git a/components/layer/src/layer.js b/components/layer/src/layer.js
index 333e28ed8b..7278115c94 100644
--- a/components/layer/src/layer.js
+++ b/components/layer/src/layer.js
@@ -7,12 +7,12 @@ import React from 'react'
 const Layer = ({
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-layer',
     disablePortal,
-    level,
+    level = 'auto',
     onBackdropClick,
     onClick,
-    position,
+    position = 'fixed',
     translucent,
 }) => {
     const resolvedOnClick = onBackdropClick || onClick
@@ -70,12 +70,6 @@ const Layer = ({
     )
 }
 
-Layer.defaultProps = {
-    position: 'fixed',
-    dataTest: 'dhis2-uicore-layer',
-    level: 'auto',
-}
-
 Layer.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/legend/src/legend.js b/components/legend/src/legend.js
index 5fe3e34c29..04b99c658d 100644
--- a/components/legend/src/legend.js
+++ b/components/legend/src/legend.js
@@ -3,7 +3,12 @@ import { Required } from '@dhis2-ui/required'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Legend = ({ className, children, required, dataTest }) => (
+const Legend = ({
+    className,
+    children,
+    required,
+    dataTest = 'dhis2-uicore-legend',
+}) => (
     <legend className={className} data-test={dataTest}>
         {children}
 
@@ -19,10 +24,6 @@ const Legend = ({ className, children, required, dataTest }) => (
     </legend>
 )
 
-Legend.defaultProps = {
-    dataTest: 'dhis2-uicore-legend',
-}
-
 Legend.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/loader/src/circular-loader/circular-loader.js b/components/loader/src/circular-loader/circular-loader.js
index a512c321ff..b6d584f5bf 100644
--- a/components/loader/src/circular-loader/circular-loader.js
+++ b/components/loader/src/circular-loader/circular-loader.js
@@ -9,7 +9,7 @@ const CircularLoader = ({
     extrasmall,
     invert,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-circularloader',
     'aria-label': ariaLabel,
 }) => (
     <div
@@ -64,10 +64,6 @@ const CircularLoader = ({
     </div>
 )
 
-CircularLoader.defaultProps = {
-    dataTest: 'dhis2-uicore-circularloader',
-}
-
 CircularLoader.propTypes = {
     'aria-label': PropTypes.string,
     className: PropTypes.string,
diff --git a/components/loader/src/linear-loader/linear-loader.js b/components/loader/src/linear-loader/linear-loader.js
index 460eaea02a..872cc6ad94 100644
--- a/components/loader/src/linear-loader/linear-loader.js
+++ b/components/loader/src/linear-loader/linear-loader.js
@@ -33,11 +33,11 @@ Progress.propTypes = {
 
 const LinearLoader = ({
     amount,
-    width,
-    margin,
+    width = '300px',
+    margin = spacers.dp12,
     invert,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-linearloader',
     'aria-label': ariaLabel,
 }) => {
     return (
@@ -72,12 +72,6 @@ const LinearLoader = ({
     )
 }
 
-LinearLoader.defaultProps = {
-    margin: spacers.dp12,
-    width: '300px',
-    dataTest: 'dhis2-uicore-linearloader',
-}
-
 LinearLoader.propTypes = {
     /** The progression in percent without the '%' sign */
     amount: PropTypes.number.isRequired,
diff --git a/components/logo/src/logo.js b/components/logo/src/logo.js
index f4fdb9c35a..ff89d047e9 100644
--- a/components/logo/src/logo.js
+++ b/components/logo/src/logo.js
@@ -16,33 +16,29 @@ const blue = '#0080d4'
 const white = '#ffffff'
 const dark = '#212225'
 
-export const LogoIcon = ({ className, dataTest }) => (
-    <LogoIconSvg iconColor={blue} className={className} dataTest={dataTest} />
-)
-
-LogoIcon.defaultProps = {
-    dataTest: 'dhis2-uicore-logoicon',
-}
+export const LogoIcon = ({
+    className,
+    dataTest = 'dhis2-uicore-logowhite',
+}) => <LogoIconSvg iconColor={blue} className={className} dataTest={dataTest} />
 
 LogoIcon.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
 }
 
-export const LogoIconWhite = ({ className, dataTest }) => (
+export const LogoIconWhite = ({
+    className,
+    dataTest = 'dhis2-uicore-logowhite',
+}) => (
     <LogoIconSvg iconColor={white} className={className} dataTest={dataTest} />
 )
 
-LogoIconWhite.defaultProps = {
-    dataTest: 'dhis2-uicore-logoiconwhite',
-}
-
 LogoIconWhite.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
 }
 
-export const Logo = ({ className, dataTest }) => (
+export const Logo = ({ className, dataTest = 'dhis2-uicore-logowhite' }) => (
     <LogoSvg
         iconColor={blue}
         textColor={dark}
@@ -51,16 +47,15 @@ export const Logo = ({ className, dataTest }) => (
     />
 )
 
-Logo.defaultProps = {
-    dataTest: 'dhis2-uicore-logo',
-}
-
 Logo.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
 }
 
-export const LogoWhite = ({ className, dataTest }) => (
+export const LogoWhite = ({
+    className,
+    dataTest = 'dhis2-uicore-logowhite',
+}) => (
     <LogoSvg
         iconColor={white}
         textColor={white}
@@ -69,10 +64,6 @@ export const LogoWhite = ({ className, dataTest }) => (
     />
 )
 
-LogoWhite.defaultProps = {
-    dataTest: 'dhis2-uicore-logowhite',
-}
-
 LogoWhite.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
diff --git a/components/menu/src/flyout-menu/flyout-menu.js b/components/menu/src/flyout-menu/flyout-menu.js
index b47de0604e..971957b6e8 100644
--- a/components/menu/src/flyout-menu/flyout-menu.js
+++ b/components/menu/src/flyout-menu/flyout-menu.js
@@ -13,10 +13,10 @@ import { Menu } from '../menu/index.js'
 const FlyoutMenu = ({
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-menu',
     dense,
-    maxHeight,
-    maxWidth,
+    maxHeight = 'auto',
+    maxWidth = '380px',
     closeMenu,
 }) => {
     const [openedSubMenu, setOpenedSubMenu] = useState(null)
@@ -93,12 +93,6 @@ const FlyoutMenu = ({
     )
 }
 
-FlyoutMenu.defaultProps = {
-    dataTest: 'dhis2-uicore-menu',
-    maxWidth: '380px',
-    maxHeight: 'auto',
-}
-
 FlyoutMenu.propTypes = {
     /** Typically, but not limited to, `MenuItem` components */
     children: PropTypes.node,
diff --git a/components/menu/src/menu-divider/menu-divider.js b/components/menu/src/menu-divider/menu-divider.js
index a13140f7f6..edf1b303d3 100644
--- a/components/menu/src/menu-divider/menu-divider.js
+++ b/components/menu/src/menu-divider/menu-divider.js
@@ -3,7 +3,11 @@ import { Divider } from '@dhis2-ui/divider'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const MenuDivider = ({ className, dataTest, dense }) => (
+const MenuDivider = ({
+    className,
+    dataTest = 'dhis2-uicore-menudivider',
+    dense,
+}) => (
     <li className={className} data-test={dataTest}>
         <Divider dense={dense} />
 
@@ -19,10 +23,6 @@ const MenuDivider = ({ className, dataTest, dense }) => (
     </li>
 )
 
-MenuDivider.defaultProps = {
-    dataTest: 'dhis2-uicore-menudivider',
-}
-
 MenuDivider.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
diff --git a/components/menu/src/menu-item/menu-item.js b/components/menu/src/menu-item/menu-item.js
index c03c9c80de..0baedd2789 100644
--- a/components/menu/src/menu-item/menu-item.js
+++ b/components/menu/src/menu-item/menu-item.js
@@ -33,7 +33,7 @@ const MenuItem = ({
     disabled,
     dense,
     active,
-    dataTest,
+    dataTest = 'dhis2-uicore-menuitem',
     chevron,
     value,
     label,
@@ -148,10 +148,6 @@ const MenuItem = ({
     )
 }
 
-MenuItem.defaultProps = {
-    dataTest: 'dhis2-uicore-menuitem',
-}
-
 MenuItem.propTypes = {
     active: PropTypes.bool,
     checkbox: PropTypes.bool,
diff --git a/components/menu/src/menu-section-header/menu-section-header.js b/components/menu/src/menu-section-header/menu-section-header.js
index f7a2fb06d1..1c788a83cc 100644
--- a/components/menu/src/menu-section-header/menu-section-header.js
+++ b/components/menu/src/menu-section-header/menu-section-header.js
@@ -6,7 +6,7 @@ import React from 'react'
 
 const MenuSectionHeader = ({
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-menusectionheader',
     dense,
     hideDivider,
     label,
@@ -41,10 +41,6 @@ const MenuSectionHeader = ({
     </li>
 )
 
-MenuSectionHeader.defaultProps = {
-    dataTest: 'dhis2-uicore-menusectionheader',
-}
-
 MenuSectionHeader.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
diff --git a/components/menu/src/menu/menu.js b/components/menu/src/menu/menu.js
index f7422ef2f5..0e34428078 100644
--- a/components/menu/src/menu/menu.js
+++ b/components/menu/src/menu/menu.js
@@ -3,7 +3,12 @@ import React, { Children, cloneElement, isValidElement, useMemo } from 'react'
 import { hasMenuItemRole } from './helpers.js'
 import { useMenuNavigation } from './use-menu.js'
 
-const Menu = ({ children, className, dataTest, dense }) => {
+const Menu = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-menulist',
+    dense,
+}) => {
     const { menuRef, focusedIndex } = useMenuNavigation(children)
 
     const childrenToRender = useMemo(
@@ -79,10 +84,6 @@ const Menu = ({ children, className, dataTest, dense }) => {
     )
 }
 
-Menu.defaultProps = {
-    dataTest: 'dhis2-uicore-menulist',
-}
-
 Menu.propTypes = {
     /** Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader` */
     children: PropTypes.node,
diff --git a/components/modal/src/modal-actions/modal-actions.js b/components/modal/src/modal-actions/modal-actions.js
index 7260ff92ec..a708ce31f4 100644
--- a/components/modal/src/modal-actions/modal-actions.js
+++ b/components/modal/src/modal-actions/modal-actions.js
@@ -2,7 +2,10 @@ import { spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const ModalActions = ({ children, dataTest }) => (
+export const ModalActions = ({
+    children,
+    dataTest = 'dhis2-uicore-modalactions',
+}) => (
     <div data-test={dataTest}>
         {children}
 
@@ -18,10 +21,6 @@ export const ModalActions = ({ children, dataTest }) => (
     </div>
 )
 
-ModalActions.defaultProps = {
-    dataTest: 'dhis2-uicore-modalactions',
-}
-
 ModalActions.propTypes = {
     children: PropTypes.node,
     dataTest: PropTypes.string,
diff --git a/components/modal/src/modal-content/modal-content.js b/components/modal/src/modal-content/modal-content.js
index ea9cdd729b..8ffb6ee9cd 100644
--- a/components/modal/src/modal-content/modal-content.js
+++ b/components/modal/src/modal-content/modal-content.js
@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const ModalContent = ({ children, className, dataTest }) => (
+export const ModalContent = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-modalcontent',
+}) => (
     <div className={className} data-test={dataTest}>
         {children}
 
@@ -15,10 +19,6 @@ export const ModalContent = ({ children, className, dataTest }) => (
     </div>
 )
 
-ModalContent.defaultProps = {
-    dataTest: 'dhis2-uicore-modalcontent',
-}
-
 ModalContent.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/modal/src/modal-title/modal-title.js b/components/modal/src/modal-title/modal-title.js
index 95c32c2c1c..c9cf334dd0 100644
--- a/components/modal/src/modal-title/modal-title.js
+++ b/components/modal/src/modal-title/modal-title.js
@@ -3,7 +3,10 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const ModalTitle = ({ children, dataTest }) => (
+export const ModalTitle = ({
+    children,
+    dataTest = 'dhis2-uicore-modaltitle',
+}) => (
     <h1 className={cx('title')} data-test={dataTest}>
         {children}
 
@@ -21,10 +24,6 @@ export const ModalTitle = ({ children, dataTest }) => (
     </h1>
 )
 
-ModalTitle.defaultProps = {
-    dataTest: 'dhis2-uicore-modaltitle',
-}
-
 ModalTitle.propTypes = {
     children: PropTypes.node,
     dataTest: PropTypes.string,
diff --git a/components/modal/src/modal/modal.js b/components/modal/src/modal/modal.js
index 05af0f1e49..eb6c12521e 100644
--- a/components/modal/src/modal/modal.js
+++ b/components/modal/src/modal/modal.js
@@ -19,12 +19,12 @@ const resolveLayerStyles = (hide) =>
 export const Modal = ({
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-modal',
     hide,
     fluid,
     large,
     onClose,
-    position,
+    position = 'top',
     small,
 }) => {
     const layerStyles = resolveLayerStyles(hide)
@@ -101,11 +101,6 @@ export const Modal = ({
     )
 }
 
-Modal.defaultProps = {
-    dataTest: 'dhis2-uicore-modal',
-    position: 'top',
-}
-
 Modal.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/node/src/node.js b/components/node/src/node.js
index f6ca37160e..a318087885 100644
--- a/components/node/src/node.js
+++ b/components/node/src/node.js
@@ -13,7 +13,7 @@ export const Node = ({
     icon,
     onOpen,
     onClose,
-    dataTest,
+    dataTest = 'dhis2-uicore-node',
 }) => {
     const hasLeaves = !!React.Children.toArray(children).filter((i) => i).length
     const showArrow = !icon && hasLeaves
@@ -51,10 +51,6 @@ export const Node = ({
     )
 }
 
-Node.defaultProps = {
-    dataTest: 'dhis2-uicore-node',
-}
-
 Node.propTypes = {
     /** Content below this level of the hierarchy; children are revealed when this leaf is 'open' */
     children: PropTypes.node,
diff --git a/components/notice-box/src/notice-box-content.js b/components/notice-box/src/notice-box-content.js
index 36544f2ab9..1583dd3878 100644
--- a/components/notice-box/src/notice-box-content.js
+++ b/components/notice-box/src/notice-box-content.js
@@ -4,7 +4,11 @@ import React from 'react'
 import { NoticeBoxMessage } from './notice-box-message.js'
 import { NoticeBoxTitle } from './notice-box-title.js'
 
-export const NoticeBoxContent = ({ children, dataTest, title }) => {
+export const NoticeBoxContent = ({
+    children,
+    dataTest = 'dhis2-uicore-noticebox-content',
+    title,
+}) => {
     return (
         <div data-test={dataTest}>
             <NoticeBoxTitle title={title} dataTest={`${dataTest}-title`} />
@@ -23,10 +27,6 @@ export const NoticeBoxContent = ({ children, dataTest, title }) => {
     )
 }
 
-NoticeBoxContent.defaultProps = {
-    dataTest: 'dhis2-uicore-noticebox-content',
-}
-
 NoticeBoxContent.propTypes = {
     children: PropTypes.node,
     dataTest: PropTypes.string,
diff --git a/components/notice-box/src/notice-box.js b/components/notice-box/src/notice-box.js
index c3706795f1..1cc362f115 100644
--- a/components/notice-box/src/notice-box.js
+++ b/components/notice-box/src/notice-box.js
@@ -9,7 +9,7 @@ import { NoticeBoxIcon } from './notice-box-icon.js'
 export const NoticeBox = ({
     className,
     children,
-    dataTest,
+    dataTest = 'dhis2-uicore-noticebox',
     title,
     warning,
     error,
@@ -63,10 +63,6 @@ export const NoticeBox = ({
     )
 }
 
-NoticeBox.defaultProps = {
-    dataTest: 'dhis2-uicore-noticebox',
-}
-
 NoticeBox.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-error.js b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-error.js
index bb9d9987d4..3dde6488ae 100644
--- a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-error.js
+++ b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-error.js
@@ -2,7 +2,10 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../locales/index.js'
 
-export const OrganisationUnitTreeRootError = ({ dataTest, error }) => (
+export const OrganisationUnitTreeRootError = ({
+    dataTest = 'dhis2-uiwidgets-orgunittree-error',
+    error,
+}) => (
     <div data-test={dataTest}>
         {i18n.t('Error: {{ ERRORMESSAGE }}', {
             ERRORMESSAGE: error,
@@ -11,10 +14,6 @@ export const OrganisationUnitTreeRootError = ({ dataTest, error }) => (
     </div>
 )
 
-OrganisationUnitTreeRootError.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-orgunittree-error',
-}
-
 OrganisationUnitTreeRootError.propTypes = {
     error: PropTypes.string.isRequired,
     dataTest: PropTypes.string,
diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-loading.js b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-loading.js
index d9558c1304..8da95d42f8 100644
--- a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-loading.js
+++ b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree-root-loading.js
@@ -2,7 +2,9 @@ import { CircularLoader } from '@dhis2-ui/loader'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const OrganisationUnitTreeRootLoading = ({ dataTest }) => (
+export const OrganisationUnitTreeRootLoading = ({
+    dataTest = 'dhis2-uiwidgets-orgunittree-loading',
+}) => (
     <div data-test={dataTest}>
         <CircularLoader small />
 
@@ -15,10 +17,6 @@ export const OrganisationUnitTreeRootLoading = ({ dataTest }) => (
     </div>
 )
 
-OrganisationUnitTreeRootLoading.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-orgunittree-loading',
-}
-
 OrganisationUnitTreeRootLoading.propTypes = {
     dataTest: PropTypes.string,
 }
diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js
index 30bb83d4d2..bdb6fe87c1 100644
--- a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js
+++ b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js
@@ -16,15 +16,15 @@ const OrganisationUnitTree = ({
     roots,
 
     autoExpandLoadingError,
-    dataTest,
+    dataTest = 'dhis2-uiwidgets-orgunittree',
     disableSelection,
     forceReload,
-    highlighted,
+    highlighted = [],
     isUserDataViewFallback,
-    initiallyExpanded,
-    filter,
-    renderNodeLabel,
-    selected,
+    initiallyExpanded = [],
+    filter = [],
+    renderNodeLabel = defaultRenderNodeLabel,
+    selected = [],
     singleSelection,
     suppressAlphabeticalSorting,
 
@@ -237,13 +237,4 @@ OrganisationUnitTree.propTypes = {
     //idsThatShouldBeReloaded: propTypes.arrayOf(orgUnitIdPropType),
 }
 
-OrganisationUnitTree.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-orgunittree',
-    filter: [],
-    highlighted: [],
-    initiallyExpanded: [],
-    selected: [],
-    renderNodeLabel: defaultRenderNodeLabel,
-}
-
 export { OrganisationUnitTree }
diff --git a/components/pagination/src/pagination.js b/components/pagination/src/pagination.js
index d7f6736f4b..36fe56f084 100644
--- a/components/pagination/src/pagination.js
+++ b/components/pagination/src/pagination.js
@@ -15,24 +15,24 @@ const MAX_PAGE_COUNT = 2000
 
 const Pagination = ({
     className,
-    dataTest,
+    dataTest = 'dhis2-uiwidgets-pagination',
     disabled,
     hidePageSelect,
     hidePageSizeSelect,
     hidePageSummary,
     isLastPage,
-    nextPageText,
+    nextPageText = () => i18n.t('Next'),
     onPageChange,
     onPageSizeChange,
     page,
     pageCount,
     pageLength,
-    pageSelectText,
+    pageSelectText = () => i18n.t('Page'),
     pageSize,
-    pageSizes,
-    pageSizeSelectText,
-    pageSummaryText,
-    previousPageText,
+    pageSizes = ['5', '10', '20', '30', '40', '50', '75', '100'],
+    pageSizeSelectText = () => i18n.t('Items per page'),
+    pageSummaryText = getDefaultPageSummaryText,
+    previousPageText = () => i18n.t('Previous'),
     total,
 }) => {
     const { firstItem, lastItem } = getItemRange({
@@ -117,16 +117,6 @@ const Pagination = ({
     )
 }
 
-Pagination.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-pagination',
-    pageSizes: ['5', '10', '20', '30', '40', '50', '75', '100'],
-    nextPageText: () => i18n.t('Next'),
-    pageSelectText: () => i18n.t('Page'),
-    pageSizeSelectText: () => i18n.t('Items per page'),
-    pageSummaryText: getDefaultPageSummaryText,
-    previousPageText: () => i18n.t('Previous'),
-}
-
 Pagination.propTypes = {
     page: PropTypes.number.isRequired,
     pageSize: PropTypes.number.isRequired,
diff --git a/components/popover/src/popover.e2e.stories.js b/components/popover/src/popover.e2e.stories.js
index aa1cdbf9cb..5741ccc425 100644
--- a/components/popover/src/popover.e2e.stories.js
+++ b/components/popover/src/popover.e2e.stories.js
@@ -45,11 +45,6 @@ class PopperInBoxWithCenteredReferenceElement extends Component {
         )
     }
 }
-PopperInBoxWithCenteredReferenceElement.defaultProps = {
-    paddingTop: 220,
-    popoverHeight: 200,
-    popoverWidth: 336,
-}
 PopperInBoxWithCenteredReferenceElement.propTypes = {
     paddingTop: PropTypes.number,
     popoverHeight: PropTypes.number,
diff --git a/components/popover/src/popover.js b/components/popover/src/popover.js
index 414190ab2f..bdefd2fc4c 100644
--- a/components/popover/src/popover.js
+++ b/components/popover/src/popover.js
@@ -9,14 +9,14 @@ import { combineModifiers } from './modifiers.js'
 const Popover = ({
     children,
     reference,
-    arrow,
+    arrow = true,
     className,
-    dataTest,
-    elevation,
-    maxWidth,
+    dataTest = 'dhis2-uicore-popover',
+    elevation = elevations.e200,
+    maxWidth = 360,
     observePopperResize,
     observeReferenceResize,
-    placement,
+    placement = 'top',
     onClickOutside,
 }) => {
     const referenceElement = getReferenceElement(reference)
@@ -72,13 +72,6 @@ const Popover = ({
     )
 }
 
-Popover.defaultProps = {
-    arrow: true,
-    dataTest: 'dhis2-uicore-popover',
-    elevation: elevations.e200,
-    maxWidth: 360,
-    placement: 'top',
-}
 Popover.propTypes = {
     children: PropTypes.node.isRequired,
     /** Show or hide the arrow */
diff --git a/components/popper/src/popper.js b/components/popper/src/popper.js
index ab88f12df1..f8208c21d0 100644
--- a/components/popper/src/popper.js
+++ b/components/popper/src/popper.js
@@ -18,12 +18,12 @@ const flipPlacement = (placement) => {
 const Popper = ({
     children,
     className,
-    dataTest,
-    modifiers,
+    dataTest = 'dhis2-uicore-popper',
+    modifiers = [],
     observePopperResize,
     observeReferenceResize,
     onFirstUpdate,
-    placement,
+    placement = 'auto',
     reference,
     strategy,
 }) => {
@@ -69,12 +69,6 @@ const Popper = ({
     )
 }
 
-Popper.defaultProps = {
-    dataTest: 'dhis2-uicore-popper',
-    modifiers: [],
-    placement: 'auto',
-}
-
 // Prop names follow the names here: https://popper.js.org/docs/v2/constructors/
 Popper.propTypes = {
     /** Content inside the Popper */
diff --git a/components/radio/src/radio.js b/components/radio/src/radio.js
index 67e0f11a9a..64984068ea 100644
--- a/components/radio/src/radio.js
+++ b/components/radio/src/radio.js
@@ -163,10 +163,6 @@ class Radio extends Component {
     }
 }
 
-Radio.defaultProps = {
-    dataTest: 'dhis2-uicore-radio',
-}
-
 Radio.propTypes = {
     checked: PropTypes.bool,
     className: PropTypes.string,
diff --git a/components/select/src/multi-select-field/multi-select-field.js b/components/select/src/multi-select-field/multi-select-field.js
index c3a6ef3301..acabd4cbc8 100644
--- a/components/select/src/multi-select-field/multi-select-field.js
+++ b/components/select/src/multi-select-field/multi-select-field.js
@@ -100,17 +100,6 @@ class MultiSelectField extends React.Component {
     }
 }
 
-MultiSelectField.defaultProps = {
-    selected: [],
-    dataTest: 'dhis2-uiwidgets-multiselectfield',
-
-    clearText: () => i18n.t('Clear'),
-    empty: () => i18n.t('No data found'),
-    filterPlaceholder: () => i18n.t('Type to filter options'),
-    loadingText: () => i18n.t('Loading options'),
-    noMatchText: () => i18n.t('No options found'),
-}
-
 MultiSelectField.propTypes = {
     /** Should be `MultiSelectOption` components */
     children: PropTypes.node,
diff --git a/components/select/src/multi-select-option/multi-select-option.js b/components/select/src/multi-select-option/multi-select-option.js
index bbec175a66..f724b9e2a7 100644
--- a/components/select/src/multi-select-option/multi-select-option.js
+++ b/components/select/src/multi-select-option/multi-select-option.js
@@ -16,7 +16,7 @@ const MultiSelectOption = ({
     disabled,
     onClick,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-multiselectoption',
     value,
 }) => (
     <div
@@ -49,10 +49,6 @@ const MultiSelectOption = ({
     </div>
 )
 
-MultiSelectOption.defaultProps = {
-    dataTest: 'dhis2-uicore-multiselectoption',
-}
-
 MultiSelectOption.propTypes = {
     label: PropTypes.string.isRequired,
     value: PropTypes.string.isRequired,
diff --git a/components/select/src/multi-select/input.js b/components/select/src/multi-select/input.js
index d43d5e1aec..7d1125a66d 100644
--- a/components/select/src/multi-select/input.js
+++ b/components/select/src/multi-select/input.js
@@ -21,7 +21,7 @@ const Input = ({
     options,
     className,
     disabled,
-    inputMaxHeight,
+    inputMaxHeight = '100px',
 }) => {
     const hasSelection = selected.length > 0
     const onClear = (e) => {
@@ -92,10 +92,6 @@ const Input = ({
     )
 }
 
-Input.defaultProps = {
-    inputMaxHeight: '100px',
-}
-
 Input.propTypes = {
     dataTest: PropTypes.string.isRequired,
     className: PropTypes.string,
diff --git a/components/select/src/multi-select/menu.js b/components/select/src/multi-select/menu.js
index 6b775dd5db..291cbcf4ed 100644
--- a/components/select/src/multi-select/menu.js
+++ b/components/select/src/multi-select/menu.js
@@ -33,7 +33,7 @@ const createHandler =
         return onChange(data, e)
     }
 
-const Menu = ({ options, onChange, selected, empty, dataTest }) => {
+const Menu = ({ options, onChange, selected, empty = '', dataTest }) => {
     const renderedOptions = filterIgnored(options)
 
     if (React.Children.count(renderedOptions) === 0) {
@@ -80,10 +80,6 @@ const Menu = ({ options, onChange, selected, empty, dataTest }) => {
     return <React.Fragment>{children}</React.Fragment>
 }
 
-Menu.defaultProps = {
-    empty: '',
-}
-
 Menu.propTypes = {
     dataTest: PropTypes.string.isRequired,
     empty: PropTypes.node,
diff --git a/components/select/src/multi-select/multi-select.js b/components/select/src/multi-select/multi-select.js
index cbac23fcf7..231291abaf 100644
--- a/components/select/src/multi-select/multi-select.js
+++ b/components/select/src/multi-select/multi-select.js
@@ -10,7 +10,7 @@ import { Menu } from './menu.js'
 
 const MultiSelect = ({
     className,
-    selected,
+    selected = [],
     tabIndex,
     maxHeight,
     inputMaxHeight,
@@ -35,7 +35,7 @@ const MultiSelect = ({
     noMatchText,
     initialFocus,
     dense,
-    dataTest,
+    dataTest = 'dhis2-uicore-multiselect',
 }) => {
     // If the select is filterable, use a filterable menu
     const menu = filterable ? (
@@ -105,11 +105,6 @@ const MultiSelect = ({
     )
 }
 
-MultiSelect.defaultProps = {
-    selected: [],
-    dataTest: 'dhis2-uicore-multiselect',
-}
-
 MultiSelect.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/select/src/select/input-wrapper.js b/components/select/src/select/input-wrapper.js
index a891659cc7..759c88d4eb 100644
--- a/components/select/src/select/input-wrapper.js
+++ b/components/select/src/select/input-wrapper.js
@@ -8,7 +8,7 @@ const InputWrapper = ({
     dataTest,
     onToggle,
     children,
-    tabIndex,
+    tabIndex = '0',
     error,
     warning,
     valid,
@@ -97,10 +97,6 @@ const InputWrapper = ({
     )
 }
 
-InputWrapper.defaultProps = {
-    tabIndex: '0',
-}
-
 InputWrapper.propTypes = {
     dataTest: PropTypes.string.isRequired,
     inputRef: PropTypes.object.isRequired,
diff --git a/components/select/src/select/menu-wrapper.js b/components/select/src/select/menu-wrapper.js
index accd027c17..30762c4c67 100644
--- a/components/select/src/select/menu-wrapper.js
+++ b/components/select/src/select/menu-wrapper.js
@@ -7,7 +7,7 @@ import React from 'react'
 const MenuWrapper = ({
     children,
     dataTest,
-    maxHeight,
+    maxHeight = '280px',
     menuWidth,
     onClick,
     selectRef,
@@ -40,10 +40,6 @@ const MenuWrapper = ({
     )
 }
 
-MenuWrapper.defaultProps = {
-    maxHeight: '280px',
-}
-
 MenuWrapper.propTypes = {
     dataTest: PropTypes.string.isRequired,
     menuWidth: PropTypes.string.isRequired,
diff --git a/components/select/src/select/select.js b/components/select/src/select/select.js
index d1d80de126..07d5a4e5fa 100644
--- a/components/select/src/select/select.js
+++ b/components/select/src/select/select.js
@@ -217,10 +217,6 @@ export class Select extends Component {
     }
 }
 
-Select.defaultProps = {
-    dataTest: 'dhis2-uicore-select',
-}
-
 Select.propTypes = {
     input: PropTypes.element.isRequired,
     menu: PropTypes.element.isRequired,
diff --git a/components/select/src/single-select-field/single-select-field.js b/components/select/src/single-select-field/single-select-field.js
index 662fd076fc..b9e3de1803 100644
--- a/components/select/src/single-select-field/single-select-field.js
+++ b/components/select/src/single-select-field/single-select-field.js
@@ -99,17 +99,6 @@ class SingleSelectField extends React.Component {
     }
 }
 
-SingleSelectField.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-singleselectfield',
-    selected: '',
-
-    clearText: () => i18n.t('Clear'),
-    empty: () => i18n.t('No data found'),
-    filterPlaceholder: () => i18n.t('Type to filter options'),
-    loadingText: () => i18n.t('Loading options'),
-    noMatchText: () => i18n.t('No options found'),
-}
-
 SingleSelectField.propTypes = {
     /** Should be `SingleSelectOption` components */
     children: PropTypes.node,
diff --git a/components/select/src/single-select-option/single-select-option.js b/components/select/src/single-select-option/single-select-option.js
index 91370fe9d4..3614f2b64f 100644
--- a/components/select/src/single-select-option/single-select-option.js
+++ b/components/select/src/single-select-option/single-select-option.js
@@ -9,7 +9,7 @@ const SingleSelectOption = ({
     disabled,
     onClick,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-singleselectoption',
     value,
 }) => (
     <div
@@ -58,10 +58,6 @@ const SingleSelectOption = ({
     </div>
 )
 
-SingleSelectOption.defaultProps = {
-    dataTest: 'dhis2-uicore-singleselectoption',
-}
-
 SingleSelectOption.propTypes = {
     label: PropTypes.string.isRequired,
     value: PropTypes.string.isRequired,
diff --git a/components/select/src/single-select/input.js b/components/select/src/single-select/input.js
index 4d2b4f4a1b..80c119f842 100644
--- a/components/select/src/single-select/input.js
+++ b/components/select/src/single-select/input.js
@@ -21,7 +21,7 @@ const Input = ({
     options,
     className,
     disabled,
-    inputMaxHeight,
+    inputMaxHeight = '100px',
 }) => {
     const hasSelection = selected && typeof selected === 'string'
     const onClear = (e) => {
@@ -84,10 +84,6 @@ const Input = ({
     )
 }
 
-Input.defaultProps = {
-    inputMaxHeight: '100px',
-}
-
 Input.propTypes = {
     dataTest: PropTypes.string.isRequired,
     className: PropTypes.string,
diff --git a/components/select/src/single-select/menu.js b/components/select/src/single-select/menu.js
index 2447246654..35e549702d 100644
--- a/components/select/src/single-select/menu.js
+++ b/components/select/src/single-select/menu.js
@@ -11,7 +11,7 @@ const Menu = ({
     options,
     onChange,
     selected,
-    empty,
+    empty = '',
     handleFocusInput,
     handleClose,
     dataTest,
@@ -62,10 +62,6 @@ const Menu = ({
     return <React.Fragment>{children}</React.Fragment>
 }
 
-Menu.defaultProps = {
-    empty: '',
-}
-
 Menu.propTypes = {
     dataTest: PropTypes.string.isRequired,
     empty: PropTypes.node,
diff --git a/components/select/src/single-select/single-select.js b/components/select/src/single-select/single-select.js
index 8ce8f279aa..9f190e1ac7 100644
--- a/components/select/src/single-select/single-select.js
+++ b/components/select/src/single-select/single-select.js
@@ -10,7 +10,7 @@ import { Menu } from './menu.js'
 
 const SingleSelect = ({
     className,
-    selected,
+    selected = '',
     tabIndex,
     maxHeight,
     inputMaxHeight,
@@ -35,7 +35,7 @@ const SingleSelect = ({
     noMatchText,
     initialFocus,
     dense,
-    dataTest,
+    dataTest = 'dhis2-uicore-singleselect',
 }) => {
     // If the select is filterable, use a filterable menu
     const menu = filterable ? (
@@ -105,11 +105,6 @@ const SingleSelect = ({
     )
 }
 
-SingleSelect.defaultProps = {
-    selected: '',
-    dataTest: 'dhis2-uicore-singleselect',
-}
-
 SingleSelect.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/selector-bar/src/selector-bar-item/selector-bar-item.js b/components/selector-bar/src/selector-bar-item/selector-bar-item.js
index 2e4cb91fe1..5f68f3e75d 100644
--- a/components/selector-bar/src/selector-bar-item/selector-bar-item.js
+++ b/components/selector-bar/src/selector-bar-item/selector-bar-item.js
@@ -27,7 +27,7 @@ const offsetModifier = {
 export const SelectorBarItem = ({
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-ui-selectorbaritem',
     disabled,
     displayOnly,
     label,
@@ -166,10 +166,6 @@ export const SelectorBarItem = ({
     )
 }
 
-SelectorBarItem.defaultProps = {
-    dataTest: 'dhis2-ui-selectorbaritem',
-}
-
 SelectorBarItem.propTypes = {
     label: PropTypes.string.isRequired,
     children: PropTypes.any,
diff --git a/components/selector-bar/src/selector-bar/selector-bar.js b/components/selector-bar/src/selector-bar/selector-bar.js
index 495dafc0a2..61ba0c46e7 100644
--- a/components/selector-bar/src/selector-bar/selector-bar.js
+++ b/components/selector-bar/src/selector-bar/selector-bar.js
@@ -33,7 +33,7 @@ export const SelectorBar = ({
     className,
     children,
     onClearSelectionClick,
-    dataTest,
+    dataTest = 'dhis2-ui-selectorbar',
     disableClearSelections,
     additionalContent,
     ariaLabel,
@@ -160,10 +160,6 @@ export const SelectorBar = ({
     )
 }
 
-SelectorBar.defaultProps = {
-    dataTest: 'dhis2-ui-selectorbar',
-}
-
 SelectorBar.propTypes = {
     children: PropTypes.any.isRequired,
     additionalContent: PropTypes.any,
diff --git a/components/sharing-dialog/src/autocomplete/autocomplete.js b/components/sharing-dialog/src/autocomplete/autocomplete.js
index 265385df29..f16a5a329f 100644
--- a/components/sharing-dialog/src/autocomplete/autocomplete.js
+++ b/components/sharing-dialog/src/autocomplete/autocomplete.js
@@ -8,7 +8,7 @@ import i18n from '../locales/index.js'
 import { MenuPopup } from './menu-popup.js'
 
 export const Autocomplete = ({
-    dataTest,
+    dataTest = 'dhis2-sharingdialog-autocomplete',
     inputWidth,
     label,
     loading,
@@ -60,10 +60,6 @@ export const Autocomplete = ({
     )
 }
 
-Autocomplete.defaultProps = {
-    dataTest: 'dhis2-sharingdialog-autocomplete',
-}
-
 Autocomplete.propTypes = {
     searchResults: PropTypes.arrayOf(
         PropTypes.shape({
diff --git a/components/sharing-dialog/src/autocomplete/menu-popup.js b/components/sharing-dialog/src/autocomplete/menu-popup.js
index a0aea6717c..afba09f4ef 100644
--- a/components/sharing-dialog/src/autocomplete/menu-popup.js
+++ b/components/sharing-dialog/src/autocomplete/menu-popup.js
@@ -7,7 +7,7 @@ import React from 'react'
 export const MenuPopup = ({
     children,
     dataTest,
-    maxHeight,
+    maxHeight = '280px',
     menuWidth,
     onClick,
     menuRef,
@@ -33,10 +33,6 @@ export const MenuPopup = ({
     )
 }
 
-MenuPopup.defaultProps = {
-    maxHeight: '280px',
-}
-
 MenuPopup.propTypes = {
     dataTest: PropTypes.string.isRequired,
     menuRef: PropTypes.object.isRequired,
diff --git a/components/sharing-dialog/src/modal/modal.js b/components/sharing-dialog/src/modal/modal.js
index ff2cdbc49c..0ade1762e2 100644
--- a/components/sharing-dialog/src/modal/modal.js
+++ b/components/sharing-dialog/src/modal/modal.js
@@ -9,7 +9,12 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../locales/index.js'
 
-export const Modal = ({ onClose, name, children, dataTest }) => {
+export const Modal = ({
+    onClose,
+    name,
+    children,
+    dataTest = 'dhis2-uicore-sharingdialog-modal',
+}) => {
     const title = name
         ? i18n.t('Sharing and access: {{- objectName}}', {
               objectName: name,
@@ -32,10 +37,6 @@ export const Modal = ({ onClose, name, children, dataTest }) => {
     )
 }
 
-Modal.defaultProps = {
-    dataTest: 'dhis2-uicore-sharingdialog-modal',
-}
-
 Modal.propTypes = {
     children: PropTypes.node.isRequired,
     dataTest: PropTypes.string,
diff --git a/components/sharing-dialog/src/sharing-dialog.js b/components/sharing-dialog/src/sharing-dialog.js
index 0abb8a7ef0..dd98fb6f59 100644
--- a/components/sharing-dialog/src/sharing-dialog.js
+++ b/components/sharing-dialog/src/sharing-dialog.js
@@ -41,11 +41,17 @@ const mutation = {
 export const SharingDialog = ({
     id,
     type,
-    onClose,
-    onError,
-    onSave,
-    initialSharingSettings,
-    dataTest,
+    onClose = () => {},
+    onError = () => {},
+    onSave = () => {},
+    initialSharingSettings = {
+        name: '',
+        allowPublic: true,
+        public: ACCESS_NONE,
+        groups: {},
+        users: {},
+    },
+    dataTest = 'dhis2-uicore-sharingdialog',
 }) => {
     const { show: showError } = useAlert((error) => error, { critical: true })
 
@@ -178,20 +184,6 @@ export const SharingDialog = ({
     )
 }
 
-SharingDialog.defaultProps = {
-    initialSharingSettings: {
-        name: '',
-        allowPublic: true,
-        public: ACCESS_NONE,
-        groups: {},
-        users: {},
-    },
-    onClose: () => {},
-    onError: () => {},
-    onSave: () => {},
-    dataTest: 'dhis2-uicore-sharingdialog',
-}
-
 SharingDialog.propTypes = {
     /** The id of the object to share */
     id: PropTypes.string.isRequired,
diff --git a/components/switch/src/switch-field/switch-field.js b/components/switch/src/switch-field/switch-field.js
index e388b1b6e5..0ff72d8d7e 100644
--- a/components/switch/src/switch-field/switch-field.js
+++ b/components/switch/src/switch-field/switch-field.js
@@ -5,7 +5,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Switch } from '../switch/index.js'
 
-const AddRequired = ({ label, required, dataTest }) => (
+const AddRequired = ({
+    label,
+    required,
+    dataTest = 'dhis2-uiwidgets-switchfield',
+}) => (
     <React.Fragment>
         {label}
         {required && <Required dataTest={`${dataTest}-required`} />}
@@ -37,7 +41,7 @@ const SwitchField = ({
     required,
     helpText,
     validationText,
-    dataTest,
+    dataTest = 'dhis2-uiwidgets-switchfield',
 }) => (
     <Field
         className={className}
@@ -77,10 +81,6 @@ const SwitchField = ({
     </Field>
 )
 
-SwitchField.defaultProps = {
-    dataTest: 'dhis2-uiwidgets-switchfield',
-}
-
 SwitchField.propTypes = {
     checked: PropTypes.bool,
     className: PropTypes.string,
diff --git a/components/switch/src/switch/switch.js b/components/switch/src/switch/switch.js
index a53cf7cc35..df74495ac0 100644
--- a/components/switch/src/switch/switch.js
+++ b/components/switch/src/switch/switch.js
@@ -164,12 +164,6 @@ class Switch extends Component {
     }
 }
 
-Switch.defaultProps = {
-    checked: false,
-    dataTest: 'dhis2-uicore-switch',
-    role: 'switch',
-}
-
 Switch.propTypes = {
     /** Sets an aria-label attribute on the input */
     'aria-label': PropTypes.string,
diff --git a/components/tab/src/tab-bar/tab-bar.js b/components/tab/src/tab-bar/tab-bar.js
index fa958a31be..3ef72d519c 100644
--- a/components/tab/src/tab-bar/tab-bar.js
+++ b/components/tab/src/tab-bar/tab-bar.js
@@ -3,7 +3,13 @@ import React from 'react'
 import { ScrollBar } from './scroll-bar.js'
 import { Tabs } from './tabs.js'
 
-const TabBar = ({ fixed, children, className, scrollable, dataTest }) => {
+const TabBar = ({
+    fixed,
+    children,
+    className,
+    scrollable,
+    dataTest = 'dhis2-uicore-tabbar',
+}) => {
     if (scrollable) {
         return (
             <div className={className} data-test={dataTest}>
@@ -25,10 +31,6 @@ const TabBar = ({ fixed, children, className, scrollable, dataTest }) => {
     )
 }
 
-TabBar.defaultProps = {
-    dataTest: 'dhis2-uicore-tabbar',
-}
-
 TabBar.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/tab/src/tab/tab.js b/components/tab/src/tab/tab.js
index 5f8da77203..f005d508fe 100644
--- a/components/tab/src/tab/tab.js
+++ b/components/tab/src/tab/tab.js
@@ -161,10 +161,6 @@ export const Tab = React.forwardRef(
     }
 )
 
-Tab.defaultProps = {
-    dataTest: 'dhis2-uicore-tab',
-}
-
 Tab.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/table/src/data-table/data-table-cell.js b/components/table/src/data-table/data-table-cell.js
index e183dd8f51..fae1dff4cf 100644
--- a/components/table/src/data-table/data-table-cell.js
+++ b/components/table/src/data-table/data-table-cell.js
@@ -67,13 +67,6 @@ export const DataTableCell = forwardRef(
 
 DataTableCell.displayName = 'DataTableCell'
 
-DataTableCell.defaultProps = {
-    align: 'left',
-    dataTest: 'dhis2-uicore-datatablecell',
-    left: 'auto',
-    width: 'auto',
-}
-
 const stylePropType = mutuallyExclusive(
     ['valid', 'error', 'muted'],
     PropTypes.bool
diff --git a/components/table/src/data-table/data-table-column-header/data-table-column-header.js b/components/table/src/data-table/data-table-column-header/data-table-column-header.js
index 4a943d9093..806864cba2 100644
--- a/components/table/src/data-table/data-table-column-header/data-table-column-header.js
+++ b/components/table/src/data-table/data-table-column-header/data-table-column-header.js
@@ -95,10 +95,6 @@ export const DataTableColumnHeader = forwardRef(
 
 DataTableColumnHeader.displayName = 'DataTableColumnHeader'
 
-DataTableColumnHeader.defaultProps = {
-    dataTest: 'dhis2-uicore-datatablecellhead',
-}
-
 DataTableColumnHeader.propTypes = {
     align: PropTypes.oneOf(['left', 'center', 'right']),
     children: PropTypes.node,
diff --git a/components/table/src/data-table/data-table-row/data-table-row.js b/components/table/src/data-table/data-table-row/data-table-row.js
index d29caa40a3..f91facf02c 100644
--- a/components/table/src/data-table/data-table-row/data-table-row.js
+++ b/components/table/src/data-table/data-table-row/data-table-row.js
@@ -78,10 +78,6 @@ export const DataTableRow = forwardRef(
 
 DataTableRow.displayName = 'DataTableRow'
 
-DataTableRow.defaultProps = {
-    dataTest: 'dhis2-uicore-datatablerow',
-}
-
 DataTableRow.propTypes = {
     /** Should be `<DataTableCell>` or `<DataTableCellHead>` components */
     children: PropTypes.node,
diff --git a/components/table/src/data-table/data-table.js b/components/table/src/data-table/data-table.js
index b35adea53e..3b688badd3 100644
--- a/components/table/src/data-table/data-table.js
+++ b/components/table/src/data-table/data-table.js
@@ -49,12 +49,6 @@ export const DataTable = forwardRef(
 
 DataTable.displayName = 'DataTable'
 
-DataTable.defaultProps = {
-    dataTest: 'dhis2-uicore-datatable',
-    width: '100%',
-    layout: 'auto',
-}
-
 DataTable.propTypes = {
     /**
      * Should be `<DataTableHead>`, `<DataTableBody>`, and `<DataTableFoot>` components
diff --git a/components/table/src/data-table/table-elements/table-body.js b/components/table/src/data-table/table-elements/table-body.js
index b170b871f7..be6917550a 100644
--- a/components/table/src/data-table/table-elements/table-body.js
+++ b/components/table/src/data-table/table-elements/table-body.js
@@ -55,10 +55,6 @@ export const TableBody = forwardRef(
 )
 TableBody.displayName = 'TableBody'
 
-TableBody.defaultProps = {
-    dataTest: 'dhis2-uicore-tablebody',
-}
-
 TableBody.propTypes = {
     /** Should be `<TableRow>` components */
     children: PropTypes.node,
diff --git a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js
index f5e861b4e2..e97b7eefeb 100644
--- a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js
+++ b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js
@@ -90,13 +90,6 @@ export const TableDataCell = forwardRef(
 
 TableDataCell.displayName = 'TableDataCell'
 
-TableDataCell.defaultProps = {
-    align: 'left',
-    dataTest: 'dhis2-uicore-tabledatacel',
-    left: 'auto',
-    width: 'auto',
-}
-
 const stylePropType = mutuallyExclusive(
     ['valid', 'error', 'muted'],
     PropTypes.bool
diff --git a/components/table/src/data-table/table-elements/table-foot.js b/components/table/src/data-table/table-elements/table-foot.js
index 61212028c8..e121822955 100644
--- a/components/table/src/data-table/table-elements/table-foot.js
+++ b/components/table/src/data-table/table-elements/table-foot.js
@@ -17,10 +17,6 @@ export const TableFoot = forwardRef(
 
 TableFoot.displayName = 'TableFoot'
 
-TableFoot.defaultProps = {
-    dataTest: 'dhis2-uicore-tablefoot',
-}
-
 TableFoot.propTypes = {
     /** Should be `<TableRow>` components */
     children: PropTypes.node,
diff --git a/components/table/src/data-table/table-elements/table-head.js b/components/table/src/data-table/table-elements/table-head.js
index f8ef0545e3..f863db72c7 100644
--- a/components/table/src/data-table/table-elements/table-head.js
+++ b/components/table/src/data-table/table-elements/table-head.js
@@ -17,10 +17,6 @@ export const TableHead = forwardRef(
 
 TableHead.displayName = 'TableHead'
 
-TableHead.defaultProps = {
-    dataTest: 'dhis2-uicore-tablehead',
-}
-
 TableHead.propTypes = {
     /** Should be `<TableRowHead>` components */
     children: PropTypes.node,
diff --git a/components/table/src/data-table/table-elements/table-header-cell-action.js b/components/table/src/data-table/table-elements/table-header-cell-action.js
index 286f8d6903..3f74c20dd5 100644
--- a/components/table/src/data-table/table-elements/table-header-cell-action.js
+++ b/components/table/src/data-table/table-elements/table-header-cell-action.js
@@ -43,10 +43,6 @@ export const TableHeaderCellAction = forwardRef(
 
 TableHeaderCellAction.displayName = 'TableHeaderCellAction'
 
-TableHeaderCellAction.defaultProps = {
-    dataTest: 'dhis2-uicore-tableheadercellaction',
-}
-
 TableHeaderCellAction.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js b/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js
index 2ad55320ba..97c0912c1f 100644
--- a/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js
+++ b/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js
@@ -83,14 +83,6 @@ export const TableHeaderCell = forwardRef(
 
 TableHeaderCell.displayName = 'TableHeaderCell'
 
-TableHeaderCell.defaultProps = {
-    align: 'left',
-    dataTest: 'dhis2-uicore-tablecell',
-    left: AUTO,
-    width: AUTO,
-    top: AUTO,
-}
-
 const stylePropType = mutuallyExclusive(
     ['valid', 'error', 'muted'],
     PropTypes.bool
diff --git a/components/table/src/data-table/table-elements/table-row.js b/components/table/src/data-table/table-elements/table-row.js
index 209bb4c819..52628f88ed 100644
--- a/components/table/src/data-table/table-elements/table-row.js
+++ b/components/table/src/data-table/table-elements/table-row.js
@@ -31,10 +31,6 @@ export const TableRow = forwardRef(
 
 TableRow.displayName = 'TableRow'
 
-TableRow.defaultProps = {
-    dataTest: 'dhis2-uicore-tablerow',
-}
-
 TableRow.propTypes = {
     /** Should be `<TableDataCell>` or `<TableDataCellHead>` components */
     children: PropTypes.node,
diff --git a/components/table/src/data-table/table-elements/table-scroll-box.js b/components/table/src/data-table/table-elements/table-scroll-box.js
index c954a72cde..33c5a41d38 100644
--- a/components/table/src/data-table/table-elements/table-scroll-box.js
+++ b/components/table/src/data-table/table-elements/table-scroll-box.js
@@ -22,12 +22,6 @@ export const TableScrollBox = forwardRef(
 
 TableScrollBox.displayName = 'TableScrollBox'
 
-TableScrollBox.defaultProps = {
-    dataTest: 'dhis2-uicore-tablescrollbox',
-    maxHeight: 'auto',
-    maxWidth: 'auto',
-}
-
 TableScrollBox.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/table/src/data-table/table-elements/table-toolbar.js b/components/table/src/data-table/table-elements/table-toolbar.js
index 18f70e5242..aa91666274 100644
--- a/components/table/src/data-table/table-elements/table-toolbar.js
+++ b/components/table/src/data-table/table-elements/table-toolbar.js
@@ -33,11 +33,6 @@ export const TableToolbar = forwardRef(
 
 TableToolbar.displayName = 'TableToolbar'
 
-TableToolbar.defaultProps = {
-    dataTest: 'dhis2-uicore-tabletoolbar',
-    position: 'top',
-}
-
 TableToolbar.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/table/src/data-table/table-elements/table.js b/components/table/src/data-table/table-elements/table.js
index e64e817855..dd522b84da 100644
--- a/components/table/src/data-table/table-elements/table.js
+++ b/components/table/src/data-table/table-elements/table.js
@@ -44,12 +44,6 @@ export const Table = forwardRef(
 
 Table.displayName = 'Table'
 
-Table.defaultProps = {
-    dataTest: 'dhis2-uicore-table',
-    width: '100%',
-    layout: 'auto',
-}
-
 Table.propTypes = {
     /**
      * Removes border from the table
diff --git a/components/table/src/stacked-table/stacked-table-body.js b/components/table/src/stacked-table/stacked-table-body.js
index 6b3d3cf417..247fae3900 100644
--- a/components/table/src/stacked-table/stacked-table-body.js
+++ b/components/table/src/stacked-table/stacked-table-body.js
@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const StackedTableBody = ({ children, className, dataTest }) => (
+export const StackedTableBody = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtablebody',
+}) => (
     <tbody className={className} data-tset={dataTest}>
         {children}
         <style jsx>{`
@@ -17,7 +21,3 @@ StackedTableBody.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
 }
-
-StackedTableBody.defaultProps = {
-    dataTest: 'dhis2-uicore-stackedtablebody',
-}
diff --git a/components/table/src/stacked-table/stacked-table-cell-head.js b/components/table/src/stacked-table/stacked-table-cell-head.js
index 1f1083d0bf..23527daa9d 100644
--- a/components/table/src/stacked-table/stacked-table-cell-head.js
+++ b/components/table/src/stacked-table/stacked-table-cell-head.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 export const StackedTableCellHead = ({
-    children,
+    children = '',
     className,
     colSpan,
-    dataTest,
+    dataTest = 'dhis2-uicore-stackedtablecellhead',
     rowSpan,
 }) => (
     <th
@@ -37,8 +37,3 @@ StackedTableCellHead.propTypes = {
     dataTest: PropTypes.string,
     rowSpan: PropTypes.string,
 }
-
-StackedTableCellHead.defaultProps = {
-    children: '',
-    dataTest: 'dhis2-uicore-stackedtablecellhead',
-}
diff --git a/components/table/src/stacked-table/stacked-table-cell.js b/components/table/src/stacked-table/stacked-table-cell.js
index c69df4dc94..21802982f1 100644
--- a/components/table/src/stacked-table/stacked-table-cell.js
+++ b/components/table/src/stacked-table/stacked-table-cell.js
@@ -8,8 +8,8 @@ export const StackedTableCell = ({
     className,
     colSpan,
     column,
-    dataTest,
-    headerLabels,
+    dataTest = 'dhis2-uicore-stackedtablecell',
+    headerLabels = [],
     hideTitle,
     rowSpan,
     title,
@@ -57,8 +57,3 @@ StackedTableCell.propTypes = {
     rowSpan: PropTypes.string,
     title: PropTypes.string,
 }
-
-StackedTableCell.defaultProps = {
-    dataTest: 'dhis2-uicore-stackedtablecell',
-    headerLabels: [],
-}
diff --git a/components/table/src/stacked-table/stacked-table-foot.js b/components/table/src/stacked-table/stacked-table-foot.js
index 08766dec96..0888037938 100644
--- a/components/table/src/stacked-table/stacked-table-foot.js
+++ b/components/table/src/stacked-table/stacked-table-foot.js
@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const StackedTableFoot = ({ children, className, dataTest }) => (
+export const StackedTableFoot = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtablefoot',
+}) => (
     <tfoot className={className} data-test={dataTest}>
         {children}
         <style jsx>{`
@@ -18,7 +22,3 @@ StackedTableFoot.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
 }
-
-StackedTableFoot.defaultProps = {
-    dataTest: 'dhis2-uicore-stackedtablefoot',
-}
diff --git a/components/table/src/stacked-table/stacked-table-head.js b/components/table/src/stacked-table/stacked-table-head.js
index 0cf5b20f4a..02a9759b14 100644
--- a/components/table/src/stacked-table/stacked-table-head.js
+++ b/components/table/src/stacked-table/stacked-table-head.js
@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const StackedTableHead = ({ children, className, dataTest }) => (
+export const StackedTableHead = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtablehead',
+}) => (
     <thead className={className} data-test={dataTest}>
         {children}
         <style jsx>{`
@@ -17,7 +21,3 @@ StackedTableHead.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
 }
-
-StackedTableHead.defaultProps = {
-    dataTest: 'dhis2-uicore-stackedtablehead',
-}
diff --git a/components/table/src/stacked-table/stacked-table-row-head.js b/components/table/src/stacked-table/stacked-table-row-head.js
index 61da88e20d..d93e11345b 100644
--- a/components/table/src/stacked-table/stacked-table-row-head.js
+++ b/components/table/src/stacked-table/stacked-table-row-head.js
@@ -2,7 +2,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { StackedTableRow } from './stacked-table-row.js'
 
-export const StackedTableRowHead = ({ children, className, dataTest }) => (
+export const StackedTableRowHead = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtablerowhead',
+}) => (
     <StackedTableRow className={className} dataTest={dataTest}>
         {children}
     </StackedTableRow>
@@ -13,7 +17,3 @@ StackedTableRowHead.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
 }
-
-StackedTableRowHead.defaultProps = {
-    dataTest: 'dhis2-uicore-stackedtablerowhead',
-}
diff --git a/components/table/src/stacked-table/stacked-table-row.js b/components/table/src/stacked-table/stacked-table-row.js
index 0c0c50e44b..965a405251 100644
--- a/components/table/src/stacked-table/stacked-table-row.js
+++ b/components/table/src/stacked-table/stacked-table-row.js
@@ -5,7 +5,11 @@ import { addColNumToChildren } from './add-col-num-to-children.js'
 import { supplyHeaderLabelsToChildren } from './supply-header-labels-to-children.js'
 import { Consumer } from './table-context.js'
 
-export const StackedTableRow = ({ children, className, dataTest }) => (
+export const StackedTableRow = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-stackedtablerow',
+}) => (
     <tr className={className} data-test={dataTest}>
         <Consumer>
             {({ headerLabels }) =>
@@ -44,7 +48,3 @@ StackedTableRow.propTypes = {
     className: PropTypes.string,
     dataTest: PropTypes.string,
 }
-
-StackedTableRow.defaultProps = {
-    dataTest: 'dhis2-uicore-stackedtablerow',
-}
diff --git a/components/table/src/stacked-table/stacked-table.js b/components/table/src/stacked-table/stacked-table.js
index fb6c889b1d..1b158264a5 100644
--- a/components/table/src/stacked-table/stacked-table.js
+++ b/components/table/src/stacked-table/stacked-table.js
@@ -7,7 +7,7 @@ import { Table } from './table.js'
 export const StackedTable = ({
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-stackedtable',
     headerLabels,
 }) => {
     const contextHeaderLabels = extractHeaderLabels(children)
@@ -31,7 +31,3 @@ StackedTable.propTypes = {
     /** Labels for columns. Use an empty string for a column without a header. */
     headerLabels: PropTypes.arrayOf(PropTypes.string),
 }
-
-StackedTable.defaultProps = {
-    dataTest: 'dhis2-uicore-stackedtable',
-}
diff --git a/components/table/src/table/table-body.js b/components/table/src/table/table-body.js
index 90c5b3b945..a0bc44ae63 100644
--- a/components/table/src/table/table-body.js
+++ b/components/table/src/table/table-body.js
@@ -1,16 +1,17 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const TableBody = ({ children, className, dataTest, role }) => (
+export const TableBody = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-tablebody',
+    role,
+}) => (
     <tbody className={className} data-test={dataTest} role={role}>
         {children}
     </tbody>
 )
 
-TableBody.defaultProps = {
-    dataTest: 'dhis2-uicore-tablebody',
-}
-
 TableBody.propTypes = {
     /** Should be `<TableRow>` components */
     children: PropTypes.node,
diff --git a/components/table/src/table/table-cell-head.js b/components/table/src/table/table-cell-head.js
index 3dd0986875..9b7032ccb0 100644
--- a/components/table/src/table/table-cell-head.js
+++ b/components/table/src/table/table-cell-head.js
@@ -29,7 +29,7 @@ export const TableCellHead = ({
     dense,
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-tablecellhead',
 }) => (
     <th
         colSpan={colSpan}
@@ -44,10 +44,6 @@ export const TableCellHead = ({
     </th>
 )
 
-TableCellHead.defaultProps = {
-    dataTest: 'dhis2-uicore-tablecellhead',
-}
-
 TableCellHead.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/table/src/table/table-cell.js b/components/table/src/table/table-cell.js
index 8de551e205..02750afe9b 100644
--- a/components/table/src/table/table-cell.js
+++ b/components/table/src/table/table-cell.js
@@ -29,7 +29,7 @@ export const TableCell = ({
     colSpan,
     rowSpan,
     dense,
-    dataTest,
+    dataTest = 'dhis2-uicore-tablecell',
 }) => (
     <td
         colSpan={colSpan}
@@ -44,10 +44,6 @@ export const TableCell = ({
     </td>
 )
 
-TableCell.defaultProps = {
-    dataTest: 'dhis2-uicore-tablecell',
-}
-
 TableCell.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
diff --git a/components/table/src/table/table-foot.js b/components/table/src/table/table-foot.js
index f3145b06f4..81be8c5c11 100644
--- a/components/table/src/table/table-foot.js
+++ b/components/table/src/table/table-foot.js
@@ -1,16 +1,17 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const TableFoot = ({ children, className, dataTest, role }) => (
+export const TableFoot = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-tablefoot',
+    role,
+}) => (
     <tfoot className={className} data-test={dataTest} role={role}>
         {children}
     </tfoot>
 )
 
-TableFoot.defaultProps = {
-    dataTest: 'dhis2-uicore-tablefoot',
-}
-
 TableFoot.propTypes = {
     /** Should be `<TableRow>` components */
     children: PropTypes.node,
diff --git a/components/table/src/table/table-head.js b/components/table/src/table/table-head.js
index 00cb14a467..f334566317 100644
--- a/components/table/src/table/table-head.js
+++ b/components/table/src/table/table-head.js
@@ -1,16 +1,17 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const TableHead = ({ children, className, dataTest, role }) => (
+export const TableHead = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-tablehead',
+    role,
+}) => (
     <thead className={className} data-test={dataTest} role={role}>
         {children}
     </thead>
 )
 
-TableHead.defaultProps = {
-    dataTest: 'dhis2-uicore-tablehead',
-}
-
 TableHead.propTypes = {
     /** Should be `<TableRowHead>` components */
     children: PropTypes.node,
diff --git a/components/table/src/table/table-row-head.js b/components/table/src/table/table-row-head.js
index d0d4eef733..b6c12893c4 100644
--- a/components/table/src/table/table-row-head.js
+++ b/components/table/src/table/table-row-head.js
@@ -6,7 +6,7 @@ export const TableRowHead = ({
     role,
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-tablerowhead',
     suppressZebraStriping,
 }) => (
     <TableRow
@@ -19,10 +19,6 @@ export const TableRowHead = ({
     </TableRow>
 )
 
-TableRowHead.defaultProps = {
-    dataTest: 'dhis2-uicore-tablerowhead',
-}
-
 TableRowHead.propTypes = {
     /** Should be `<TableCellHead>` components */
     children: PropTypes.node,
diff --git a/components/table/src/table/table-row.js b/components/table/src/table/table-row.js
index 3504beff7a..5a184bea2b 100644
--- a/components/table/src/table/table-row.js
+++ b/components/table/src/table/table-row.js
@@ -14,7 +14,7 @@ export const TableRow = ({
     role,
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-tablerow',
     suppressZebraStriping,
     ...rest
 }) => {
@@ -40,10 +40,6 @@ export const TableRow = ({
     )
 }
 
-TableRow.defaultProps = {
-    dataTest: 'dhis2-uicore-tablerow',
-}
-
 TableRow.propTypes = {
     /** Should be `<TableCell>` or `<TableCellHead>` components */
     children: PropTypes.node,
diff --git a/components/table/src/table/table.js b/components/table/src/table/table.js
index 2239be1be9..e667a05d36 100644
--- a/components/table/src/table/table.js
+++ b/components/table/src/table/table.js
@@ -18,7 +18,7 @@ export const Table = ({
     role,
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-table',
     suppressZebraStriping,
 }) => (
     <Provider value={{ suppressZebraStriping }}>
@@ -30,10 +30,6 @@ export const Table = ({
     </Provider>
 )
 
-Table.defaultProps = {
-    dataTest: 'dhis2-uicore-table',
-}
-
 Table.propTypes = {
     /** Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components */
     children: PropTypes.node,
diff --git a/components/tag/src/tag.js b/components/tag/src/tag.js
index 34bf4d8d43..8bc42ebc93 100644
--- a/components/tag/src/tag.js
+++ b/components/tag/src/tag.js
@@ -7,14 +7,14 @@ import { TagIcon } from './tag-icon.js'
 import { TagText } from './tag-text.js'
 
 export const Tag = ({
-    maxWidth,
+    maxWidth = '240px',
     neutral,
     negative,
     positive,
     icon,
     bold,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-tag',
     children,
 }) => (
     <div
@@ -94,11 +94,6 @@ const tagVariantPropType = mutuallyExclusive(
     PropTypes.bool
 )
 
-Tag.defaultProps = {
-    dataTest: 'dhis2-uicore-tag',
-    maxWidth: '240px',
-}
-
 Tag.propTypes = {
     /** Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused. */
     bold: PropTypes.bool,
diff --git a/components/text-area/src/text-area-field/text-area-field.js b/components/text-area/src/text-area-field/text-area-field.js
index 7e8b53e22f..2123f1c636 100644
--- a/components/text-area/src/text-area-field/text-area-field.js
+++ b/components/text-area/src/text-area-field/text-area-field.js
@@ -28,10 +28,10 @@ const TextAreaField = ({
     validationText,
     autoGrow,
     readOnly,
-    resize,
-    rows,
+    resize = 'vertical',
+    rows = 4,
     inputWidth,
-    dataTest,
+    dataTest = 'dhis2-uiwidgets-textareafield',
 }) => (
     <Field
         className={className}
@@ -72,12 +72,6 @@ const TextAreaField = ({
     </Field>
 )
 
-TextAreaField.defaultProps = {
-    rows: 4,
-    resize: 'vertical',
-    dataTest: 'dhis2-uiwidgets-textareafield',
-}
-
 TextAreaField.propTypes = {
     /** Grow the text area in response to overflow instead of adding a scroll bar */
     autoGrow: PropTypes.bool,
diff --git a/components/text-area/src/text-area/text-area.js b/components/text-area/src/text-area/text-area.js
index 71dc11aeb6..31ff337ac9 100644
--- a/components/text-area/src/text-area/text-area.js
+++ b/components/text-area/src/text-area/text-area.js
@@ -173,13 +173,6 @@ export class TextArea extends Component {
     }
 }
 
-TextArea.defaultProps = {
-    rows: 4,
-    width: '100%',
-    resize: 'vertical',
-    dataTest: 'dhis2-uicore-textarea',
-}
-
 TextArea.propTypes = {
     /** Grow the text area in response to overflow instead of adding a scroll bar */
     autoGrow: PropTypes.bool,
diff --git a/components/tooltip/src/tooltip.js b/components/tooltip/src/tooltip.js
index 96998bd7e3..a3bf07009a 100644
--- a/components/tooltip/src/tooltip.js
+++ b/components/tooltip/src/tooltip.js
@@ -36,12 +36,12 @@ const flipModifier = {
 const Tooltip = ({
     children,
     className,
-    closeDelay,
+    closeDelay = 200,
     content,
-    dataTest,
-    maxWidth,
-    openDelay,
-    placement,
+    dataTest = 'dhis2-uicore-tooltip',
+    maxWidth = 300,
+    openDelay = 200,
+    placement = 'top',
 }) => {
     const [open, setOpen] = useState(false)
     const popperReference = useRef()
@@ -161,14 +161,6 @@ const Tooltip = ({
     )
 }
 
-Tooltip.defaultProps = {
-    closeDelay: 200,
-    dataTest: 'dhis2-uicore-tooltip',
-    maxWidth: 300,
-    openDelay: 200,
-    placement: 'top',
-}
-
 Tooltip.propTypes = {
     /** If child is a function, it's called with `{ onMouseOver, onMouseOut, ref }` args to apply to a reference element. If child is a node, it is wrapped in a `span` with the appropriate attributes and handlers. */
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
diff --git a/components/transfer/src/options-container.js b/components/transfer/src/options-container.js
index 02bd539bc5..26690b1527 100644
--- a/components/transfer/src/options-container.js
+++ b/components/transfer/src/options-container.js
@@ -14,7 +14,7 @@ export const OptionsContainer = ({
     loading,
     renderOption,
     options,
-    selected,
+    selected = false,
     selectionHandler,
     toggleHighlightedOption,
 }) => {
@@ -104,10 +104,6 @@ export const OptionsContainer = ({
     )
 }
 
-OptionsContainer.defaultProps = {
-    selected: false,
-}
-
 OptionsContainer.propTypes = {
     dataTest: PropTypes.string.isRequired,
     getOptionClickHandlers: PropTypes.func.isRequired,
diff --git a/components/transfer/src/transfer-option.js b/components/transfer/src/transfer-option.js
index 51ed74424d..58a16c5a94 100644
--- a/components/transfer/src/transfer-option.js
+++ b/components/transfer/src/transfer-option.js
@@ -8,7 +8,7 @@ const DOUBLE_CLICK_MAX_DELAY = 500
 export const TransferOption = ({
     className,
     disabled,
-    dataTest,
+    dataTest = 'dhis2-uicore-transferoption',
     highlighted,
     onClick,
     onDoubleClick,
@@ -71,10 +71,6 @@ export const TransferOption = ({
     )
 }
 
-TransferOption.defaultProps = {
-    dataTest: 'dhis2-uicore-transferoption',
-}
-
 TransferOption.propTypes = {
     label: PropTypes.node.isRequired,
     value: PropTypes.string.isRequired,
diff --git a/components/transfer/src/transfer.js b/components/transfer/src/transfer.js
index 910135ae65..1d6b66fa1a 100644
--- a/components/transfer/src/transfer.js
+++ b/components/transfer/src/transfer.js
@@ -41,38 +41,38 @@ export const Transfer = ({
     addAllText,
     addIndividualText,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-transfer',
     disabled,
     enableOrderChange,
-    filterCallback,
-    filterCallbackPicked,
+    filterCallback = defaultFilterCallback,
+    filterCallbackPicked = defaultFilterCallback,
     filterLabel,
     filterLabelPicked,
     filterPlaceholder,
     filterPlaceholderPicked,
     filterable,
     filterablePicked,
-    height,
+    height = '240px',
     hideFilterInput,
     hideFilterInputPicked,
-    initialSearchTerm,
-    initialSearchTermPicked,
+    initialSearchTerm = '',
+    initialSearchTermPicked = '',
     leftFooter,
     leftHeader,
     loadingPicked,
     loading,
-    maxSelections,
-    optionsWidth,
+    maxSelections = Infinity,
+    optionsWidth = '320px',
     removeAllText,
     removeIndividualText,
-    renderOption,
+    renderOption = defaultRenderOption,
     rightFooter,
     rightHeader,
     searchTerm,
     searchTermPicked,
-    selected,
+    selected = [],
     selectedEmptyComponent,
-    selectedWidth,
+    selectedWidth = '320px',
     sourceEmptyPlaceholder,
     onFilterChange,
     onFilterChangePicked,
@@ -377,20 +377,6 @@ export const Transfer = ({
 
 const defaultRenderOption = (option) => <TransferOption {...option} />
 
-Transfer.defaultProps = {
-    dataTest: 'dhis2-uicore-transfer',
-    height: '240px',
-    initialSearchTerm: '',
-    initialSearchTermPicked: '',
-    maxSelections: Infinity,
-    optionsWidth: '320px',
-    renderOption: defaultRenderOption,
-    selected: [],
-    selectedWidth: '320px',
-    filterCallback: defaultFilterCallback,
-    filterCallbackPicked: defaultFilterCallback,
-}
-
 Transfer.propTypes = {
     options: PropTypes.arrayOf(
         PropTypes.shape({
diff --git a/components/transfer/src/transfer.prod.stories.js b/components/transfer/src/transfer.prod.stories.js
index cb9bb5e42a..4b546f01d1 100644
--- a/components/transfer/src/transfer.prod.stories.js
+++ b/components/transfer/src/transfer.prod.stories.js
@@ -155,13 +155,12 @@ export default {
     },
 }
 
-const StatefulTemplate = ({ initiallySelected, ...args }) => {
+const StatefulTemplate = ({ initiallySelected = [], ...args }) => {
     const [selected, setSelected] = useState(initiallySelected)
     const onChange = (payload) => setSelected(payload.selected)
 
     return <Transfer {...args} selected={selected} onChange={onChange} />
 }
-StatefulTemplate.defaultProps = { initiallySelected: [] }
 StatefulTemplate.propTypes = { initiallySelected: PropTypes.array }
 
 export const SingleSelection = StatefulTemplate.bind({})
@@ -243,15 +242,15 @@ const RenderOptionCode = () => (
     </>
 )
 
-const StatefulTemplateCustomRenderOption = ({ initiallySelected, ...args }) => {
+const StatefulTemplateCustomRenderOption = ({
+    initiallySelected = [],
+    ...args
+}) => {
     const [selected, setSelected] = useState(initiallySelected)
     const onChange = (payload) => setSelected(payload.selected)
 
     return <Transfer {...args} selected={selected} onChange={onChange} />
 }
-StatefulTemplateCustomRenderOption.defaultProps = {
-    initiallySelected: [],
-}
 StatefulTemplateCustomRenderOption.propTypes = {
     initiallySelected: PropTypes.array,
 }
diff --git a/components/user-avatar/src/text-avatar.js b/components/user-avatar/src/text-avatar.js
index 76ca9fb7e1..d46e5925df 100644
--- a/components/user-avatar/src/text-avatar.js
+++ b/components/user-avatar/src/text-avatar.js
@@ -17,7 +17,7 @@ export const getInitials = (name) => {
 
 export const TextAvatar = ({
     name,
-    dataTest,
+    dataTest = 'dhis2-uicore-textavatar',
     extralarge,
     extrasmall,
     large,
@@ -82,10 +82,6 @@ export const TextAvatar = ({
     </div>
 )
 
-TextAvatar.defaultProps = {
-    dataTest: 'dhis2-uicore-textavatar',
-}
-
 TextAvatar.propTypes = {
     name: PropTypes.string.isRequired,
     dataTest: PropTypes.string,
diff --git a/components/user-avatar/src/user-avatar.js b/components/user-avatar/src/user-avatar.js
index 9c520e4a7f..1421b6ce87 100644
--- a/components/user-avatar/src/user-avatar.js
+++ b/components/user-avatar/src/user-avatar.js
@@ -21,7 +21,7 @@ const UserAvatar = ({
     name,
     avatarId,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-useravatar',
     extralarge,
     extrasmall,
     large,
@@ -84,10 +84,6 @@ const UserAvatar = ({
     </div>
 )
 
-UserAvatar.defaultProps = {
-    dataTest: 'dhis2-uicore-useravatar',
-}
-
 UserAvatar.propTypes = {
     // Name could stop being required if we implement an
     // SVG fallback with a `IconUser24`.

From 543791131187d7f5575b0517a9c31d59a7c21398 Mon Sep 17 00:00:00 2001
From: Mozafar Haider <mozafar@dhis2.org>
Date: Sat, 14 Sep 2024 17:23:23 +0100
Subject: [PATCH 2/7] refactor(react-18): replace remaining defaultProps
 manually

---
 .../calendar/src/stories/calendar-story-wrapper.js     |  1 -
 .../file-input-field-with-list.js                      |  1 -
 .../file-input-field-with-list.prod.stories.js         |  6 +++++-
 .../file-input-field/file-input-field.prod.stories.js  |  4 +++-
 components/layer/src/layer.prod.stories.js             |  6 +++++-
 .../pagination/src/__tests__/page-summary.test.js      |  4 ++--
 components/popover/src/popover.prod.stories.js         |  8 +++++++-
 .../src/multi-select-field/multi-select-field.js       |  1 -
 .../multi-select-field.prod.stories.js                 |  8 +++++++-
 .../src/single-select-field/single-select-field.js     |  1 -
 .../single-select-field.prod.stories.js                | 10 +++++++++-
 components/transfer/src/transfer.prod.stories.js       |  9 ++++++++-
 docs/src/components/DemoComponent.jsx                  |  7 +------
 13 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/components/calendar/src/stories/calendar-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js
index 89724da63a..e1f8d362b9 100644
--- a/components/calendar/src/stories/calendar-story-wrapper.js
+++ b/components/calendar/src/stories/calendar-story-wrapper.js
@@ -1,7 +1,6 @@
 import { constants } from '@dhis2/multi-calendar-dates'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { Calendar } from '../calendar/calendar.js'
 
 const { calendars, numberingSystems } = constants
 export const CalendarStoryWrapper = (props) => {
diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
index c63eae61e1..c43c564fc1 100644
--- a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
+++ b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
@@ -2,7 +2,6 @@ import { sharedPropTypes } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { FileInputField } from '../file-input-field/index.js'
-import i18n from '../locales/index.js'
 import { FileListItemWithRemove } from './file-list-item-with-remove.js'
 
 // TODO: i18n
diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.prod.stories.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.prod.stories.js
index 7e1fd5a71e..e996b4ca26 100644
--- a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.prod.stories.js
+++ b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.prod.stories.js
@@ -24,7 +24,11 @@ export default {
     parameters: { docs: { description: { component: description } } },
     args: {
         // Handle default props bug (see Transfer stories)
-        ...FileInputFieldWithList.defaultProps,
+        dataTest: 'dhis2-uiwidgets-fileinputfieldwithlist',
+        files: [],
+        buttonLabel: 'Upload a file',
+        placeholder: 'No file uploaded yet',
+        removeText: 'Remove',
         multiple: true,
         onChange: onChange,
         name: 'uploadName',
diff --git a/components/file-input/src/file-input-field/file-input-field.prod.stories.js b/components/file-input/src/file-input-field/file-input-field.prod.stories.js
index bcb4a8094b..14b6a6b70a 100644
--- a/components/file-input/src/file-input-field/file-input-field.prod.stories.js
+++ b/components/file-input/src/file-input-field/file-input-field.prod.stories.js
@@ -22,7 +22,9 @@ export default {
     // Default args:
     args: {
         // Handle default values (see comment in Transfer.js)
-        ...FileInputField.defaultProps,
+        accept: '*',
+        dataTest: 'dhis2-uiwidgets-fileinputfield',
+        placeholder: 'No file uploaded yet',
         onChange: onChange,
         name: 'uploadName',
         label: 'Upload something',
diff --git a/components/layer/src/layer.prod.stories.js b/components/layer/src/layer.prod.stories.js
index 7ffee2f769..696a76e7e6 100644
--- a/components/layer/src/layer.prod.stories.js
+++ b/components/layer/src/layer.prod.stories.js
@@ -33,7 +33,11 @@ export default {
         },
     },
     // Handle weird treatment of non-literal defaultProps (see Transfer.stories)
-    args: { ...Layer.defaultProps },
+    args: {
+        position: 'fixed',
+        dataTest: 'dhis2-uicore-layer',
+        level: 'auto',
+    },
 }
 
 const Template = (args) => (
diff --git a/components/pagination/src/__tests__/page-summary.test.js b/components/pagination/src/__tests__/page-summary.test.js
index 96f7df9376..6fb263472d 100644
--- a/components/pagination/src/__tests__/page-summary.test.js
+++ b/components/pagination/src/__tests__/page-summary.test.js
@@ -1,12 +1,12 @@
 import { shallow } from 'enzyme'
 import React from 'react'
+import { getDefaultPageSummaryText } from '../get-default-page-summary-text.js'
 import { PageSummary } from '../page-summary.js'
-import { Pagination } from '../pagination.js'
 
 describe('<PageSummary />', () => {
     const props = {
         dataTest: 'test',
-        pageSummaryText: Pagination.defaultProps.pageSummaryText,
+        pageSummaryText: getDefaultPageSummaryText,
     }
 
     it('renders without errors', () => {
diff --git a/components/popover/src/popover.prod.stories.js b/components/popover/src/popover.prod.stories.js
index c586f0872c..801cad5c4b 100644
--- a/components/popover/src/popover.prod.stories.js
+++ b/components/popover/src/popover.prod.stories.js
@@ -37,7 +37,13 @@ export default {
         },
     },
     // Handles weird treatment of non-literal args (`elevation: elevations.e200`)
-    args: { ...Popover.defaultProps },
+    args: {
+        arrow: true,
+        dataTest: 'dhis2-uicore-popover',
+        elevation: elevations.e200,
+        maxWidth: 360,
+        placement: 'top',
+    },
     argTypes: {
         reference: { ...sharedPropTypes.popperReferenceArgType },
         placement: { ...sharedPropTypes.popperPlacementArgType },
diff --git a/components/select/src/multi-select-field/multi-select-field.js b/components/select/src/multi-select-field/multi-select-field.js
index acabd4cbc8..c31e62dcd3 100644
--- a/components/select/src/multi-select-field/multi-select-field.js
+++ b/components/select/src/multi-select-field/multi-select-field.js
@@ -3,7 +3,6 @@ import { Box } from '@dhis2-ui/box'
 import { Field } from '@dhis2-ui/field'
 import PropTypes from 'prop-types'
 import React from 'react'
-import i18n from '../locales/index.js'
 import { MultiSelect } from '../multi-select/index.js'
 
 // TODO: translate
diff --git a/components/select/src/multi-select-field/multi-select-field.prod.stories.js b/components/select/src/multi-select-field/multi-select-field.prod.stories.js
index 0dd203d8c1..69869c2d3c 100644
--- a/components/select/src/multi-select-field/multi-select-field.prod.stories.js
+++ b/components/select/src/multi-select-field/multi-select-field.prod.stories.js
@@ -39,7 +39,13 @@ export default {
     // default args for stories
     args: {
         // Fix default prop issues - causes 'i18n is not defined' error
-        ...MultiSelectField.defaultProps,
+        dataTest: 'dhis2-uiwidgets-multiselectfield',
+        clearText: 'Clear',
+        empty: 'No data found',
+        filterPlaceholder: 'Type to filter options',
+        loadingText: 'Loading options',
+        noMatchText: 'No options found',
+
         label: 'Default label',
         selected: ['1'],
         children: options,
diff --git a/components/select/src/single-select-field/single-select-field.js b/components/select/src/single-select-field/single-select-field.js
index b9e3de1803..6455248b2f 100644
--- a/components/select/src/single-select-field/single-select-field.js
+++ b/components/select/src/single-select-field/single-select-field.js
@@ -3,7 +3,6 @@ import { Box } from '@dhis2-ui/box'
 import { Field } from '@dhis2-ui/field'
 import PropTypes from 'prop-types'
 import React from 'react'
-import i18n from '../locales/index.js'
 import { SingleSelect } from '../single-select/index.js'
 
 // TODO: translate
diff --git a/components/select/src/single-select-field/single-select-field.prod.stories.js b/components/select/src/single-select-field/single-select-field.prod.stories.js
index bd0a610a00..cf20d6dbc9 100644
--- a/components/select/src/single-select-field/single-select-field.prod.stories.js
+++ b/components/select/src/single-select-field/single-select-field.prod.stories.js
@@ -39,7 +39,15 @@ export default {
     // default args for stories
     args: {
         // Fix default prop issues - causes 'i18n is not defined' error
-        ...SingleSelectField.defaultProps,
+        dataTest: 'dhis2-uiwidgets-singleselectfield',
+        selected: '',
+
+        clearText: 'Clear',
+        empty: 'No data found',
+        filterPlaceholder: 'Type to filter options',
+        loadingText: 'Loading options',
+        noMatchText: 'No options found',
+
         label: 'Default label',
         children: options,
         onChange: onChange,
diff --git a/components/transfer/src/transfer.prod.stories.js b/components/transfer/src/transfer.prod.stories.js
index 4b546f01d1..793d0f4d16 100644
--- a/components/transfer/src/transfer.prod.stories.js
+++ b/components/transfer/src/transfer.prod.stories.js
@@ -150,7 +150,14 @@ export default {
     },
     // Default args:
     args: {
-        ...Transfer.defaultProps,
+        dataTest: 'dhis2-uicore-transfer',
+        height: '240px',
+        initialSearchTerm: '',
+        initialSearchTermPicked: '',
+        maxSelections: Infinity,
+        optionsWidth: '320px',
+        selected: [],
+        selectedWidth: '320px',
         options: options,
     },
 }
diff --git a/docs/src/components/DemoComponent.jsx b/docs/src/components/DemoComponent.jsx
index db6c27866d..cc457947e3 100644
--- a/docs/src/components/DemoComponent.jsx
+++ b/docs/src/components/DemoComponent.jsx
@@ -3,7 +3,7 @@ import React, { useRef } from 'react'
 import { DEMO_URL } from '../constants.js'
 import styles from './DemoComponent.module.css'
 
-export const Demo = ({ path, args, height }) => {
+export const Demo = ({ path, args = '', height = '100px' }) => {
     const iframeRef = useRef(null)
 
     const handleReload = () => {
@@ -73,8 +73,3 @@ Demo.propTypes = {
     args: PropTypes.string,
     height: PropTypes.string,
 }
-
-Demo.defaultProps = {
-    args: '',
-    height: '100px',
-}

From d6875ea03777b23c3fd1d2c5920f4ba2834cd6ab Mon Sep 17 00:00:00 2001
From: Mozafar Haider <mozafar@dhis2.org>
Date: Sat, 14 Sep 2024 18:12:24 +0100
Subject: [PATCH 3/7] refactor(react-18): fix wrong replacement for forwardRef
 and class components

---
 .../button/src/dropdown-button/dropdown-button.js |  2 +-
 .../button/src/split-button/split-button.js       |  2 +-
 .../calendar/src/calendar-input/calendar-input.js |  2 ++
 .../src/stories/calendar-story-wrapper.js         |  7 ++++---
 components/center/src/center.js                   | 10 +++++++++-
 .../checkbox/src/checkbox-field/checkbox-field.js |  6 +-----
 components/checkbox/src/checkbox/checkbox.js      |  6 +++---
 .../file-input-field-with-list.js                 | 11 ++++++-----
 .../file-input/src/file-input/file-input.js       |  4 ++--
 components/input/src/input-field/input-field.js   |  2 +-
 components/input/src/input/input.js               |  4 ++--
 components/logo/src/logo.js                       | 11 +++++------
 components/popover/src/popover.e2e.stories.js     |  8 ++++++--
 components/radio/src/radio.js                     |  2 +-
 .../src/multi-select-field/multi-select-field.js  | 15 ++++++++-------
 .../single-select-field/single-select-field.js    | 15 ++++++++-------
 .../switch/src/switch-field/switch-field.js       |  6 +-----
 components/switch/src/switch/switch.js            |  6 +++---
 components/tab/src/tab/tab.js                     | 10 +++++++++-
 .../table/src/data-table/data-table-cell.js       |  9 +++++----
 .../data-table-column-header.js                   |  2 +-
 .../data-table/data-table-row/data-table-row.js   |  2 +-
 components/table/src/data-table/data-table.js     |  6 +++---
 .../src/data-table/table-elements/table-body.js   | 12 +++++++++++-
 .../table-data-cell/table-data-cell.js            |  9 +++++----
 .../src/data-table/table-elements/table-foot.js   | 11 ++++++++++-
 .../table-elements/table-header-cell-action.js    | 12 +++++++++++-
 .../table-header-cell/table-header-cell.js        | 10 +++++-----
 .../src/data-table/table-elements/table-row.js    | 10 +++++++++-
 .../data-table/table-elements/table-scroll-box.js | 12 +++++++++++-
 .../data-table/table-elements/table-toolbar.js    | 11 ++++++++++-
 .../table/src/data-table/table-elements/table.js  |  6 +++---
 components/text-area/src/text-area/text-area.js   |  8 ++++----
 33 files changed, 162 insertions(+), 87 deletions(-)

diff --git a/components/button/src/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js
index 7120a625d5..d9fe8b1b93 100644
--- a/components/button/src/dropdown-button/dropdown-button.js
+++ b/components/button/src/dropdown-button/dropdown-button.js
@@ -124,7 +124,7 @@ class DropdownButton extends Component {
             tabIndex,
             type,
             initialFocus,
-            dataTest,
+            dataTest = 'dhis2-uicore-dropdownbutton',
         } = this.props
         const open =
             typeof this.props.open === 'boolean'
diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js
index 192f59ea62..309ec57416 100644
--- a/components/button/src/split-button/split-button.js
+++ b/components/button/src/split-button/split-button.js
@@ -72,7 +72,7 @@ class SplitButton extends Component {
             disabled,
             type,
             tabIndex,
-            dataTest,
+            dataTest = 'dhis2-uicore-splitbutton',
             initialFocus,
         } = this.props
 
diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
index cbc26d885d..4be73a6555 100644
--- a/components/calendar/src/calendar-input/calendar-input.js
+++ b/components/calendar/src/calendar-input/calendar-input.js
@@ -27,6 +27,7 @@ export const CalendarInput = ({
     width,
     cellSize,
     clearable,
+    dataTest = 'dhis2-uiwidgets-calendar-inputfield',
     ...rest
 } = {}) => {
     const ref = useRef()
@@ -72,6 +73,7 @@ export const CalendarInput = ({
                 <InputField
                     label={i18n.t('Pick a date')}
                     {...rest}
+                    dataTest={dataTest}
                     type="text"
                     onFocus={onFocus}
                     value={date}
diff --git a/components/calendar/src/stories/calendar-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js
index e1f8d362b9..24d6b70249 100644
--- a/components/calendar/src/stories/calendar-story-wrapper.js
+++ b/components/calendar/src/stories/calendar-story-wrapper.js
@@ -1,17 +1,18 @@
 import { constants } from '@dhis2/multi-calendar-dates'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
+import { Calendar } from '../calendar/calendar.js'
 
 const { calendars, numberingSystems } = constants
 export const CalendarStoryWrapper = (props) => {
     const {
-        calendar,
+        calendar = 'gregory',
         locale,
         timeZone,
         dir,
-        component: Component,
+        component: Component = Calendar,
         date,
-        weekDayFormat,
+        weekDayFormat = 'narrow',
     } = props
     const [selectedCalendar, setSelectedCalendar] = useState(calendar)
     const [selectedNumberingSystem, setSelectedNumberingSystem] = useState()
diff --git a/components/center/src/center.js b/components/center/src/center.js
index 09f27ab6a2..12275421a6 100644
--- a/components/center/src/center.js
+++ b/components/center/src/center.js
@@ -3,7 +3,15 @@ import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
 
 export const Center = forwardRef(
-    ({ className, dataTest, children, position }, ref) => (
+    (
+        {
+            className,
+            dataTest = 'dhis2-uicore-centeredcontent',
+            children,
+            position = 'middle',
+        },
+        ref
+    ) => (
         <div
             className={cx('center', className, position)}
             data-test={dataTest}
diff --git a/components/checkbox/src/checkbox-field/checkbox-field.js b/components/checkbox/src/checkbox-field/checkbox-field.js
index 3659bd6a5f..591f7c47e6 100644
--- a/components/checkbox/src/checkbox-field/checkbox-field.js
+++ b/components/checkbox/src/checkbox-field/checkbox-field.js
@@ -5,11 +5,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Checkbox } from '../checkbox/index.js'
 
-const AddRequired = ({
-    label,
-    required,
-    dataTest = 'dhis2-uiwidgets-checkboxfield',
-}) => (
+const AddRequired = ({ label, required, dataTest }) => (
     <React.Fragment>
         {label}
         {required && <Required dataTest={`${dataTest}-required`} />}
diff --git a/components/checkbox/src/checkbox/checkbox.js b/components/checkbox/src/checkbox/checkbox.js
index 0a722e57c3..6fce65c5b7 100644
--- a/components/checkbox/src/checkbox/checkbox.js
+++ b/components/checkbox/src/checkbox/checkbox.js
@@ -60,8 +60,8 @@ class Checkbox extends Component {
 
     render() {
         const {
-            checked,
-            indeterminate,
+            checked = false,
+            indeterminate = false,
             className,
             disabled,
             error,
@@ -72,7 +72,7 @@ class Checkbox extends Component {
             value,
             warning,
             dense,
-            dataTest,
+            dataTest = 'dhis2-uicore-checkbox',
         } = this.props
 
         const classes = cx({
diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
index c43c564fc1..406d49f2b7 100644
--- a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
+++ b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
@@ -2,6 +2,7 @@ import { sharedPropTypes } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { FileInputField } from '../file-input-field/index.js'
+import i18n from '../locales/index.js'
 import { FileListItemWithRemove } from './file-list-item-with-remove.js'
 
 // TODO: i18n
@@ -61,12 +62,12 @@ class FileInputFieldWithList extends Component {
     render() {
         const {
             accept,
-            buttonLabel,
+            buttonLabel = () => i18n.t('Upload a file'),
             className,
-            dataTest,
+            dataTest = 'dhis2-uiwidgets-fileinputfieldwithlist',
             disabled,
             error,
-            files,
+            files = [],
             helpText,
             initialFocus,
             label,
@@ -76,8 +77,8 @@ class FileInputFieldWithList extends Component {
             onBlur,
             onFocus,
             onKeyDown,
-            placeholder,
-            removeText,
+            placeholder = () => i18n.t('No file uploaded yet'),
+            removeText = () => i18n.t('Remove'),
             required,
             small,
             tabIndex,
diff --git a/components/file-input/src/file-input/file-input.js b/components/file-input/src/file-input/file-input.js
index f5b012b408..4d50cc636a 100644
--- a/components/file-input/src/file-input/file-input.js
+++ b/components/file-input/src/file-input/file-input.js
@@ -50,10 +50,10 @@ class FileInput extends Component {
 
     render() {
         const {
-            accept,
+            accept = '*',
             buttonLabel,
             className,
-            dataTest,
+            dataTest = 'dhis2-uicore-fileinput',
             disabled,
             error,
             initialFocus,
diff --git a/components/input/src/input-field/input-field.js b/components/input/src/input-field/input-field.js
index e7d45315a2..948093514a 100644
--- a/components/input/src/input-field/input-field.js
+++ b/components/input/src/input-field/input-field.js
@@ -35,7 +35,7 @@ class InputField extends React.Component {
             validationText,
             inputWidth,
             autoComplete,
-            dataTest,
+            dataTest = 'dhis2-uiwidgets-inputfield',
         } = this.props
 
         return (
diff --git a/components/input/src/input/input.js b/components/input/src/input/input.js
index d26a4e96ad..390e703c80 100644
--- a/components/input/src/input/input.js
+++ b/components/input/src/input/input.js
@@ -132,7 +132,7 @@ export class Input extends Component {
         const {
             role,
             className,
-            type,
+            type = 'text',
             dense,
             disabled,
             readOnly,
@@ -148,7 +148,7 @@ export class Input extends Component {
             min,
             step,
             autoComplete,
-            dataTest,
+            dataTest = 'dhis2-uicore-input',
         } = this.props
 
         return (
diff --git a/components/logo/src/logo.js b/components/logo/src/logo.js
index ff89d047e9..20121ad00d 100644
--- a/components/logo/src/logo.js
+++ b/components/logo/src/logo.js
@@ -16,10 +16,9 @@ const blue = '#0080d4'
 const white = '#ffffff'
 const dark = '#212225'
 
-export const LogoIcon = ({
-    className,
-    dataTest = 'dhis2-uicore-logowhite',
-}) => <LogoIconSvg iconColor={blue} className={className} dataTest={dataTest} />
+export const LogoIcon = ({ className, dataTest = 'dhis2-uicore-logoicon' }) => (
+    <LogoIconSvg iconColor={blue} className={className} dataTest={dataTest} />
+)
 
 LogoIcon.propTypes = {
     className: PropTypes.string,
@@ -28,7 +27,7 @@ LogoIcon.propTypes = {
 
 export const LogoIconWhite = ({
     className,
-    dataTest = 'dhis2-uicore-logowhite',
+    dataTest = 'dhis2-uicore-logoiconwhite',
 }) => (
     <LogoIconSvg iconColor={white} className={className} dataTest={dataTest} />
 )
@@ -38,7 +37,7 @@ LogoIconWhite.propTypes = {
     dataTest: PropTypes.string,
 }
 
-export const Logo = ({ className, dataTest = 'dhis2-uicore-logowhite' }) => (
+export const Logo = ({ className, dataTest = 'dhis2-uicore-logo' }) => (
     <LogoSvg
         iconColor={blue}
         textColor={dark}
diff --git a/components/popover/src/popover.e2e.stories.js b/components/popover/src/popover.e2e.stories.js
index 5741ccc425..cd58fabe6d 100644
--- a/components/popover/src/popover.e2e.stories.js
+++ b/components/popover/src/popover.e2e.stories.js
@@ -21,8 +21,12 @@ class PopperInBoxWithCenteredReferenceElement extends Component {
     ref = createRef()
 
     render() {
-        const { paddingTop, popoverHeight, popoverWidth, ...popoverProps } =
-            this.props
+        const {
+            paddingTop = 220,
+            popoverHeight = 200,
+            popoverWidth = 336,
+            ...popoverProps
+        } = this.props
         return (
             <div style={{ ...boxStyle, paddingTop, height: paddingTop + 100 }}>
                 <div
diff --git a/components/radio/src/radio.js b/components/radio/src/radio.js
index 64984068ea..bfe7c19fcb 100644
--- a/components/radio/src/radio.js
+++ b/components/radio/src/radio.js
@@ -58,7 +58,7 @@ class Radio extends Component {
             value,
             warning,
             dense,
-            dataTest,
+            dataTest = 'dhis2-uicore-radio',
         } = this.props
 
         const classes = cx({
diff --git a/components/select/src/multi-select-field/multi-select-field.js b/components/select/src/multi-select-field/multi-select-field.js
index c31e62dcd3..25b66f0629 100644
--- a/components/select/src/multi-select-field/multi-select-field.js
+++ b/components/select/src/multi-select-field/multi-select-field.js
@@ -3,6 +3,7 @@ import { Box } from '@dhis2-ui/box'
 import { Field } from '@dhis2-ui/field'
 import PropTypes from 'prop-types'
 import React from 'react'
+import i18n from '../locales/index.js'
 import { MultiSelect } from '../multi-select/index.js'
 
 // TODO: translate
@@ -29,7 +30,7 @@ class MultiSelectField extends React.Component {
             disabled,
             warning,
             loading,
-            selected,
+            selected = [],
             tabIndex,
             helpText,
             validationText,
@@ -38,17 +39,17 @@ class MultiSelectField extends React.Component {
             inputWidth,
             children,
             clearable,
-            clearText,
+            clearText = () => i18n.t('Clear'),
             filterable,
-            filterPlaceholder,
+            filterPlaceholder = () => i18n.t('Type to filter options'),
             placeholder,
             prefix,
-            empty,
-            loadingText,
-            noMatchText,
+            empty = () => i18n.t('No data found'),
+            loadingText = () => i18n.t('Loading options'),
+            noMatchText = () => i18n.t('No options found'),
             initialFocus,
             dense,
-            dataTest,
+            dataTest = 'dhis2-uiwidgets-multiselectfield',
         } = this.props
 
         return (
diff --git a/components/select/src/single-select-field/single-select-field.js b/components/select/src/single-select-field/single-select-field.js
index 6455248b2f..f0957e8475 100644
--- a/components/select/src/single-select-field/single-select-field.js
+++ b/components/select/src/single-select-field/single-select-field.js
@@ -3,6 +3,7 @@ import { Box } from '@dhis2-ui/box'
 import { Field } from '@dhis2-ui/field'
 import PropTypes from 'prop-types'
 import React from 'react'
+import i18n from '../locales/index.js'
 import { SingleSelect } from '../single-select/index.js'
 
 // TODO: translate
@@ -28,7 +29,7 @@ class SingleSelectField extends React.Component {
             warning,
             disabled,
             loading,
-            selected,
+            selected = '',
             tabIndex,
             helpText,
             validationText,
@@ -37,17 +38,17 @@ class SingleSelectField extends React.Component {
             inputWidth,
             children,
             clearable,
-            clearText,
+            clearText = () => i18n.t('Clear'),
             filterable,
-            filterPlaceholder,
+            filterPlaceholder = () => i18n.t('Type to filter options'),
             placeholder,
             prefix,
-            empty,
-            loadingText,
-            noMatchText,
+            empty = () => i18n.t('No data found'),
+            loadingText = () => i18n.t('Loading options'),
+            noMatchText = () => i18n.t('No options found'),
             initialFocus,
             dense,
-            dataTest,
+            dataTest = 'dhis2-uiwidgets-singleselectfield',
         } = this.props
 
         return (
diff --git a/components/switch/src/switch-field/switch-field.js b/components/switch/src/switch-field/switch-field.js
index 0ff72d8d7e..02f979a441 100644
--- a/components/switch/src/switch-field/switch-field.js
+++ b/components/switch/src/switch-field/switch-field.js
@@ -5,11 +5,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Switch } from '../switch/index.js'
 
-const AddRequired = ({
-    label,
-    required,
-    dataTest = 'dhis2-uiwidgets-switchfield',
-}) => (
+const AddRequired = ({ label, required, dataTest }) => (
     <React.Fragment>
         {label}
         {required && <Required dataTest={`${dataTest}-required`} />}
diff --git a/components/switch/src/switch/switch.js b/components/switch/src/switch/switch.js
index df74495ac0..ce8348b065 100644
--- a/components/switch/src/switch/switch.js
+++ b/components/switch/src/switch/switch.js
@@ -48,7 +48,7 @@ class Switch extends Component {
     render() {
         const {
             'aria-label': ariaLabel,
-            checked,
+            checked = false,
             className,
             disabled,
             error,
@@ -59,8 +59,8 @@ class Switch extends Component {
             value,
             warning,
             dense,
-            dataTest,
-            role,
+            dataTest = 'dhis2-uicore-switch',
+            role = 'switch',
         } = this.props
 
         const classes = cx({
diff --git a/components/tab/src/tab/tab.js b/components/tab/src/tab/tab.js
index f005d508fe..0e2e893c22 100644
--- a/components/tab/src/tab/tab.js
+++ b/components/tab/src/tab/tab.js
@@ -6,7 +6,15 @@ import React, { useState, useEffect, useRef } from 'react'
 
 export const Tab = React.forwardRef(
     (
-        { icon, onClick, selected, disabled, children, className, dataTest },
+        {
+            icon,
+            onClick,
+            selected,
+            disabled,
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tab',
+        },
         ref
     ) => {
         let tabRef = useRef(null)
diff --git a/components/table/src/data-table/data-table-cell.js b/components/table/src/data-table/data-table-cell.js
index fae1dff4cf..aadd100c8f 100644
--- a/components/table/src/data-table/data-table-cell.js
+++ b/components/table/src/data-table/data-table-cell.js
@@ -7,17 +7,18 @@ export const DataTableCell = forwardRef(
     (
         {
             active,
-            align,
+            align = 'left',
             backgroundColor,
             bordered,
             children,
             className,
             colSpan,
-            dataTest,
+            dataTest = 'dhis2-uicore-datatablecell',
             error,
             fixed,
             large,
-            left,
+
+            left = 'auto',
             muted,
             rowSpan,
             role,
@@ -25,7 +26,7 @@ export const DataTableCell = forwardRef(
             staticStyle,
             tag,
             valid,
-            width,
+            width = 'auto',
             onClick,
             ...props
         },
diff --git a/components/table/src/data-table/data-table-column-header/data-table-column-header.js b/components/table/src/data-table/data-table-column-header/data-table-column-header.js
index 806864cba2..c3dbb8a836 100644
--- a/components/table/src/data-table/data-table-column-header/data-table-column-header.js
+++ b/components/table/src/data-table/data-table-column-header/data-table-column-header.js
@@ -23,7 +23,7 @@ export const DataTableColumnHeader = forwardRef(
             children,
             className,
             colSpan,
-            dataTest,
+            dataTest = 'dhis2-uicore-datatablecellhead',
             filter,
             fixed,
             large,
diff --git a/components/table/src/data-table/data-table-row/data-table-row.js b/components/table/src/data-table/data-table-row/data-table-row.js
index f91facf02c..ad9e6ff40e 100644
--- a/components/table/src/data-table/data-table-row/data-table-row.js
+++ b/components/table/src/data-table/data-table-row/data-table-row.js
@@ -13,7 +13,7 @@ export const DataTableRow = forwardRef(
         {
             children,
             className,
-            dataTest,
+            dataTest = 'dhis2-uicore-datatablerow',
             expandableContent,
             expanded,
             selected,
diff --git a/components/table/src/data-table/data-table.js b/components/table/src/data-table/data-table.js
index 3b688badd3..e1b9c72d28 100644
--- a/components/table/src/data-table/data-table.js
+++ b/components/table/src/data-table/data-table.js
@@ -8,12 +8,12 @@ export const DataTable = forwardRef(
         {
             children,
             className,
-            dataTest,
-            layout,
+            dataTest = 'dhis2-uicore-datatable',
+            layout = 'auto',
             role,
             scrollHeight,
             scrollWidth,
-            width,
+            width = '100%',
         },
         ref
     ) => {
diff --git a/components/table/src/data-table/table-elements/table-body.js b/components/table/src/data-table/table-elements/table-body.js
index be6917550a..b382793cdc 100644
--- a/components/table/src/data-table/table-elements/table-body.js
+++ b/components/table/src/data-table/table-elements/table-body.js
@@ -4,7 +4,17 @@ import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
 
 export const TableBody = forwardRef(
-    ({ children, className, dataTest, role, loading, ...props }, ref) => (
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tablebody',
+            role,
+            loading,
+            ...props
+        },
+        ref
+    ) => (
         <tbody
             {...props}
             className={cx(className, {
diff --git a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js
index e97b7eefeb..655e81a821 100644
--- a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js
+++ b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js
@@ -15,23 +15,24 @@ export const TableDataCell = forwardRef(
     (
         {
             active,
-            align,
+
+            align = 'left',
             backgroundColor,
             bordered,
             children,
             className,
             colSpan,
-            dataTest,
+            dataTest = 'dhis2-uicore-tabledatacel',
             error,
             large,
-            left,
+            left = 'auto',
             muted,
             role,
             rowSpan,
             scope,
             staticStyle,
             valid,
-            width,
+            width = 'auto',
             onClick,
             ...props
         },
diff --git a/components/table/src/data-table/table-elements/table-foot.js b/components/table/src/data-table/table-elements/table-foot.js
index e121822955..26b3a11946 100644
--- a/components/table/src/data-table/table-elements/table-foot.js
+++ b/components/table/src/data-table/table-elements/table-foot.js
@@ -2,7 +2,16 @@ import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
 
 export const TableFoot = forwardRef(
-    ({ children, className, dataTest, role, ...props }, ref) => (
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tablefoot',
+            role,
+            ...props
+        },
+        ref
+    ) => (
         <tfoot
             {...props}
             className={className}
diff --git a/components/table/src/data-table/table-elements/table-header-cell-action.js b/components/table/src/data-table/table-elements/table-header-cell-action.js
index 3f74c20dd5..5eeec74bf7 100644
--- a/components/table/src/data-table/table-elements/table-header-cell-action.js
+++ b/components/table/src/data-table/table-elements/table-header-cell-action.js
@@ -3,7 +3,17 @@ import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
 
 export const TableHeaderCellAction = forwardRef(
-    ({ onClick, children, className, dataTest, title, ...props }, ref) => (
+    (
+        {
+            onClick,
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tableheadercellaction',
+            title,
+            ...props
+        },
+        ref
+    ) => (
         <button
             {...props}
             className={className}
diff --git a/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js b/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js
index 97c0912c1f..3a4394c1fa 100644
--- a/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js
+++ b/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js
@@ -11,25 +11,25 @@ export const TableHeaderCell = forwardRef(
     (
         {
             active,
-            align,
+            align = 'left',
             backgroundColor,
             bordered,
             children,
             className,
             colSpan,
-            dataTest,
+            dataTest = 'dhis2-uicore-tablecell',
             error,
             fixed,
             large,
-            left,
+            left = AUTO,
             muted,
             rowSpan,
             role,
             scope,
             staticStyle,
-            top,
+            top = AUTO,
             valid,
-            width,
+            width = AUTO,
             onClick,
             ...props
         },
diff --git a/components/table/src/data-table/table-elements/table-row.js b/components/table/src/data-table/table-elements/table-row.js
index 52628f88ed..e34a1dc074 100644
--- a/components/table/src/data-table/table-elements/table-row.js
+++ b/components/table/src/data-table/table-elements/table-row.js
@@ -4,7 +4,15 @@ import React, { forwardRef } from 'react'
 
 export const TableRow = forwardRef(
     (
-        { children, className, dataTest, draggable, role, selected, ...props },
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tablerow',
+            draggable,
+            role,
+            selected,
+            ...props
+        },
         ref
     ) => (
         <tr
diff --git a/components/table/src/data-table/table-elements/table-scroll-box.js b/components/table/src/data-table/table-elements/table-scroll-box.js
index 33c5a41d38..f1fac1ecbf 100644
--- a/components/table/src/data-table/table-elements/table-scroll-box.js
+++ b/components/table/src/data-table/table-elements/table-scroll-box.js
@@ -3,7 +3,17 @@ import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
 
 export const TableScrollBox = forwardRef(
-    ({ children, className, dataTest, maxHeight, maxWidth, ...props }, ref) => (
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tablescrollbox',
+            maxHeight = 'auto',
+            maxWidth = 'auto',
+            ...props
+        },
+        ref
+    ) => (
         <div {...props} className={className} data-test={dataTest} ref={ref}>
             {children}
             <style jsx>{`
diff --git a/components/table/src/data-table/table-elements/table-toolbar.js b/components/table/src/data-table/table-elements/table-toolbar.js
index aa91666274..0b3d43ba41 100644
--- a/components/table/src/data-table/table-elements/table-toolbar.js
+++ b/components/table/src/data-table/table-elements/table-toolbar.js
@@ -4,7 +4,16 @@ import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
 
 export const TableToolbar = forwardRef(
-    ({ children, className, dataTest, position, ...props }, ref) => (
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tabletoolbar',
+            position = 'top',
+            ...props
+        },
+        ref
+    ) => (
         <div
             {...props}
             data-test={dataTest}
diff --git a/components/table/src/data-table/table-elements/table.js b/components/table/src/data-table/table-elements/table.js
index dd522b84da..5e03c2993a 100644
--- a/components/table/src/data-table/table-elements/table.js
+++ b/components/table/src/data-table/table-elements/table.js
@@ -8,11 +8,11 @@ export const Table = forwardRef(
         {
             children,
             className,
-            dataTest,
-            layout,
+            dataTest = 'dhis2-uicore-table',
+            layout = 'auto',
             role,
             borderless,
-            width,
+            width = '100%',
             ...props
         },
         ref
diff --git a/components/text-area/src/text-area/text-area.js b/components/text-area/src/text-area/text-area.js
index 31ff337ac9..a23e55ffcb 100644
--- a/components/text-area/src/text-area/text-area.js
+++ b/components/text-area/src/text-area/text-area.js
@@ -121,10 +121,10 @@ export class TextArea extends Component {
             loading,
             value,
             tabIndex,
-            rows,
-            width,
-            resize,
-            dataTest,
+            resize = 'vertical',
+            rows = 4,
+            width = '100%',
+            dataTest = 'dhis2-uicore-textarea',
         } = this.props
         const { height } = this.state
 

From 371fdb0044a489ce1e4083dfd7ada50380781422 Mon Sep 17 00:00:00 2001
From: Mozafar Haider <mozafar@dhis2.org>
Date: Sun, 15 Sep 2024 18:45:15 +0100
Subject: [PATCH 4/7] refactor(react-18): use static defaultProps for class
 components

---
 .../button/src/dropdown-button/dropdown-button.js     |  4 ++++
 components/button/src/split-button/split-button.js    |  5 +++++
 components/checkbox/src/checkbox/checkbox.js          |  6 ++++++
 .../file-input-field-with-list.js                     |  8 ++++++++
 components/file-input/src/file-input/file-input.js    |  5 +++++
 components/input/src/input-field/input-field.js       |  4 ++++
 components/input/src/input/input.js                   |  5 +++++
 components/popover/src/popover.e2e.stories.js         |  5 +++++
 components/radio/src/radio.js                         |  4 ++++
 .../src/multi-select-field/multi-select-field.js      | 11 +++++++++++
 components/select/src/select/select.js                |  4 ++++
 .../src/single-select-field/single-select-field.js    | 11 +++++++++++
 components/switch/src/switch/switch.js                |  6 ++++++
 components/text-area/src/text-area/text-area.js       |  6 ++++++
 14 files changed, 84 insertions(+)

diff --git a/components/button/src/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js
index d9fe8b1b93..418235f37c 100644
--- a/components/button/src/dropdown-button/dropdown-button.js
+++ b/components/button/src/dropdown-button/dropdown-button.js
@@ -67,6 +67,10 @@ class DropdownButton extends Component {
         open: false,
     }
 
+    static defaultProps = {
+        dataTest: 'dhis2-uicore-dropdownbutton',
+    }
+
     anchorRef = React.createRef()
 
     componentDidMount() {
diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js
index 309ec57416..20610120f2 100644
--- a/components/button/src/split-button/split-button.js
+++ b/components/button/src/split-button/split-button.js
@@ -20,6 +20,10 @@ class SplitButton extends Component {
         open: false,
     }
 
+    static defaultProps = {
+        dataTest: 'dhis2-uicore-splitbutton',
+    }
+
     anchorRef = React.createRef()
 
     componentDidMount() {
@@ -78,6 +82,7 @@ class SplitButton extends Component {
 
         const arrow = open ? <IconChevronUp16 /> : <IconChevronDown16 />
 
+        console.log(dataTest)
         return (
             <div ref={this.anchorRef} data-test={dataTest}>
                 <Button
diff --git a/components/checkbox/src/checkbox/checkbox.js b/components/checkbox/src/checkbox/checkbox.js
index 6fce65c5b7..735a1fa6c1 100644
--- a/components/checkbox/src/checkbox/checkbox.js
+++ b/components/checkbox/src/checkbox/checkbox.js
@@ -58,6 +58,12 @@ class Checkbox extends Component {
         }
     }
 
+    static defaultProps = {
+        checked: false,
+        indeterminate: false,
+        dataTest: 'dhis2-uicore-checkbox',
+    }
+
     render() {
         const {
             checked = false,
diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
index 406d49f2b7..63d6905325 100644
--- a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
+++ b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
@@ -59,6 +59,14 @@ class FileInputFieldWithList extends Component {
         )
     }
 
+    static defaultProps = {
+        accept: '*',
+        dataTest: 'dhis2-uiwidgets-fileinputfield',
+
+        buttonLabel: () => i18n.t('Upload a file'),
+        placeholder: () => i18n.t('No file uploaded yet'),
+    }
+
     render() {
         const {
             accept,
diff --git a/components/file-input/src/file-input/file-input.js b/components/file-input/src/file-input/file-input.js
index 4d50cc636a..d5a6a5197e 100644
--- a/components/file-input/src/file-input/file-input.js
+++ b/components/file-input/src/file-input/file-input.js
@@ -7,6 +7,11 @@ import PropTypes from 'prop-types'
 import React, { createRef, Component } from 'react'
 
 class FileInput extends Component {
+    static defaultProps = {
+        accept: '*',
+        dataTest: 'dhis2-uicore-fileinput',
+    }
+
     ref = createRef()
 
     handleClick = () => {
diff --git a/components/input/src/input-field/input-field.js b/components/input/src/input-field/input-field.js
index 948093514a..28cc4c353d 100644
--- a/components/input/src/input-field/input-field.js
+++ b/components/input/src/input-field/input-field.js
@@ -6,6 +6,10 @@ import React from 'react'
 import { Input } from '../input/index.js'
 
 class InputField extends React.Component {
+    static defaultProps = {
+        dataTest: 'dhis2-uiwidgets-inputfield',
+    }
+
     render() {
         const {
             className,
diff --git a/components/input/src/input/input.js b/components/input/src/input/input.js
index 390e703c80..4d81035ae3 100644
--- a/components/input/src/input/input.js
+++ b/components/input/src/input/input.js
@@ -89,6 +89,11 @@ const styles = css`
 `
 
 export class Input extends Component {
+    static defaultProps = {
+        type: 'text',
+        dataTest: 'dhis2-uicore-input',
+    }
+
     inputRef = React.createRef()
 
     componentDidMount() {
diff --git a/components/popover/src/popover.e2e.stories.js b/components/popover/src/popover.e2e.stories.js
index cd58fabe6d..7d3e819632 100644
--- a/components/popover/src/popover.e2e.stories.js
+++ b/components/popover/src/popover.e2e.stories.js
@@ -19,6 +19,11 @@ const referenceElementStyle = {
 
 class PopperInBoxWithCenteredReferenceElement extends Component {
     ref = createRef()
+    static defaultProps = {
+        paddingTop: 220,
+        popoverHeight: 200,
+        popoverWidth: 336,
+    }
 
     render() {
         const {
diff --git a/components/radio/src/radio.js b/components/radio/src/radio.js
index bfe7c19fcb..c864830e54 100644
--- a/components/radio/src/radio.js
+++ b/components/radio/src/radio.js
@@ -45,6 +45,10 @@ class Radio extends Component {
         }
     }
 
+    static defaultProps = {
+        dataTest: 'dhis2-uicore-radio',
+    }
+
     render() {
         const {
             checked = false,
diff --git a/components/select/src/multi-select-field/multi-select-field.js b/components/select/src/multi-select-field/multi-select-field.js
index 25b66f0629..8c0f0724e1 100644
--- a/components/select/src/multi-select-field/multi-select-field.js
+++ b/components/select/src/multi-select-field/multi-select-field.js
@@ -16,6 +16,17 @@ const translate = (prop, interpolationObject) => {
 }
 
 class MultiSelectField extends React.Component {
+    static defaultProps = {
+        selected: [],
+        dataTest: 'dhis2-uiwidgets-multiselectfield',
+
+        clearText: () => i18n.t('Clear'),
+        empty: () => i18n.t('No data found'),
+        filterPlaceholder: () => i18n.t('Type to filter options'),
+        loadingText: () => i18n.t('Loading options'),
+        noMatchText: () => i18n.t('No options found'),
+    }
+
     render() {
         const {
             className,
diff --git a/components/select/src/select/select.js b/components/select/src/select/select.js
index 07d5a4e5fa..5655bc858e 100644
--- a/components/select/src/select/select.js
+++ b/components/select/src/select/select.js
@@ -17,6 +17,10 @@ export class Select extends Component {
         menuWidth: 'auto',
     }
 
+    static defaultProps = {
+        dataTest: 'dhis2-uicore-select',
+    }
+
     selectRef = React.createRef()
     inputRef = React.createRef()
 
diff --git a/components/select/src/single-select-field/single-select-field.js b/components/select/src/single-select-field/single-select-field.js
index f0957e8475..8a05b8c118 100644
--- a/components/select/src/single-select-field/single-select-field.js
+++ b/components/select/src/single-select-field/single-select-field.js
@@ -15,6 +15,17 @@ const translate = (prop, interpolationObject) => {
     return prop
 }
 class SingleSelectField extends React.Component {
+    static defaultProps = {
+        dataTest: 'dhis2-uiwidgets-singleselectfield',
+        selected: '',
+
+        clearText: () => i18n.t('Clear'),
+        empty: () => i18n.t('No data found'),
+        filterPlaceholder: () => i18n.t('Type to filter options'),
+        loadingText: () => i18n.t('Loading options'),
+        noMatchText: () => i18n.t('No options found'),
+    }
+
     render() {
         const {
             className,
diff --git a/components/switch/src/switch/switch.js b/components/switch/src/switch/switch.js
index ce8348b065..28b2aa1912 100644
--- a/components/switch/src/switch/switch.js
+++ b/components/switch/src/switch/switch.js
@@ -45,6 +45,12 @@ class Switch extends Component {
         }
     }
 
+    static defaultProps = {
+        checked: false,
+        dataTest: 'dhis2-uicore-switch',
+        role: 'switch',
+    }
+
     render() {
         const {
             'aria-label': ariaLabel,
diff --git a/components/text-area/src/text-area/text-area.js b/components/text-area/src/text-area/text-area.js
index a23e55ffcb..89f882ce82 100644
--- a/components/text-area/src/text-area/text-area.js
+++ b/components/text-area/src/text-area/text-area.js
@@ -106,6 +106,12 @@ export class TextArea extends Component {
             name: this.props.name,
         }
     }
+    static defaultProps = {
+        rows: 4,
+        width: '100%',
+        resize: 'vertical',
+        dataTest: 'dhis2-uicore-textarea',
+    }
 
     render() {
         const {

From 1210dffe2a4059a7c4e3d4e52ae88efc3b5ebda1 Mon Sep 17 00:00:00 2001
From: Austin McGee <947888+amcgee@users.noreply.github.com>
Date: Wed, 25 Sep 2024 15:03:31 +0200
Subject: [PATCH 5/7] fix: avoid unnecessary rerenders using stable default
 prop references (partial)

---
 .../button/src/split-button/split-button.js   |  1 -
 .../file-input-field-with-list.js             |  6 ++---
 .../src/file-input-field/file-input-field.js  |  6 +++--
 .../sharing-dialog/src/sharing-dialog.js      | 22 ++++++++++---------
 .../src/stacked-table/stacked-table-cell.js   |  3 ++-
 components/transfer/src/transfer.js           |  3 ++-
 6 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js
index 20610120f2..21041d1c26 100644
--- a/components/button/src/split-button/split-button.js
+++ b/components/button/src/split-button/split-button.js
@@ -82,7 +82,6 @@ class SplitButton extends Component {
 
         const arrow = open ? <IconChevronUp16 /> : <IconChevronDown16 />
 
-        console.log(dataTest)
         return (
             <div ref={this.anchorRef} data-test={dataTest}>
                 <Button
diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
index 63d6905325..28f4fd9b18 100644
--- a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
+++ b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
@@ -70,7 +70,7 @@ class FileInputFieldWithList extends Component {
     render() {
         const {
             accept,
-            buttonLabel = () => i18n.t('Upload a file'),
+            buttonLabel = FileInputFieldWithList.defaultProps.buttonLabel,
             className,
             dataTest = 'dhis2-uiwidgets-fileinputfieldwithlist',
             disabled,
@@ -85,8 +85,8 @@ class FileInputFieldWithList extends Component {
             onBlur,
             onFocus,
             onKeyDown,
-            placeholder = () => i18n.t('No file uploaded yet'),
-            removeText = () => i18n.t('Remove'),
+            placeholder = FileInputFieldWithList.defaultProps.placeholder,
+            removeText = FileInputFieldWithList.defaultProps.removeText,
             required,
             small,
             tabIndex,
diff --git a/components/file-input/src/file-input-field/file-input-field.js b/components/file-input/src/file-input-field/file-input-field.js
index 3f26a8f120..1721f3eacb 100644
--- a/components/file-input/src/file-input-field/file-input-field.js
+++ b/components/file-input/src/file-input-field/file-input-field.js
@@ -16,9 +16,11 @@ const translate = (prop, interpolationObject) => {
     return prop
 }
 
+const defaultButtonLabel = () => i18n.t('Upload a file')
+const defaultPlaceholder = () => i18n.t('No file uploaded yet')
 const FileInputField = ({
     accept = '*',
-    buttonLabel = () => i18n.t('Upload a file'),
+    buttonLabel = defaultButtonLabel,
     children,
     className,
     dataTest = 'dhis2-uiwidgets-fileinputfield',
@@ -34,7 +36,7 @@ const FileInputField = ({
     onChange,
     onFocus,
     onKeyDown,
-    placeholder = () => i18n.t('No file uploaded yet'),
+    placeholder = defaultPlaceholder,
     required,
     small,
     tabIndex,
diff --git a/components/sharing-dialog/src/sharing-dialog.js b/components/sharing-dialog/src/sharing-dialog.js
index dd98fb6f59..21490420ab 100644
--- a/components/sharing-dialog/src/sharing-dialog.js
+++ b/components/sharing-dialog/src/sharing-dialog.js
@@ -38,19 +38,21 @@ const mutation = {
     data: ({ data }) => data,
 }
 
+const emptyFunction = () => {}
+const defaultInitialSharingSettings = {
+    name: '',
+    allowPublic: true,
+    public: ACCESS_NONE,
+    groups: {},
+    users: {},
+}
 export const SharingDialog = ({
     id,
     type,
-    onClose = () => {},
-    onError = () => {},
-    onSave = () => {},
-    initialSharingSettings = {
-        name: '',
-        allowPublic: true,
-        public: ACCESS_NONE,
-        groups: {},
-        users: {},
-    },
+    onClose = emptyFunction,
+    onError = emptyFunction,
+    onSave = emptyFunction,
+    initialSharingSettings = defaultInitialSharingSettings,
     dataTest = 'dhis2-uicore-sharingdialog',
 }) => {
     const { show: showError } = useAlert((error) => error, { critical: true })
diff --git a/components/table/src/stacked-table/stacked-table-cell.js b/components/table/src/stacked-table/stacked-table-cell.js
index 21802982f1..df2a9d64a5 100644
--- a/components/table/src/stacked-table/stacked-table-cell.js
+++ b/components/table/src/stacked-table/stacked-table-cell.js
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { ContentWithTitle } from './content-with-title.js'
 
+const defaultHeaderLabels = []
 export const StackedTableCell = ({
     children,
     className,
     colSpan,
     column,
     dataTest = 'dhis2-uicore-stackedtablecell',
-    headerLabels = [],
+    headerLabels = defaultHeaderLabels,
     hideTitle,
     rowSpan,
     title,
diff --git a/components/transfer/src/transfer.js b/components/transfer/src/transfer.js
index 1d6b66fa1a..862b552a25 100644
--- a/components/transfer/src/transfer.js
+++ b/components/transfer/src/transfer.js
@@ -33,6 +33,7 @@ import {
 import { TransferOption } from './transfer-option.js'
 
 const identity = (value) => value
+const defaultSelected = []
 
 export const Transfer = ({
     options,
@@ -70,7 +71,7 @@ export const Transfer = ({
     rightHeader,
     searchTerm,
     searchTermPicked,
-    selected = [],
+    selected = defaultSelected,
     selectedEmptyComponent,
     selectedWidth = '320px',
     sourceEmptyPlaceholder,

From 9436373bbe7cdab6ad7add8adef78e9b4b4661e2 Mon Sep 17 00:00:00 2001
From: Kai Vandivier <kpvandivier@gmail.com>
Date: Wed, 25 Sep 2024 15:07:28 +0200
Subject: [PATCH 6/7] fix: stable default prop references

---
 .../organisation-unit-tree.js                 | 10 ++++----
 components/pagination/src/pagination.js       | 23 +++++++++++++------
 components/popper/src/popper.js               |  4 +++-
 .../multi-select-field/multi-select-field.js  | 14 +++++------
 .../select/src/multi-select/multi-select.js   |  4 +++-
 .../single-select-field.js                    | 15 ++++++------
 6 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js
index bdb6fe87c1..c9df120ddb 100644
--- a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js
+++ b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js
@@ -11,6 +11,8 @@ import { useExpanded } from './use-expanded/index.js'
 import { useForceReload } from './use-force-reload.js'
 import { useRootOrgData } from './use-root-org-data/index.js'
 
+// A stable object to reference
+const staticArray = []
 const OrganisationUnitTree = ({
     onChange,
     roots,
@@ -19,12 +21,12 @@ const OrganisationUnitTree = ({
     dataTest = 'dhis2-uiwidgets-orgunittree',
     disableSelection,
     forceReload,
-    highlighted = [],
+    highlighted = staticArray,
     isUserDataViewFallback,
-    initiallyExpanded = [],
-    filter = [],
+    initiallyExpanded = staticArray,
+    filter = staticArray,
     renderNodeLabel = defaultRenderNodeLabel,
-    selected = [],
+    selected = staticArray,
     singleSelection,
     suppressAlphabeticalSorting,
 
diff --git a/components/pagination/src/pagination.js b/components/pagination/src/pagination.js
index 36fe56f084..e949f440ab 100644
--- a/components/pagination/src/pagination.js
+++ b/components/pagination/src/pagination.js
@@ -13,26 +13,35 @@ import { PageSummary } from './page-summary.js'
 
 const MAX_PAGE_COUNT = 2000
 
+const defaultProps = {
+    dataTest: 'dhis2-uiwidgets-pagination',
+    nextPageText: () => i18n.t('Next'),
+    pageSelectText: () => i18n.t('Page'),
+    pageSizes: ['5', '10', '20', '30', '40', '50', '75', '100'],
+    pageSizeSelectText: () => i18n.t('Items per page'),
+    pageSummaryText: getDefaultPageSummaryText,
+    previousPageText: () => i18n.t('Previous'),
+}
 const Pagination = ({
     className,
-    dataTest = 'dhis2-uiwidgets-pagination',
+    dataTest = defaultProps.dataTest,
     disabled,
     hidePageSelect,
     hidePageSizeSelect,
     hidePageSummary,
     isLastPage,
-    nextPageText = () => i18n.t('Next'),
+    nextPageText = defaultProps.nextPageText,
     onPageChange,
     onPageSizeChange,
     page,
     pageCount,
     pageLength,
-    pageSelectText = () => i18n.t('Page'),
+    pageSelectText = defaultProps.pageSelectText,
     pageSize,
-    pageSizes = ['5', '10', '20', '30', '40', '50', '75', '100'],
-    pageSizeSelectText = () => i18n.t('Items per page'),
-    pageSummaryText = getDefaultPageSummaryText,
-    previousPageText = () => i18n.t('Previous'),
+    pageSizes = defaultProps.pageSizes,
+    pageSizeSelectText = defaultProps.pageSizeSelectText,
+    pageSummaryText = defaultProps.pageSummaryText,
+    previousPageText = defaultProps.previousPageText,
     total,
 }) => {
     const { firstItem, lastItem } = getItemRange({
diff --git a/components/popper/src/popper.js b/components/popper/src/popper.js
index f8208c21d0..bc7fe7205d 100644
--- a/components/popper/src/popper.js
+++ b/components/popper/src/popper.js
@@ -15,11 +15,13 @@ const flipPlacement = (placement) => {
     return placement
 }
 
+// Stable object reference
+const staticArray = []
 const Popper = ({
     children,
     className,
     dataTest = 'dhis2-uicore-popper',
-    modifiers = [],
+    modifiers = staticArray,
     observePopperResize,
     observeReferenceResize,
     onFirstUpdate,
diff --git a/components/select/src/multi-select-field/multi-select-field.js b/components/select/src/multi-select-field/multi-select-field.js
index 8c0f0724e1..55754af711 100644
--- a/components/select/src/multi-select-field/multi-select-field.js
+++ b/components/select/src/multi-select-field/multi-select-field.js
@@ -41,7 +41,7 @@ class MultiSelectField extends React.Component {
             disabled,
             warning,
             loading,
-            selected = [],
+            selected = MultiSelectField.defaultProps.selected,
             tabIndex,
             helpText,
             validationText,
@@ -50,17 +50,17 @@ class MultiSelectField extends React.Component {
             inputWidth,
             children,
             clearable,
-            clearText = () => i18n.t('Clear'),
+            clearText = MultiSelectField.defaultProps.clearText,
             filterable,
-            filterPlaceholder = () => i18n.t('Type to filter options'),
+            filterPlaceholder = MultiSelectField.defaultProps.filterPlaceholder,
             placeholder,
             prefix,
-            empty = () => i18n.t('No data found'),
-            loadingText = () => i18n.t('Loading options'),
-            noMatchText = () => i18n.t('No options found'),
+            empty = MultiSelectField.defaultProps.empty,
+            loadingText = MultiSelectField.defaultProps.loadingText,
+            noMatchText = MultiSelectField.defaultProps.noMatchText,
             initialFocus,
             dense,
-            dataTest = 'dhis2-uiwidgets-multiselectfield',
+            dataTest = MultiSelectField.defaultProps.dataTest,
         } = this.props
 
         return (
diff --git a/components/select/src/multi-select/multi-select.js b/components/select/src/multi-select/multi-select.js
index 231291abaf..2acf55fd85 100644
--- a/components/select/src/multi-select/multi-select.js
+++ b/components/select/src/multi-select/multi-select.js
@@ -8,9 +8,11 @@ import { FilterableMenu } from './filterable-menu.js'
 import { Input } from './input.js'
 import { Menu } from './menu.js'
 
+// stable object reference
+const staticArr = []
 const MultiSelect = ({
     className,
-    selected = [],
+    selected = staticArr,
     tabIndex,
     maxHeight,
     inputMaxHeight,
diff --git a/components/select/src/single-select-field/single-select-field.js b/components/select/src/single-select-field/single-select-field.js
index 8a05b8c118..f3766e2a93 100644
--- a/components/select/src/single-select-field/single-select-field.js
+++ b/components/select/src/single-select-field/single-select-field.js
@@ -40,7 +40,7 @@ class SingleSelectField extends React.Component {
             warning,
             disabled,
             loading,
-            selected = '',
+            selected = SingleSelectField.defaultProps.selected,
             tabIndex,
             helpText,
             validationText,
@@ -49,17 +49,18 @@ class SingleSelectField extends React.Component {
             inputWidth,
             children,
             clearable,
-            clearText = () => i18n.t('Clear'),
+            clearText = SingleSelectField.defaultProps.clearText,
             filterable,
-            filterPlaceholder = () => i18n.t('Type to filter options'),
+            filterPlaceholder = SingleSelectField.defaultProps
+                .filterPlaceholder,
             placeholder,
             prefix,
-            empty = () => i18n.t('No data found'),
-            loadingText = () => i18n.t('Loading options'),
-            noMatchText = () => i18n.t('No options found'),
+            empty = SingleSelectField.defaultProps.empty,
+            loadingText = SingleSelectField.defaultProps.loadingText,
+            noMatchText = SingleSelectField.defaultProps.noMatchText,
             initialFocus,
             dense,
-            dataTest = 'dhis2-uiwidgets-singleselectfield',
+            dataTest = SingleSelectField.defaultProps.dataTest,
         } = this.props
 
         return (

From 19f8c770fa36219ea7495f5ec0f4c6211700f1aa Mon Sep 17 00:00:00 2001
From: Mozafar Haider <mozafar@dhis2.org>
Date: Wed, 25 Sep 2024 19:55:55 +0100
Subject: [PATCH 7/7] fix: add missing defaultProps for file-input-field

---
 .../src/file-input-field-with-list/file-input-field-with-list.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
index 28f4fd9b18..8903415337 100644
--- a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
+++ b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
@@ -65,6 +65,7 @@ class FileInputFieldWithList extends Component {
 
         buttonLabel: () => i18n.t('Upload a file'),
         placeholder: () => i18n.t('No file uploaded yet'),
+        removeText: () => i18n.t('Remove'),
     }
 
     render() {