@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/v1/Accordion/Accordion.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
+import { Accordion_defaultProps } from './props/defaultProps';
+import { Accordion_propTypes } from './props/propTypes';
+export default function Accordion(props) {
+  const {
+    className,
+    height,
+    unMount,
+    disableInternalState,
+    selectedItem: propSelectedItem,
+    a11y,
+    dataId,
+    dataSelectorId,
+    onSelect,
+    children
+  } = props;
+  const {
+    role,
+    ariaExpanded,
+    ariaHaspopup
+  } = a11y;
+  const [selectedItem, setSelectedItem] = useState(propSelectedItem);
+
+  function selectMenu(selectedItem) {
+    if (onSelect) {
+      onSelect(selectedItem);
+    }
+
+    !disableInternalState && setSelectedItem(selectedItem);
+  }
+
+  useEffectCallOnlyAfterState(() => {
+    if (!disableInternalState) {
+      setSelectedItem(propSelectedItem);
+    }
+  }, [propSelectedItem]);
+  let renderChildren = React.Children.map(children, child => {
+    if (child) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        selectedItem: disableInternalState ? propSelectedItem : selectedItem,
+        selectMenu: selectMenu,
+        unMount: unMount
+      });
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: className ? className : '',
+    style: {
+      height
+    },
+    role: role,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHaspopup,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-selector-id": dataSelectorId
+  }, renderChildren);
+}
+Accordion.propTypes = Accordion_propTypes;
+Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
+//   Accordion.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Accordion/AccordionItem.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AccordionItem_defaultProps } from './props/defaultProps';
+import { AccordionItem_propTypes } from './props/propTypes';
+import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
+import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+export default function AccordionItem(props) {
+  let {
+    id,
+    selectMenu,
+    className,
+    children,
+    dataId,
+    dataSelectorId,
+    unMount,
+    unMountItem,
+    a11y,
+    innerClass,
+    equalityCheck,
+    selectedItem
+  } = props;
+  unMountItem = unMountItem !== undefined ? unMountItem : unMount;
+  let {
+    role
+  } = a11y;
+
+  function equalityChecking() {
+    return equalityCheck ? equalityCheck(id, selectedItem) : selectedItem == id;
+  }
+
+  function handleSelectMenu() {
+    selectMenu(id);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: className ? className : '',
+    "data-id": dataId,
+    "data-test-id": dataId,
+    role: role,
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: innerClass ? innerClass : '',
+    onClick: handleSelectMenu
+  }, children[0]), unMountItem ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: "slideDown",
+    isActive: equalityChecking()
+  }, children[1]) : /*#__PURE__*/React.createElement(VelocityAnimation, {
+    name: "slideDown",
+    isActive: equalityChecking()
+  }, children[1]));
+}
+AccordionItem.propTypes = AccordionItem_propTypes;
+AccordionItem.defaultProps = AccordionItem_defaultProps; // if (__DOCS__) {
+//   AccordionItem.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Accordion/index.js

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion';
+export { default as AccordionItem } from './AccordionItem';

package/es/v1/Accordion/props/defaultProps.js

@@ -0,0 +1,12 @@
+export const Accordion_defaultProps = {
+  unMount: true,
+  disableInternalState: false,
+  a11y: {},
+  dataId: 'Accordion',
+  dataSelectorId: 'accordion'
+};
+export const AccordionItem_defaultProps = {
+  a11y: {},
+  dataId: 'AccordionItem',
+  dataSelectorId: 'accordionItem'
+};

package/es/v1/Accordion/props/propTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+export const Accordion_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableInternalState: PropTypes.bool,
+  height: PropTypes.string,
+  onSelect: PropTypes.func,
+  selectedItem: PropTypes.string.isRequired,
+  unMount: PropTypes.bool,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaExpanded: PropTypes.bool,
+    ariaHaspopup: PropTypes.bool
+  })
+};
+export const AccordionItem_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  equalityCheck: PropTypes.func,
+  id: PropTypes.string,
+  selectMenu: PropTypes.func,
+  selectedItem: PropTypes.string,
+  unMount: PropTypes.bool,
+  unMountItem: PropTypes.bool,
+  innerClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  })
+};

