@zohodesk/components 1.0.0-alpha-252 → 1.0.0-alpha-254

package/README.md

@@ -32,6 +32,12 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-253
+
+ - **Tabs, Tooltip** - If condition check added  to reduce murphy error logs.
+
+ - `Accesssility`- Screen Reader support for some components.
+
 # 1.0.0-alpha-252
 
  - **Select,GroupSelect,SelectWithAvatar,SelectWithIcon,MultiSelect,MultiSelectWithAvatar** - Initial Loader and Scroll End Loader added.

package/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_butterflyblue);
 }

package/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #45a159;
 }

package/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #ff801f;
 }

package/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e94f4f;
 }

package/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #d79835;
 }

package/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_primary);
 }

package/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #26a942;
 }

package/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e57717;
 }

package/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_brightRed);
 }

package/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: var(--dot_white);
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e8b923;
 }

package/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: var(--dot_butterflyblue);
 }

package/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #45a159;
 }

package/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #ff801f;
 }

package/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #e94f4f;
 }

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css

@@ -39,4 +39,7 @@
 	
 	/* dropdown */
 	--zdt_dropdown_darkheading_text: #999;
+	
+	/* focusscope */
+	--zdt_a11y_focusScope_focus_border: #d79835;
 }

package/es/AppContainer/AppContainer.js

@@ -12,6 +12,7 @@ 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 style from './AppContainer.module.css';
 import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {

package/es/Avatar/Avatar.js

@@ -154,7 +154,8 @@ export default class Avatar extends React.Component {
       name: name,
       onError: this.putInvalidImageURLJSON,
       onLoad: this.putValidImageURLJSON,
-      src: showAlternateAvatar ? alternateSrc : src
+      src: showAlternateAvatar ? alternateSrc : src,
+      alt: name
     }), !isValidImageList && !showAlternateAvatar ? null : /*#__PURE__*/React.createElement("span", {
       className: `${style.shadow} ${textStyle} `
     })));

package/es/Button/Button.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -24,7 +25,8 @@ export default class Button extends React.Component {
       needAppearance,
       getRef,
       title,
-      customClass
+      customClass,
+      customProps
     } = this.props;
     let {
       customButton = '',
@@ -35,7 +37,7 @@ export default class Button extends React.Component {
     let statusLower = status.toLowerCase();
     let classList = needAppearance ? `${style[paletteLower]} ${rounded ? style.rounded : ''} ${!children ? style[size.toLowerCase()] : `${style[`${size}Btn`]} 
              ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`} ${statusLower !== 'none' ? style.loader : ''}` : `${style.default}`;
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/React.createElement("button", _extends({
       className: `${customButton} ${classList} ${isBold ? style.bold : ''}  `,
       "data-id": disabled ? `${dataId}_disabled` : dataId,
       disabled: disabled || statusLower === 'loading',
@@ -43,7 +45,7 @@ export default class Button extends React.Component {
       "data-title": title,
       type: "button",
       ref: getRef
-    }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+    }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
       className: style.overlay
     }, /*#__PURE__*/React.createElement("div", {
       className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`] ? style[`${size}loading`] : ''}` : style.success}`

package/es/Card/props/defaultProps.js

@@ -9,7 +9,6 @@ export const Card_defaultProps = {
 export const CardContent_defaultProps = {
   isScrollAttribute: false,
   scroll: 'vertical',
-  preventParentScroll: 'vertical',
   dataId: 'CardContent',
   customClass: ''
 };

package/es/Card/props/propTypes.js

@@ -11,10 +11,10 @@ export const CardContent_propTypes = {
   eleRef: PropTypes.func,
   isScrollAttribute: PropTypes.bool,
   onScroll: PropTypes.func,
-  scroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
   shrink: PropTypes.bool,
   customClass: PropTypes.string,
-  preventParentScroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both'])
 };
 export const Card_propTypes = {
   childTypes: PropTypes.object,

package/es/DateTime/CalendarView.js

@@ -147,7 +147,8 @@ export default class CalendarView extends React.PureComponent {
     })();
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DaysRow, {
       dayNames: dayNames,
-      dayNamesShort: dayNamesShort
+      dayNamesShort: dayNamesShort,
+      ariaLabel: dayNamesShort
     }), /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_dateContainer`,
       className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
@@ -183,7 +184,8 @@ export class Span extends React.PureComponent {
       dataId: dataId,
       className: `${tdclass} ${isActive ? style.active : ''} ${isToday ? style.today : ''}`,
       key: i,
-      onClick: this.handleSelectChild
+      onClick: this.handleSelectChild,
+      "aria-label": incremday
     }, incremday);
   }
 }

package/es/DateTime/DateTime.module.css

@@ -74,6 +74,7 @@
   line-height: var(--zd_size24);
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
+  display: initial
 }
 
 .dateContainer {

package/es/DateTime/DateTimePopupHeader.js

@@ -6,6 +6,7 @@ import React, { PureComponent } from 'react';
 /** ** Components *** */
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Heading from '../Heading/Heading';
 
 /** ** CSS *** */
 import style from './DateTime.module.css';
@@ -26,13 +27,16 @@ class Span extends React.PureComponent {
       dataTitle,
       children,
       dataId,
-      className = ''
+      className = '',
+      ariaLabel
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       "data-title": dataTitle,
       dataId: dataId,
       className: `${style.thArrow} ${style.grid} ${className}`,
-      onClick: this.modifyCalendarChild
+      onClick: this.modifyCalendarChild,
+      "aria-label": ariaLabel,
+      tabindex: "0"
     }, children);
   }
 }
