IBX-9916: Removed defaultProps

src/bundle/ui-dev/src/modules/common/alert/alert.js

@@ -14,16 +14,16 @@
 
 const Alert = ({
     type,
-    title,
-    subtitle,
-    size,
-    iconName: iconNameProp,
-    iconPath,
-    showSubtitleBelow,
-    showCloseBtn,
-    onClose,
-    extraClasses,
-    children,
+    title = null,
+    subtitle = null,
+    size = 'medium',
+    iconName: iconNameProp = null,
+    iconPath = null,
+    showSubtitleBelow = false,
+    showCloseBtn = false,
+    onClose = () => {},
+    extraClasses = '',
+    children = null,
 }) => {
     const className = createCssClassNames({
         'alert ibexa-alert': true,
@@ -61,29 +61,16 @@
 
 Alert.propTypes = {
     type: PropTypes.oneOf(Object.values(ICON_NAME_MAP)).isRequired,
     title: PropTypes.string,
     subtitle: PropTypes.string,
     iconName: PropTypes.string,
     iconPath: PropTypes.string,
     showSubtitleBelow: PropTypes.bool,
     showCloseBtn: PropTypes.bool,
     onClose: PropTypes.func,
     extraClasses: PropTypes.string,
     children: PropTypes.element,
     size: PropTypes.oneOf(SIZES),
 };
 
-Alert.defaultProps = {
-    title: null,
-    subtitle: null,
-    iconName: null,
-    iconPath: null,
-    showSubtitleBelow: false,
-    showCloseBtn: false,
-    onClose: () => {},
-    extraClasses: '',
-    children: null,
-    size: 'medium',
-};
-
 export default Alert;

src/bundle/ui-dev/src/modules/common/draggable-dialog/draggable.dialog.js

@@ -6,7 +6,7 @@ import { createCssClassNames } from '@ibexa-admin-ui/src/bundle/ui-dev/src/modul
 
 export const DraggableContext = createContext();
 
-const DraggableDialog = ({ children, referenceElement, positionOffset }) => {
+const DraggableDialog = ({ children = null, referenceElement, positionOffset = () => ({ x: 0, y: 0 }) }) => {
     const rootDOMElement = getRootDOMElement();
     const containerRef = useRef();
     const dragOffsetPosition = useRef({ x: 0, y: 0 });
@@ -149,9 +149,4 @@ DraggableDialog.propTypes = {
     positionOffset: PropTypes.func,
 };
 
-DraggableDialog.defaultProps = {
-    children: null,
-    positionOffset: () => ({ x: 0, y: 0 }),
-};
-
 export default DraggableDialog;

src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js

@@ -18,13 +18,13 @@ const Dropdown = ({
     value,
     options,
     onChange,
-    small,
-    single,
-    disabled,
-    placeholder,
-    extraClasses,
-    renderSelectedItem,
-    minSearchItems,
+    small = false,
+    single = false,
+    disabled = false,
+    placeholder = null,
+    extraClasses = '',
+    renderSelectedItem = (item) => item?.label,
+    minSearchItems = MIN_SEARCH_ITEMS_DEFAULT,
 }) => {
     const Translator = getTranslator();
     const containerRef = useRef();
@@ -282,14 +282,4 @@ Dropdown.propTypes = {
     minSearchItems: PropTypes.number,
 };
 
-Dropdown.defaultProps = {
-    small: false,
-    single: false,
-    disabled: false,
-    placeholder: null,
-    extraClasses: '',
-    renderSelectedItem: (item) => item?.label,
-    minSearchItems: MIN_SEARCH_ITEMS_DEFAULT,
-};
-
 export default Dropdown;

src/bundle/ui-dev/src/modules/common/icon/icon.js

@@ -7,20 +7,20 @@ import { createCssClassNames } from '../helpers/css.class.names';
 import UrlIcon from './urlIcon';
 import InculdedIcon from './inculdedIcon';
 
-const Icon = (props) => {
+const Icon = ({ extraClasses = '', name = null, customPath = '', useIncludedIcon = false, defaultIconName = 'about-info' }) => {
     const cssClass = createCssClassNames({
         'ibexa-icon': true,
-        [props.extraClasses]: true,
+        [extraClasses]: true,
     });
 
-    const isIconIncluded = props.useIncludedIcon || isExternalInstance();
+    const isIconIncluded = useIncludedIcon || isExternalInstance();
 
     return (
         <>
             {isIconIncluded ? (
-                <InculdedIcon cssClass={cssClass} name={props.name} defaultIconName={props.defaultIconName} />
+                <InculdedIcon cssClass={cssClass} name={name} defaultIconName={defaultIconName} />
             ) : (
-                <UrlIcon cssClass={cssClass} name={props.name} customPath={props.customPath} />
+                <UrlIcon cssClass={cssClass} name={name} customPath={customPath} />
             )}
         </>
     );
@@ -34,12 +34,4 @@ Icon.propTypes = {
     defaultIconName: PropTypes.string,
 };
 
-Icon.defaultProps = {
-    customPath: null,
-    name: null,
-    extraClasses: null,
-    useIncludedIcon: false,
-    defaultIconName: 'about-info',
-};
-
 export default Icon;

src/bundle/ui-dev/src/modules/common/icon/inculdedIcon.js

@@ -97,8 +97,7 @@ const iconsMap = {
     warning: Warning,
 };
 
-const InculdedIcon = (props) => {
-    const { name, cssClass, defaultIconName } = props;
+const InculdedIcon = ({ name = 'about-info', cssClass = '', defaultIconName = 'about-info' }) => {
     const IconComponent = iconsMap[name] ?? iconsMap[defaultIconName];
 
     return <IconComponent className={cssClass} />;
@@ -110,10 +109,4 @@ InculdedIcon.propTypes = {
     defaultIconName: PropTypes.string,
 };
 
-InculdedIcon.defaultProps = {
-    cssClass: '',
-    name: 'about-info',
-    defaultIconName: 'about-info',
-};
-
 export default InculdedIcon;

src/bundle/ui-dev/src/modules/common/icon/urlIcon.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 
 import { getIconPath } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/icon.helper';
 
-const UrlIcon = (props) => {
-    const linkHref = props.customPath ?? getIconPath(props.name);
+const UrlIcon = ({ cssClass = '', name = null, customPath = null }) => {
+    const linkHref = customPath && customPath !== '' ? customPath : getIconPath(name);
 
     return (
-        <svg className={props.cssClass}>
+        <svg className={cssClass}>
             <use xlinkHref={linkHref} />
         </svg>
     );
@@ -19,10 +19,4 @@ UrlIcon.propTypes = {
     customPath: PropTypes.string,
 };
 
-UrlIcon.defaultProps = {
-    customPath: null,
-    name: null,
-    cssClass: '',
-};
-
 export default UrlIcon;

src/bundle/ui-dev/src/modules/common/input/filter.search.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { createCssClassNames } from '../../common/helpers/css.class.names';
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
-const Search = ({ onChange, placeholder, extraClasses, value }) => {
+const Search = ({ onChange, placeholder = '', extraClasses = '', value }) => {
     const Translator = getTranslator();
     const inputPlaceholder =
         placeholder || Translator.trans(/*@Desc("Search...")*/ 'search.placeholder', {}, 'ibexa_universal_discovery_widget');
@@ -24,9 +24,4 @@ Search.propTypes = {
     value: PropTypes.string.isRequired,
 };
 
-Search.defaultProps = {
-    placeholder: '',
-    extraClasses: '',
-};
-
 export default Search;

src/bundle/ui-dev/src/modules/common/pagination/pagination.button.js

@@ -1,7 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const PaginationButton = ({ label, disabled, additionalClasses, buttonAdditionalClasses, onPageChange, pageIndex }) => {
+const PaginationButton = ({
+    label = '',
+    disabled = false,
+    additionalClasses = '',
+    buttonAdditionalClasses = '',
+    onPageChange = () => {},
+    pageIndex = null,
+}) => {
     const handleClick = () => {
         if (!disabled && Number.isInteger(pageIndex)) {
             onPageChange(pageIndex);
@@ -30,13 +37,4 @@ PaginationButton.propTypes = {
     buttonAdditionalClasses: PropTypes.string,
 };
 
-PaginationButton.defaultProps = {
-    pageIndex: null,
-    label: '',
-    disabled: false,
-    additionalClasses: '',
-    buttonAdditionalClasses: '',
-    onPageChange: () => {},
-};
-
 export default PaginationButton;

src/bundle/ui-dev/src/modules/common/pagination/pagination.info.js

@@ -4,7 +4,7 @@ import { createCssClassNames } from '../helpers/css.class.names';
 
 import { getTranslator } from '../../../../../Resources/public/js/scripts/helpers/context.helper';
 
-const PaginationInfo = ({ totalCount, viewingCount, extraClasses }) => {
+const PaginationInfo = ({ totalCount, viewingCount, extraClasses = '' }) => {
     if (totalCount === 0) {
         return null;
     }
@@ -31,8 +31,4 @@ PaginationInfo.propTypes = {
     extraClasses: PropTypes.string,
 };
 
-PaginationInfo.defaultProps = {
-    extraClasses: '',
-};
-
 export default PaginationInfo;

src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.group.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import PopupMenuItem from './popup.menu.item';
 import { showItem } from './popup.menu.helper';
 
-const PopupMenuGroup = ({ items, filterText, onItemClick }) => {
+const PopupMenuGroup = ({ items = [], filterText = '', onItemClick }) => {
     const isAnyItemVisible = items.some((item) => showItem(item, filterText));
 
     if (!isAnyItemVisible) {
@@ -30,9 +30,4 @@ PopupMenuGroup.propTypes = {
     filterText: PropTypes.string,
 };
 
-PopupMenuGroup.defaultProps = {
-    items: [],
-    filterText: '',
-};
-
 export default PopupMenuGroup;

src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.item.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { showItem } from './popup.menu.helper';
 
-const PopupMenuItem = ({ item, filterText, onItemClick }) => {
+const PopupMenuItem = ({ item, filterText = '', onItemClick }) => {
     if (!showItem(item, filterText)) {
         return null;
     }
@@ -25,8 +25,4 @@ PopupMenuItem.propTypes = {
     filterText: PropTypes.string,
 };
 
-PopupMenuItem.defaultProps = {
-    filterText: '',
-};
-
 export default PopupMenuItem;

src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js

@@ -9,7 +9,16 @@ import PopupMenuGroup from './popup.menu.group';
 
 const MIN_ITEMS_LIST_HEIGHT = 150;
 
-const PopupMenu = ({ extraClasses, footer, items, onItemClick, positionOffset, referenceElement, scrollContainer, onClose }) => {
+const PopupMenu = ({
+    extraClasses = '',
+    footer = null,
+    items = [],
+    onItemClick = () => {},
+    positionOffset = () => ({ x: 0, y: 0 }),
+    referenceElement,
+    scrollContainer = getRootDOMElement(),
+    onClose = () => {},
+}) => {
     const containerRef = useRef();
     const [isRendered, setIsRendered] = useState(false);
     const [itemsListStyles, setItemsListStyles] = useState({
@@ -108,14 +117,4 @@ PopupMenu.propTypes = {
     scrollContainer: PropTypes.node,
 };
 
-PopupMenu.defaultProps = {
-    extraClasses: '',
-    footer: null,
-    items: [],
-    onClose: () => {},
-    onItemClick: () => {},
-    positionOffset: () => ({ x: 0, y: 0 }),
-    scrollContainer: getRootDOMElement(),
-};
-
 export default PopupMenu;

src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.search.js

@@ -6,7 +6,7 @@ import Icon from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/common/icon/icon
 
 const MIN_SEARCH_ITEMS_DEFAULT = 5;
 
-const PopupMenuSearch = ({ numberOfItems, filterText, setFilterText }) => {
+const PopupMenuSearch = ({ numberOfItems, filterText = '', setFilterText }) => {
     const Translator = getTranslator();
     const searchPlaceholder = Translator.trans(/*@Desc("Search...")*/ 'ibexa_popup_menu.search.placeholder', {}, 'ibexa_popup_menu');
     const updateFilterValue = (event) => setFilterText(event.target.value);
@@ -56,8 +56,4 @@ PopupMenuSearch.propTypes = {
     filterText: PropTypes.string,
 };
 
-PopupMenuSearch.defaultProps = {
-    filterText: '',
-};
-
 export default PopupMenuSearch;

src/bundle/ui-dev/src/modules/common/popup/popup.component.js

@@ -23,20 +23,20 @@ const MODAL_SIZE_CLASS = {
 
 const Popup = ({
     isVisible,
-    onClose,
+    onClose = null,
     children,
-    title,
-    subtitle,
-    hasFocus,
-    noKeyboard,
+    title = null,
+    subtitle = null,
+    hasFocus = true,
+    noKeyboard = false,
     actionBtnsConfig,
-    size,
-    noHeader,
-    noFooter,
-    noCloseBtn,
-    extraClasses,
-    showTooltip,
-    subheader,
+    size = 'large',
+    noHeader = false,
+    noFooter = false,
+    noCloseBtn = false,
+    extraClasses = '',
+    showTooltip = true,
+    subheader = null,
 }) => {
     const rootDOMElement = getRootDOMElement();
     const modalRef = useRef(null);
@@ -198,19 +198,4 @@ Popup.propTypes = {
     subheader: PropTypes.node,
 };
 
-Popup.defaultProps = {
-    hasFocus: true,
-    noKeyboard: false,
-    onClose: null,
-    size: 'large',
-    noHeader: false,
-    noFooter: false,
-    noCloseBtn: false,
-    extraClasses: '',
-    title: null,
-    subtitle: null,
-    showTooltip: true,
-    subheader: null,
-};
-
 export default Popup;