package/es/v1/Animation/Animation.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { CSSTransition } from 'react-transition-group';
+import { animationStyle } from './utils';
+export default function Animation(props) {
+  let {
+    name,
+    enterDuration,
+    exitDuration,
+    children,
+    isActive,
+    unmountOnExit,
+    onEntered = () => {},
+    onExit = () => {},
+    delayClassName = null
+  } = props;
+  let newClassNames = delayClassName ? Object.assign({}, animationStyle[name], {
+    exit: `${delayClassName} ${animationStyle[name].exit}`
+  }) : animationStyle[name];
+  return /*#__PURE__*/React.createElement(CSSTransition, {
+    classNames: newClassNames && newClassNames,
+    in: isActive,
+    appear: true,
+    enter: true,
+    exit: true,
+    mountOnEnter: false,
+    unmountOnExit: unmountOnExit,
+    timeout: {
+      enter: enterDuration,
+      exit: exitDuration
+    },
+    onEntered: onEntered,
+    onExit: onExit
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
+}
+Animation.propTypes = propTypes;
+Animation.defaultProps = defaultProps; // if (__DOCS__) {
+//   Animation.docs = {
+//     componentGroup: 'Animation',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/v1/Animation/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  name: 'fadeIn',
+  unmountOnExit: true
+};

package/es/v1/Animation/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  delayClassName: PropTypes.string,
+  enterDuration: PropTypes.number,
+  exitDuration: PropTypes.number,
+  isActive: PropTypes.bool,
+  name: PropTypes.oneOf(['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none']),
+  onEntered: PropTypes.func,
+  onExit: PropTypes.func,
+  unmountOnExit: PropTypes.bool
+};

package/es/v1/Animation/utils.js

@@ -0,0 +1,83 @@
+import style from '../../common/transition.module.css';
+export const animationStyle = {
+  zoomIn: {
+    enter: style.zoomInEnter,
+    enterActive: style.zoomInEnterActive,
+    enterDone: style.zoomInEnterActive,
+    exit: style.zoomInLeave,
+    exitActive: style.zoomInLeaveActive,
+    exitDone: style.zoomInLeaveActive,
+    appear: style.zoomInEnter,
+    appearActive: style.zoomInEnterActive
+  },
+  scaleIn: {
+    enter: style.scaleInEnter,
+    enterActive: style.scaleInEnterActive,
+    enterDone: style.scaleInEnterActive,
+    exit: style.scaleInLeave,
+    exitActive: style.scaleInLeaveActive,
+    exitDone: style.scaleInLeaveActive,
+    appear: style.scaleInEnter,
+    appearActive: style.scaleInEnterActive
+  },
+  fadeIn: {
+    enter: style.fadeInEnter,
+    enterActive: style.fadeInEnterActive,
+    enterDone: style.fadeInEnterActive,
+    exit: style.fadeInLeave,
+    exitActive: style.fadeInLeaveActive,
+    exitDone: style.fadeInLeaveActive,
+    appear: style.fadeInEnter,
+    appearActive: style.fadeInEnterActive
+  },
+  slideLeft: {
+    enter: style.slideLeftEnter,
+    enterActive: style.slideLeftEnterActive,
+    enterDone: style.slideLeftEnterActive,
+    exit: style.slideLeftLeave,
+    exitActive: style.slideLeftLeaveActive,
+    exitDone: style.slideLeftLeaveActive,
+    appear: style.slideLeftEnter,
+    appearActive: style.slideLeftEnterActive
+  },
+  slideDown: {
+    enter: style.slideDownEnter,
+    enterActive: style.slideDownEnterActive,
+    enterDone: style.slideDownEnterActive,
+    exit: style.slideDownLeave,
+    exitActive: style.slideDownLeaveActive,
+    exitDone: style.slideDownLeaveActive,
+    appear: style.slideDownEnter,
+    appearActive: style.slideDownEnterActive
+  },
+  skewIn: {
+    enter: style.skewInEnter,
+    enterActive: style.skewInEnterActive,
+    enterDone: style.skewInEnterActive,
+    exit: style.skewInLeave,
+    exitActive: style.skewInLeaveActive,
+    exitDone: style.skewInLeaveActive,
+    appear: style.skewInEnter,
+    appearActive: style.skewInEnterActive
+  },
+  none: {
+    enter: style.noneEnter,
+    enterActive: style.noneEnterActive,
+    enterDone: style.noneEnterActive,
+    exit: style.noneLeave,
+    exitActive: style.noneLeaveActive,
+    exitDone: style.noneLeaveActive,
+    appear: style.noneEnter,
+    appearActive: style.noneEnterActive
+  },
+  default: {
+    enter: style.defaultEnter,
+    enterActive: style.defaultEnterActive,
+    enterDone: style.defaultEnterActive,
+    exit: style.defaultLeave,
+    exitActive: style.defaultLeaveActive,
+    exitDone: style.defaultLeaveActive,
+    appear: style.defaultEnter,
+    appearActive: style.defaultEnterActive
+  }
+};