@@ -54,19 +58,26 @@ export default class DateTimePopupHeader extends PureComponent {
       className: style.dateText,
       dataId: "selectYear",
       onClick: onOpenYearView
-    }, /*#__PURE__*/React.createElement("span", {
-      className: style.thMonYear
-    }, showMonthTxt), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Heading, {
+      className: style.thMonYear,
+      title: showMonthTxt,
+      tagName: "h2",
+      a11y: {
+        tabindex: '0'
+      }
+    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-dropdown",
       size: "12",
       iconClass: style.downArrow
-    })), /*#__PURE__*/React.createElement(Box, {
+    }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }), !isYearView ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Span, {
       dataTitle: prevMonthTitleText,
       dataId: "prevMonth",
       modifyCalendar: onModifyCalendar,
-      type: "previousMonth"
+      type: "previousMonth",
+      ariaLabel: "prevMonth",
+      tabindex: "0"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowLeft3",
       isBold: true
@@ -75,7 +86,9 @@ export default class DateTimePopupHeader extends PureComponent {
       dataId: "nextMonth",
       modifyCalendar: onModifyCalendar,
       type: "nextMonth",
-      className: style.navigation
+      className: style.navigation,
+      ariaLabel: "nextMonth",
+      tabindex: "0"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowRight3",
       isBold: true

package/es/DateTime/DateWidget.js

@@ -919,7 +919,8 @@ class DateWidgetComponent extends React.Component {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      dropBoxPortalId
+      dropBoxPortalId,
+      a11y
     } = this.props;
     const {
       selected: value = '',
@@ -969,7 +970,8 @@ class DateWidgetComponent extends React.Component {
       },
       iconOnHover: iconOnHover,
       isFocus: isPopupReady,
-      autoComplete: false
+      autoComplete: false,
+      a11y: a11y
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick

package/es/DateTime/DaysRow.js

@@ -20,7 +20,8 @@ export default class DaysRow extends PureComponent {
     }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
       key: dayName,
       className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
-      "data-title": dayName
+      "data-title": dayName,
+      "aria-label": dayName
     }, dayNamesShort[index])));
   }
 }

package/es/DateTime/YearView.js

@@ -7,6 +7,7 @@ import { YearView_defaultProps } from './props/defaultProps';
 import { Virtualizer } from '@zohodesk/virtualizer';
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Heading from '../Heading/Heading';
 /**** CSS ****/
 import style from './YearView.module.css';
 
