diginet-core-ui 1.3.87 → 1.3.88

package/components/button/icon.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -57,12 +58,13 @@ const alphaArr = {
   focus: 0.2,
   active: 0.3
 };
-const alphaLoading = 0.2;
-// customIconSize calculated based on design size
+const alphaLoading = 0.2; // customIconSize calculated based on design size
 // Button size <= 24 => icon size = Button size - 8
 // Button size > 24 && <= 32 => icon size = Button size - 12
 // Button size > 32 => icon size = Button size - 16
+
 const customIconSize = width => width <= 24 ? width - 8 : width <= 32 ? width - 12 : width - 16;
+
 const IconLoadingView = iconSize => {
   return jsx(CircularProgress, {
     size: 'extraSmall',
@@ -72,6 +74,7 @@ const IconLoadingView = iconSize => {
     width: parseInt(iconSize)
   });
 };
+
 const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -92,6 +95,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width
 }, reference) => {
   var _sizeMap$get, _sizeMap$get2;
+
   const ref = useRef(null);
   const rippleRef = useRef(null);
   const buttonSize = ((_sizeMap$get = sizeMap.get(size)) === null || _sizeMap$get === void 0 ? void 0 : _sizeMap$get.buttonSize) || '40px';
@@ -99,19 +103,25 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const isViewTypeGhost = viewType === 'ghost';
   const color = colors[colorProp] || colorProp;
   colorHover = colors[colorHover] || colorHover;
+
   const _ButtonRootCSS = ButtonRootCSS(circular, colorHover, color, name);
+
   const _ButtonSizeCSS = ButtonSizeCSS(width, height, buttonSize, iconSize);
+
   const _ButtonIconCSS = ButtonIconCSS(iconSize);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
+
   const _onClick = event => {
     event.persist();
     onClick && event.stopPropagation();
@@ -119,6 +129,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!isViewTypeGhost) rippleRef.current.start(event);
     onClick && onClick(event);
   };
+
   return useMemo(() => {
     return jsx("button", {
       css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
@@ -143,6 +154,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }));
   }, [children, circular, className, colorProp, colorHover, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width]);
 }));
+
 const ButtonIconCSS = iconSize => css`
     ${flexRow};
     ${positionRelative};
@@ -152,6 +164,7 @@ const ButtonIconCSS = iconSize => css`
     ${parseWidthHeight(iconSize)};
     ${parseMinWidthHeight(iconSize)};
 `;
+
 const ButtonDisabledCSS = `
     cursor: not-allowed !important;
     color: ${systemDisabled} !important;
@@ -167,6 +180,7 @@ const ButtonDisabledCSS = `
         background-color: transparent !important;
     }
 `;
+
 const ButtonSizeCSS = (width, height, buttonSize, iconSize) => css`
     ${parseWidthHeight(width || buttonSize, height || buttonSize)};
     ${parseMinWidthHeight(width || buttonSize, height || buttonSize)};
@@ -175,6 +189,7 @@ const ButtonSizeCSS = (width, height, buttonSize, iconSize) => css`
         ${parseMinWidthHeight(width || iconSize, height || iconSize)};
     }
 `;
+
 const ButtonRootCSS = (circular, colorHover, color, name) => css`
     ${displayInlineFlex};
     ${positionRelative};