package/es/v1/AppContainer/AppContainer.js

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef, useLayoutEffect } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '../Layout';
+import Tooltip from '../Tooltip/Tooltip';
+import '../../common/basic.module.css';
+import '@zohodesk/variables/assets/colorVariables.module.css';
+import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/variables/assets/sizeVariables.module.css';
+import '@zohodesk/variables/assets/fontsizeVariables.module.css';
+import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/variables/assets/transitionVariables.module.css';
+import '@zohodesk/variables/assets/no_transitionVariables.module.css';
+import '../../common/a11y.module.css';
+import '../../common/boxShadow.module.css';
+import style from '../../AppContainer/AppContainer.module.css';
+import { getLibraryConfig, setLibraryConfig } from '../../Provider/Config';
+export default function AppContainer(props) {
+  let {
+    className,
+    children,
+    tagName,
+    dataId,
+    dataSelectorId,
+    tooltipClass,
+    tooltipParentClass,
+    needTooltip,
+    customProps,
+    eleRef
+  } = props;
+  let {
+    ContainerProps = {},
+    TooltipProps = {},
+    ExtraProps = {}
+  } = customProps;
+  const tooltipRef = useRef(null);
+  const containerElement = useRef(null);
+  const timer = useRef(null);
+  const tooltipDebounce = useRef(getLibraryConfig('tooltipDebounce'));
+  useLayoutEffect(() => {
+    setLibraryConfig({
+      getTooltipContainer: () => containerElement.current
+    });
+  }, []);
+
+  function mouseOverDispatch(e) {
+    if (tooltipRef.current) {
+      tooltipRef.current.handleOver(e, containerElement.current);
+    }
+  }
+
+  function removeTimeout() {
+    if (timer.current) {
+      timer.current = clearTimeout(timer.current);
+    }
+  }
+
+  function handleOver(e) {
+    if (timer.current) {
+      timer.current = clearTimeout(timer.current);
+    }
+
+    timer.current = setTimeout(() => mouseOverDispatch(e), tooltipDebounce.current);
+  }
+
+  function getContainerRef(ref) {
+    containerElement.current = ref;
+    eleRef && eleRef(ref);
+  }
+
+  function setTooltipRef(ref) {
+    tooltipRef.current = ref;
+  }
+
+  useEffect(() => {
+    if (containerElement.current && needTooltip) {
+      containerElement.current.addEventListener('mouseover', handleOver, false);
+      containerElement.current.addEventListener('mouseout', removeTimeout, false);
+      tooltipRef.current.observeElement();
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (containerElement.current && needTooltip) {
+        containerElement.current.removeEventListener('mouseover', handleOver, false);
+        containerElement.current.addEventListener('mouseout', removeTimeout, false);
+        tooltipRef.current.unObserveElement();
+        setLibraryConfig({
+          getTooltipContainer: () => null
+        });
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+    className: `${style.container} ${className}`,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId,
+    tagName: tagName,
+    eleRef: getContainerRef,
+    ...ContainerProps,
+    ...ExtraProps
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", { ...ExtraProps,
+    className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
+    "data-id": `${dataId}_tooltip`,
+    "data-test-id": `${dataId}_tooltip`,
+    "data-selector-id": `${dataSelectorId}_tooltip`
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    ref: setTooltipRef,
+    customClass: tooltipClass,
+    ...TooltipProps
+  })) : null);
+}
+AppContainer.propTypes = propTypes;
+AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
+//   AppContainer.docs = {
+//     componentGroup: 'Template',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/AppContainer/props/defaultProps.js

@@ -0,0 +1,10 @@
+export const defaultProps = {
+  dataId: 'AppContainer',
+  tagName: 'div',
+  className: '',
+  tooltipClass: '',
+  tooltipParentClass: '',
+  customProps: {},
+  dataSelectorId: 'appContainer',
+  needTooltip: true
+};

package/es/v1/AppContainer/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  eleRef: PropTypes.func,
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  needTooltip: PropTypes.bool,
+  tooltipClass: PropTypes.string,
+  tooltipParentClass: PropTypes.string,
+  customProps: PropTypes.shape({
+    ContainerProps: PropTypes.object,
+    TooltipProps: PropTypes.object,
+    ExtraProps: PropTypes.object
+  })
+};