@@ -50,9 +51,15 @@ class Year extends React.PureComponent {
       alignBox: "row",
       align: "vertical"
     }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.yearText
-    }, year), /*#__PURE__*/React.createElement(Icon, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Heading, {
+      className: style.yearText,
+      title: year,
+      a11y: {
+        tabindex: '0'
+      },
+      tagName: "h4"
+    })), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowDownSingle",
       size: "7",
       isBold: true,
@@ -85,7 +92,8 @@ class Month extends React.PureComponent {
       dataId: `month_${month}`,
       className: `${style.month} ${isActive ? style.currentMonth : ''}`,
       onClick: this.handleClick,
-      "data-title": hoverText
+      "data-title": hoverText,
+      "aria-label": month
     }, displayText);
   }
 }

package/es/DateTime/YearView.module.css

@@ -5,6 +5,7 @@
   padding-left: var(--zd_size19);
   padding-right: var(--zd_size19);
 }
+
 .month {
   width: 30.333%;
   font-size: var(--zd_font_size12);
@@ -17,51 +18,66 @@
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
 }
+
 .month:hover {
   background-color: var(--zdt_yearview_month_hover_bg);
 }
+
 .currentMonth,
 .currentMonth:hover {
   color: var(--zdt_yearview_currentmonth_text);
 }
+
 .currentMonth, .currentMonth:hover {
   background-color: var(--zdt_yearview_currentmonth_bg);
 }
+
 .yearBox {
   border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
 }
+
 .year {
   padding: var(--zd_size7) 0;
   cursor: pointer;
 }
+
 .year:hover .yearText,
 .year:hover .arrow {
   color: var(--zdt_yearview_year_hover_text);
 }
+
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
   font-size: var(--zd_font_size11);
 }
+
 .arrow {
   color: var(--zdt_yearview_yeartext_text);
   transition: transform var(--zd_transition1);
 }
+
 .isActive {
   cursor: default;
 }
+
 .isActive .yearText {
   font-family: var(--zd_semibold);
   color: var(--zdt_yearview_year_hover_text);
+  font-size: var(--zd_font_size11);
 }
+
 .arrowActive {
   color: var(--zdt_yearview_year_hover_text);
 }
+
 [dir=ltr] .arrowActive {
   transform: rotate(180deg);
 }
+
 [dir=rtl] .arrowActive {
   transform: rotate(-180deg);
 }
+
 .container {
   height: 100%;
   overflow-y: auto;
@@ -69,13 +85,15 @@
   composes: boxPadding;
   background-color: var(--zdt_yearview_default_bg);
 }
+
 .yearContainer {
   height: var(--zd_size135);
   overflow: hidden;
   transition: height var(--zd_transition1);
   padding-bottom: var(--zd_size5);
 }
+
 .toggleYear {
   height: 0;
   padding: 0;
-}
+}

package/es/DropBox/DropBox.js