@@ -289,6 +304,7 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
         }
     }
 `;
+
 ButtonIcon.defaultProps = {
   circular: false,
   className: '',
@@ -302,55 +318,70 @@ ButtonIcon.defaultProps = {
 ButtonIcon.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** If `true`, component is circular. */
   circular: PropTypes.bool,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** The color of the component. */
   color: PropTypes.string,
+
   /** Custom hover color for button with color 'default'. */
   colorHover: PropTypes.string,
+
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
+
   /** Height oof the component. */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** If `true`, the loading indicator is shown. */
   loading: PropTypes.bool,
+
   /** Callback fired when the component is clicked. */
   onClick: PropTypes.func,
+
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** If `true`, icon has view box. */
   viewBox: PropTypes.bool,
+
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
+
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: ref
 };

package/components/button/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { CircularProgress, Icon, Typography } from "./..";
@@ -35,31 +36,42 @@ export const getRippleColor = (color, viewType, colors) => {
   if (!isColor(color) && !isColorName(color)) {
     let level = 3;
     let name = color;
+
     if (name === 'primary') {
       name = 'formal';
     }
+
     const isSystemColor = colors[name + level];
+
     if (isSystemColor) {
       if (viewType === 'filled') {
         level = 7;
       }
+
       return colors[name + level];
     }
   }
+
   if (isColorName(color)) {
     return fade(isColorName(color), 0.5);
   }
+
   const colorType = detectColor(color);
+
   switch (colorType) {
     case 'hex':
     case 'hexa':
       return rgbaToHexA(fade(color, 0.5));
+
     case 'rgb':
       return rgbToHex(fade(color, 0.5));
+
     case 'rgba':
       return rgbaToHexA(fade(color, 0.5));
+
     case 'hsl':
       return rgbToHex(hslToRgb(fade(color, 0.5)));
+
     case 'hsla':
       return rgbaToHexA(hslToRgb(fade(color, 0.5)));
   }
@@ -116,17 +128,24 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const color = colors[colorProp] || colorProp;
   const isViewTypeLink = viewType === 'link';
   const TagName = href ? 'a' : 'button';
+
   const _ButtonRootCSS = ButtonRootCSS(color);
+
   const _ButtonIcon = ButtonIconCSS(endIcon, label, startIcon, iconMarginSize, iconSize);
+
   const _ButtonTextCSS = ButtonTextCSS(loading, iconMarginSize);
+
   const _ButtonSizeCSS = ButtonSizeCSS(paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, iconSize);
+
   const _onClick = e => {
     if (href) e.preventDefault(); //Prevent open link when click
+
     onClick && stopPropagation && e.stopPropagation();
     if (disabled || loading) return;
     if (!isViewTypeLink) rippleRef.current.start(e);
     onClick && onClick(e);
   };
+
   useEffect(() => {
     if (href) {
       const qs = urlParams ? '?' + new URLSearchParams(urlParams).toString() : '';
@@ -137,15 +156,17 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
   const StartIcon = useMemo(() => {
     let node = startIcon;
+
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: node,
@@ -159,6 +180,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: 'DGN-UI-Button-Start-Icon'
       }, node);
     }
+
     return jsx("span", {
       css: _ButtonIcon,
       className: 'DGN-UI-Button-Custom-Start-Icon'
@@ -166,6 +188,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [startIcon, size]);
   const EndIcon = useMemo(() => {
     let node = endIcon;
+
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: node,
@@ -179,11 +202,13 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: 'DGN-UI-Button-End-Icon'
       }, node);
     }
+
     return jsx("span", {
       css: _ButtonIcon,
       className: 'DGN-UI-Button-Custom-End-Icon'
     }, node);
   }, [endIcon, size]);
+
   const iconLoading = () => {
     return jsx(CircularProgress, {
       className: 'DGN-UI-Button-Loading',
@@ -192,25 +217,29 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       size: parseInt(iconSize)
     });
   };
+
   return useMemo(() => {
     // 1. Có StartIcon => thay StartIcon
     // 2. Có EndIcon => thay EndIcon
     // 3. Có StartIcon + EndIcon => thay StartIcon
     // 4. Không có Icon => hiện thêm icon loading ở đầu
-
     let start = startIcon ? StartIcon : jsx("span", {
       className: 'no-icon'
     });
     let end = endIcon ? EndIcon : null;
+
     if (loading) {
       if (startIcon) start = iconLoading();
       if (endIcon) end = iconLoading();
+
       if (startIcon && endIcon) {
         start = iconLoading();
         end = EndIcon;
       }
+
       if (!startIcon && !endIcon) start = iconLoading();
     }
+
     return jsx(TagName, {
       css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
       ref: ref,
@@ -232,6 +261,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : null);
   }, [children, className, colorProp, disabled, endIcon, href, id, label, loading, onClick, size, startIcon, stopPropagation, type, urlParams, viewType, urlState]);
 }));
+
 const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize) => css`
     ${flexRow};
     ${itemsCenter};
@@ -249,11 +279,13 @@ const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize) => c
         ${parseWidthHeight(iconSize)};
     }
 `;
+
 const ButtonTextCSS = (loading, iconMarginSize) => css`
     white-space: nowrap;
     color: inherit;
     margin: 0 ${loading ? iconMarginSize : 0};
 `;
+
 const ButtonDisabledCSS = css`
     cursor: not-allowed !important;
     color: ${systemDisabled} !important;
@@ -269,6 +301,7 @@ const ButtonDisabledCSS = css`
         background-color: transparent !important;
     }
 `;
+
 const ButtonSizeCSS = (paddingSize, minHeightSize, minHeightSizeLink, outlinedPaddingSize, iconSize) => css`
     padding: ${paddingSize};
     ${parseMinWidthHeight('max-content', minHeightSize)};
@@ -284,6 +317,7 @@ const ButtonSizeCSS = (paddingSize, minHeightSize, minHeightSizeLink, outlinedPa
         ${parseMinWidth(0)};
     }
 `;