package/es/v1/Avatar/Avatar.js

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getInitial } from '../../utils/getInitial';
+import AvatarSize from '../../Provider/AvatarSize';
+import style from '../../Avatar/Avatar.module.css';
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+4. team pass name as lastName and pass pattern via prop
+*/
+
+function Avatar(props) {
+  let {
+    src,
+    name,
+    size,
+    palette,
+    onClick,
+    title,
+    shape,
+    needTitle,
+    dataId,
+    initial,
+    needBorder,
+    borderOnActive,
+    borderOnHover,
+    textPalette,
+    customClass,
+    alternateSrc,
+    isAnimate,
+    dataSelectorId,
+    customProps,
+    needInnerBorder,
+    needDefaultBorder
+  } = props;
+  let {
+    AvatarProps = {}
+  } = customProps;
+  const [isLoaded, setLoaded] = useState(false);
+
+  const putInvalidImageURLJSON = () => {
+    let _validImgArr = [...Avatar.validImageURLs];
+    let _invalidImgArr = [...Avatar.invalidImageURLs]; // if (alternateSrc) {
+    //   _validImgArr.push(alternateSrc);
+    // }
+
+    const validIndex = _validImgArr.indexOf(src);
+
+    if (validIndex !== -1) {
+      _validImgArr.splice(validIndex, 1);
+    }
+
+    _invalidImgArr.push(src);
+
+    Avatar.invalidImageURLs = _invalidImgArr;
+    Avatar.validImageURLs = _validImgArr;
+    setLoaded(isLoaded => !isLoaded);
+  };
+
+  const putValidImageURLJSON = () => {
+    const validImgArr = Avatar.validImageURLs;
+    const invalidImgArr = Avatar.invalidImageURLs;
+
+    if (src && validImgArr.indexOf(src) === -1 && invalidImgArr.indexOf(src) === -1) {
+      let _validImgArr = [...validImgArr];
+
+      _validImgArr.push(src);
+
+      Avatar.validImageURLs = _validImgArr;
+      setLoaded(isLoaded => !isLoaded);
+    }
+  };
+  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
+
+
+  const getInitialByFullName = function () {
+    let fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    fullName = (fullName || '').trim();
+    let nameList = fullName.split(' ');
+
+    if (nameList.length === 1) {
+      return getInitial('', nameList[0]);
+    }
+
+    return getInitial(nameList[0], nameList[1]);
+  };
+
+  useEffectCallOnlyAfterState(() => {
+    setLoaded(isLoaded => !isLoaded);
+  }, [src]);
+  let textStyle = textPalette ? style[textPalette] : palette === 'secondary' ? style.white : style.black;
+  let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
+  initial = initial || getInitialByFullName(name);
+  let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1; //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
+
+  let showAvatar = src && !isInvalidImageList;
+  let showInitial = !showAvatar || showAvatar && isInvalidImageList;
+  const showAlternateAvatar = alternateSrc ? showInitial : false;
+  let border = borderOnHover || onClick;
+  let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
+  let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
+  borderStyle = showAlternateAvatar ? '' : borderStyle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
+    "data-title": needTitle ? title ? title : name : null,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    onClick: onClick,
+    "data-selector-id": dataSelectorId,
+    tabIndex: onClick ? 0 : null,
+    ...AvatarProps
+  }, showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
+    className: `${style.initial}`,
+    "data-id": `${dataId}_AvatarInitial`,
+    "data-test-id": `${dataId}_AvatarInitial`,
+    "data-selector-id": `${dataSelectorId}_AvatarInitial`
+  }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+    className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
+    "data-id": `${dataId}_AvatarImg`,
+    "data-test-id": `${dataId}_AvatarImg`,
+    "data-selector-id": `${dataSelectorId}_AvatarImg`,
+    name: name,
+    onError: putInvalidImageURLJSON,
+    onLoad: putValidImageURLJSON,
+    src: showAlternateAvatar ? alternateSrc : src,
+    alt: name
+  }), showDefaultBorder ? null : /*#__PURE__*/React.createElement("span", {
+    className: `${style.shadow} ${textStyle} `
+  })));
+}
+
+export default Avatar;
+Avatar.defaultProps = defaultProps;
+Avatar.propTypes = propTypes;
+Avatar.invalidImageURLs = [];
+Avatar.validImageURLs = [];

package/es/v1/Avatar/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  needTitle: true,
+  palette: 'primary',
+  shape: 'circle',
+  size: 'medium',
+  src: null,
+  title: null,
+  dataId: 'Avatar',
+  needBorder: true,
+  borderOnActive: false,
+  borderOnHover: false,
+  customProps: {},
+  isAnimate: true,
+  dataSelectorId: 'avatar',
+  needInnerBorder: false,
+  needDefaultBorder: false
+};

package/es/v1/Avatar/props/propTypes.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  initial: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  needBorder: PropTypes.bool,
+  needTitle: PropTypes.bool,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
+  shape: PropTypes.oneOf(['circle', 'square']),
+  size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  title: PropTypes.string,
+  customClass: PropTypes.string,
+  alternateSrc: PropTypes.string,
+  borderOnActive: PropTypes.bool,
+  borderOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    AvatarProps: PropTypes.object
+  }),
+  isAnimate: PropTypes.bool,
+  needInnerBorder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool
+};