@@ -9,6 +9,7 @@ import { positionMapping } from './DropBoxPositionMapping.json';
 import { getZIndex } from '../Provider/ZindexProvider';
 import { getLibraryConfig } from '../Provider/Config';
 import LibraryContext from '../Provider/LibraryContextInit';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 export class DropBoxElement extends React.Component {
   constructor(props) {
     super(props);
@@ -59,7 +60,8 @@ export class DropBoxElement extends React.Component {
       positionsOffset,
       targetOffset,
       zIndexStyle,
-      customStyle
+      customStyle,
+      subContainerRef
     } = this.props;
     let {
       isReducedMotion
@@ -146,9 +148,11 @@ export class DropBoxElement extends React.Component {
       "aria-labelledby": ariaLabelledby,
       tabIndex: tabIndex
     }, /*#__PURE__*/React.createElement("div", {
+      tabIndex: "-1",
       className: `${subContainerClass} ${style[`${palette}Palette`]}`,
       onClick: onClick,
-      "data-id": `${dataId}_subcontainer`
+      "data-id": `${dataId}_subcontainer`,
+      ref: subContainerRef
     }, isModel ? /*#__PURE__*/React.createElement("div", {
       className: style.closeBar
     }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
@@ -165,6 +169,7 @@ export default class DropBox extends React.Component {
     super(props);
     this.getNextIndex = getZIndex(this);
     this.onFreezeClick = this.onFreezeClick.bind(this);
+    this.createRef = /*#__PURE__*/React.createRef();
   }
   onFreezeClick(e) {
     e && e.stopPropagation();
@@ -176,7 +181,9 @@ export default class DropBox extends React.Component {
       isActive,
       isAbsolutePositioningNeeded,
       needAutoZindex,
-      isRestrictScroll
+      isRestrictScroll,
+      needFocusScope,
+      onClose
     } = this.props;
     let windowWidth,
       mobileWidth = getLibraryConfig('mobileWidth'),
@@ -193,7 +200,20 @@ export default class DropBox extends React.Component {
     const {
       direction
     } = this.context || {};
-    const dropBoxEle = /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      focusClose: onClose,
+      elementRef: this.createRef,
+      autoFocus: true,
+      restoreFocus: true,
+      focusArrowLoop: true,
+      enableEnterAction: true
+    }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+      isModel: isModel,
+      direction: direction
+    }, this.props, {
+      zIndexStyle: zIndexStyle,
+      subContainerRef: this.createRef
+    }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
       isModel: isModel,
       direction: direction
     }, this.props, {

package/es/DropBox/props/defaultProps.js

@@ -16,5 +16,6 @@ export const defaultProps = {
   palette: 'default',
   needAutoZindex: true,
   portalId: 'portal1',
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  needFocusScope: false
 };

package/es/DropBox/props/propTypes.js

@@ -22,6 +22,7 @@ export const propTypes = {
   left: PropTypes.number,
   needResponsive: PropTypes.bool,
   onClick: PropTypes.func,
+  needFocusScope: PropTypes.bool,
   right: PropTypes.number,
   size: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
   top: PropTypes.number,

package/es/DropDown/DropDownHeading.js

@@ -15,13 +15,15 @@ export default class DropDownHeading extends React.Component {
     } = this.props;
     let {
       role,
-      ariaLabelledby
+      ariaLabelledby,
+      ariaLabel
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style[palette]} ${customClass}`,
       "data-title": title,
       role: role,
       "aria-labelledby": ariaLabelledby,
+      "aria-label": ariaLabel,
       id: htmlId
       // tabindex='0'
     }, text, children);

package/es/DropDown/props/propTypes.js

@@ -38,7 +38,8 @@ export const DropDownHeading_propTypes = {
   htmlId: PropTypes.string,
   a11y: PropTypes.shape({
     role: PropTypes.string,
-    ariaLabelledby: PropTypes.string
+    ariaLabelledby: PropTypes.string,
+    ariaLabel: PropTypes.string
   })
 };
 export const DropDownItem_propTypes = {

package/es/Label/Label.js

@@ -19,7 +19,8 @@ export default class Label extends React.Component {
       onClick,
       dataId,
       variant,
-      customClass
+      customClass,
+      id
     } = this.props;
     return /*#__PURE__*/React.createElement("label", {
       className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
@@ -27,7 +28,8 @@ export default class Label extends React.Component {
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
-      onClick: onClick
+      onClick: onClick,
+      id: id
     }, text);
   }
 }

package/es/Layout/props/propTypes.js

@@ -16,11 +16,11 @@ export const BoxProps = {
   isFirst: PropTypes.bool,
   isLast: PropTypes.bool,
   isScrollAttribute: PropTypes.bool,
-  scroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
   shrink: PropTypes.bool,
   tagName: PropTypes.string,
   tourId: PropTypes.string,
-  preventParentScroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both'])
 };
 export const ContainerProps = {
   align: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around', 'baseline']),
@@ -38,5 +38,5 @@ export const ContainerProps = {
   tagName: PropTypes.string,
   tourId: PropTypes.string,
   wrap: PropTypes.oneOf(['wrap', 'wrap-reverse', 'nowrap']),
-  preventParentScroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both'])
 };