+
 const ButtonRootCSS = color => css`
     ${displayInlineFlex};
     ${itemsCenter};
@@ -399,6 +433,7 @@ const ButtonRootCSS = color => css`
         }
     }
 `;
+
 Button.defaultProps = {
   className: '',
   color: 'default',
@@ -412,45 +447,59 @@ Button.defaultProps = {
 Button.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** The color of the component. */
   color: PropTypes.string,
+
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
+
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed after the children. */
   endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
   /** The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. */
   href: PropTypes.string,
+
   /** The content of the component. */
   label: PropTypes.string,
+
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
   labelProps: PropTypes.object,
+
   /** If `true`, the loading indicator is shown. */
   loading: PropTypes.bool,
+
   /** Callback fired when the component is clicked. */
   onClick: PropTypes.func,
+
   /** The size of the component. */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
+
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed before the children. */
   startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
   /** Query params pass to url. */
   urlParams: PropTypes.object,
+
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: ref
 };

package/components/button/more.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -37,32 +38,40 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const [openState, setOpenState] = useState(false);
   const [iconState, setIconState] = useState(false);
+
   const _PopoverCSS = PopoverCSS(isOptionFull);
+
   const openPopover = () => {
     setOpenState(true);
   };
+
   const closePopover = () => {
     setOpenState(false);
   };
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
+
   const renderOptions = () => {
     return options.map((item, idx) => {
       if ( /*#__PURE__*/isValidElement(item)) return item;else {
         const icon = item === null || item === void 0 ? void 0 : item.icon;
         const label = item === null || item === void 0 ? void 0 : item.label;
+
         const action = () => {
           closePopover();
           if (typeof (item === null || item === void 0 ? void 0 : item.action) === 'function') item === null || item === void 0 ? void 0 : item.action();
         };
+
         if (icon && !iconState) setIconState(true);
         return isOptionFull ? jsx("button", {
           key: idx,
@@ -90,6 +99,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     });
   };
+
   return useMemo(() => {
     return jsx(Popover, {
       css: _PopoverCSS,
@@ -119,10 +129,12 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, renderOptions());
   }, [buttonProps, className, disabled, id, options, optionType, popoverProp, style, iconState, openState]);
 }));
+
 const PopoverCSS = isOptionFull => css`
     ${isOptionFull ? flexCol : flexRow};
     padding: ${isOptionFull ? spacing([1, 0]) : spacing([0, 2])};
 `;
+
 const OptionFullCSS = css`
     ${flexRow};
     ${itemsCenter};
@@ -156,37 +168,45 @@ ButtonMore.defaultProps = {
 ButtonMore.propTypes = {
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) applied to the main `ButtonIcon`. */
   buttonProps: PropTypes.object,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
+
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography) applied to the `Typography` label. */
   labelProp: PropTypes.object,
+
   /** Option(s) in popover. */
   option: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     icon: PropTypes.string,
     action: PropTypes.func
   })),
+
   /** The variant of option's type. */
   optionType: PropTypes.oneOf(['full', 'icon']),
+
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/overplay-popover) applied to the main `Popover`. */
   popoverProp: PropTypes.object,
+
   /** Style inline of component. */
   style: PropTypes.object,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: ref
 };

package/components/button/ripple-effect.js

@@ -1,5 +1,7 @@
 /* eslint-disable react/prop-types */
+
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx, keyframes } from '@emotion/core';
 import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useState } from 'react';
@@ -12,15 +14,18 @@ const {
     }
   }
 } = useTheme();
+
 const useDebouncedRippleCleanUp = (rippleCount, duration, cleanUpFunction) => {
   useLayoutEffect(() => {
     if (rippleCount > 0) {
       const bounce = setTimeout(() => cleanUpFunction(), duration);
       return () => clearTimeout(bounce);
     }
+
     return undefined;
   }, [rippleCount, duration, cleanUpFunction]);
 };
+
 const Ripple = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   duration = 850,
   color = systemWhite,
@@ -31,7 +36,9 @@ const Ripple = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useDebouncedRippleCleanUp(rippleArray.length, duration, () => {
     setRippleArray([]);
   });
+
   const _RippleChildCSS = RippleChildCSS(circular, color, duration);
+
   const addRipple = event => {
     const rippleContainer = event.currentTarget.getBoundingClientRect();
     const size = rippleContainer.width > rippleContainer.height ? rippleContainer.width : rippleContainer.height;
@@ -44,6 +51,7 @@ const Ripple = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
     setRippleArray(prevState => [...prevState, newRippleArray]);
   };
+
   useImperativeHandle(ref, () => ({
     start: addRipple
   }));
@@ -78,6 +86,7 @@ const RippleContainerCSS = css`
     inset: 0px;
     border-radius: inherit;
 `;
+
 const RippleChildCSS = (circular, color, duration) => css`
     ${positionAbsolute};
     ${circular ? borderRadius50 : borderRadius100};
@@ -86,4 +95,5 @@ const RippleChildCSS = (circular, color, duration) => css`
     background-color: ${color};
     animation: ${rippleKeyframes} ${duration}ms;
 `;
+
 export default Ripple;

package/components/card/body.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -17,10 +18,11 @@ const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -40,10 +42,13 @@ CardBody.defaultProps = {
 CardBody.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
   className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
+
   /** The title of the component's header. */
   title: PropTypes.string
 };