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

package/es/ListItem/ListContainer.js

@@ -50,7 +50,8 @@ const ListContainer = props => {
   } = useResponsiveReceiver('Helmet', responsiveFunc);
   const {
     role,
-    ariaSelected
+    ariaSelected,
+    ariaLabel
   } = a11y;
   const options = {};
   if (isLink) {
@@ -60,12 +61,14 @@ const ListContainer = props => {
   if (active) {
     options['data-selected'] = active;
   }
-  if (!isDisabled && !isLink && active) {
+  if (!isDisabled && !isLink) {
     options.tabindex = '0';
   }
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
+    "data-a11y-inside-focus": true,
     "aria-selected": ariaSelected,
+    "aria-label": ariaLabel,
     isCover: false,
     align: "vertical",
     alignBox: "row",

package/es/MultiSelect/MultiSelect.js

@@ -825,7 +825,8 @@ export class MultiSelectComponent extends React.Component {
       searchText = 'Searching...'
     } = i18nKeys;
     const {
-      clearLabel = 'Clear all'
+      clearLabel = 'Clear all',
+      ariaLabelledby
     } = a11y;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -907,7 +908,8 @@ export class MultiSelectComponent extends React.Component {
         ariaExpanded: !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? true : false,
         ariaHaspopup: true,
         ariaRequired: true,
-        ariaDescribedby: ariaErrorId
+        ariaDescribedby: ariaErrorId,
+        ariaLabelledby: ariaLabelledby
       },
       autoComplete: autoComplete
     }, /*#__PURE__*/React.createElement(Container, {

package/es/MultiSelect/Suggestions.js

@@ -57,7 +57,8 @@ export default class Suggestions extends React.PureComponent {
       const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
       const isHighlight = hoverOption === index || id === hoverId ? true : false;
       const list_a11y = Object.assign({}, a11y, {
-        ariaSelected: isActive
+        ariaSelected: isActive,
+        ariaLabel: value
       });
       const commonProps = {
         isDisabled

package/es/Responsive/CustomResponsive.js

@@ -99,6 +99,7 @@ export function useResponsiveReceiver() {
   const data = useRef();
   function updateLatestData() {
     const size = contextData.isParentSize ? contextData.getSize() : validSizeContextData.getSize();
+    const prevData = data.current;
     data.current = query({
       isTouchDevice,
       isParentSize: contextData.isParentSize,
@@ -122,13 +123,16 @@ export function useResponsiveReceiver() {
         });
       }
     });
+    const isSameValues = shallowCompare(data.current, prevData);
+    if (isSameValues) {
+      data.current = prevData;
+    }
+    return isSameValues;
   }
   resizeHandlerRef.current = updateLatestData;
   useEffect(() => {
     function handleResize(size) {
-      const prevData = data.current;
-      resizeHandlerRef.current(size);
-      const isSameValues = shallowCompare(data.current, prevData);
+      const isSameValues = resizeHandlerRef.current(size);
       !isSameValues && forceUpdate({});
     }
     contextData.resize.subscribe(handleResize);

package/es/Select/Select.js

@@ -676,6 +676,7 @@ export class SelectComponent extends Component {
       iconOnHover,
       customProps,
       autoComplete,
+      ariaLabelledby,
       isLoading
     } = this.props;
     let {
@@ -712,14 +713,15 @@ export class SelectComponent extends Component {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       a11y: {
-        role: 'combobox',
+        role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
         ariaControls: setAriaId,
         ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
         ariaHaspopup: true,
         ariaReadonly: true,
         ariaActivedescendant: selectedId,
-        ariaOwns: setAriaId
+        ariaOwns: setAriaId,
+        ariaLabelledby: ariaLabelledby
       },
       isDisabled: isDisabled,
       iconRotated: isPopupOpen,
@@ -764,14 +766,15 @@ export class SelectComponent extends Component {
       size: "7"
     })))) : /*#__PURE__*/React.createElement(Textbox, {
       a11y: {
-        role: 'combobox',
+        role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
         ariaControls: setAriaId,
         ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
         ariaHaspopup: true,
         ariaReadonly: true,
         ariaActivedescendant: selectedId,
-        ariaOwns: setAriaId
+        ariaOwns: setAriaId,
+        ariaLabelledby: ariaLabelledby
       },
       isDisabled: isDisabled,
       inputRef: this.valueInputRef,

package/es/Select/SelectWithIcon.js

@@ -455,7 +455,8 @@ class SelectWithIcon extends Component {
           getRef: this.itemRef,
           a11y: {
             role: 'option',
-            ariaSelected: selectedId === options[idKey]
+            ariaSelected: selectedId === options[idKey],
+            ariaLabel: options[valueKey]
           }
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {

package/es/Switch/Switch.js

@@ -55,7 +55,8 @@ export default class Switch extends React.Component {
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
-      tabIndex: isReadOnly || disabled ? '-1' : '0'
+      tabIndex: isReadOnly || disabled ? '-1' : '0',
+      onClick: !disabled || !isReadOnly ? this.onChange : null
     }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
     }, /*#__PURE__*/React.createElement("input", {
@@ -66,8 +67,8 @@ export default class Switch extends React.Component {
       value: value,
       checked: checked,
       disabled: disabled,
-      readOnly: isReadOnly,
-      onClick: !disabled || !isReadOnly ? this.onChange : null
+      readOnly: isReadOnly
+      // onClick={!disabled || !isReadOnly ? this.onChange : null}
     }), /*#__PURE__*/React.createElement("label", {
       htmlFor: id,
       "data-id": dataId,
@@ -77,8 +78,9 @@ export default class Switch extends React.Component {
       palette: labelPalette,
       id: id,
       size: labelSize,
-      type: "subtitle",
-      onClick: !disabled || !isReadOnly ? this.onChange : null,
+      type: "subtitle"
+      // onClick={!disabled || !isReadOnly ? this.onChange : null}
+      ,
       customClass: customLabel
     }, LabelProps)));
   }

package/es/Tab/TabContent.js

@@ -18,7 +18,7 @@ const TabContent = _ref => {
     dataId: `${dataId}_TabContent`,
     isScrollAttribute: true,
     "aria-labelledby": id,
-    tabindex: "0",
+    tabindex: "-1",
     role: "tabpanel"
   }, children);
 };

package/es/Tab/Tabs.js

@@ -20,6 +20,7 @@ import tabsStyle from './Tabs.module.css';
 import Popup from '../Popup/Popup';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import btnstyle from '../semantic/Button/semanticButton.module.css';
 class Tabs extends React.Component {
   constructor(props) {
     super(props);
@@ -222,7 +223,7 @@ class Tabs extends React.Component {
     let {
       align
     } = this.props;
-    let totalDimension = getTotalDimension(this.tabsEle, align);
+    let totalDimension = this.tabsEle && getTotalDimension(this.tabsEle, align);
     return totalDimension;
   }
   getTabDimensions() {
@@ -233,7 +234,7 @@ class Tabs extends React.Component {
     } = this.props;
     let tabDimensions = {};
     React.Children.forEach(children, child => /*#__PURE__*/React.isValidElement(child) && child.type === childType && this[child.props.id] && Object.assign(tabDimensions, {
-      [child.props.id]: getTotalDimension(this[child.props.id], align)
+      [child.props.id]: this[child.props.id] && getTotalDimension(this[child.props.id], align)
     }));
     return tabDimensions;
   }
@@ -423,13 +424,16 @@ class Tabs extends React.Component {
       }, classProps));
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
       className: `${tabsStyle.menu} `
-    }, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
+    }, /*#__PURE__*/React.createElement(Container, {
+      className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
       onClick: this.togglePopup,
       dataId: "moreTabs",
-      eleRef: getTargetRef
-    }, MoreButtonProps), /*#__PURE__*/React.createElement(Icon, {
+      eleRef: getTargetRef,
+      "aria-label": "MoreTabs",
+      role: "tab",
+      tagName: "button"
+    }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -451,7 +455,9 @@ class Tabs extends React.Component {
         isBoxPaddingNeed: true,
         isArrow: false
       }, DropBoxProps, {
-        isResponsivePadding: true
+        isResponsivePadding: true,
+        needFocusScope: true,
+        onClose: this.togglePopup
       }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,

package/es/Tab/Tabs.module.css

@@ -138,4 +138,4 @@
 
 .hidden{
   visibility: hidden;
-}
+}

package/es/Tooltip/Tooltip.js

@@ -4,6 +4,7 @@ import { propTypes } from './props/propTypes';
 import { getLibraryConfig } from '../Provider/Config';
 import style from './Tooltip.module.css';
 import ResizeObserver from '../Responsive/ResizeObserver';
+import selectn from 'selectn';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);
@@ -146,7 +147,9 @@ export default class Tooltip extends React.Component {
             //   isContentDotted = element.offsetHeight < element.scrollHeight;
             // }
           } else {
-            isContentDotted = element.parentElement.offsetWidth < element.parentElement.scrollWidth;
+            const offWidth = selectn('parentElement.offsetWidth', element) || 0;
+            const scrollWidth = selectn('parentElement.scrollWidth', element) || 0;
+            isContentDotted = offWidth < scrollWidth;
           }
           let originText = element.innerText.replace(/\s/g, '').toLowerCase();
           let tooltipText = title.replace(/\s/g, '').toLowerCase();

package/es/common/a11y.module.css

@@ -0,0 +1,4 @@
+:root {  
+    --lib_a11y_focusScope_focus_border:var(--zdt_a11y_focusScope_focus_border);
+    --lib_a11y_focusScope_focus_bg:var(--zdt_listitem_highlight_bg);
+}

package/es/index.js

@@ -1,156 +1,157 @@
-export { default as React } from 'react';
-export { default as ReactDOM } from 'react-dom';
-export { renderToStaticMarkup } from 'react-dom/server';
-import './common/reset.module.css';
-export { default as _provider } from './Provider';
+// export { default as React } from 'react';
+// export { default as ReactDOM } from 'react-dom';
+// export { renderToStaticMarkup } from 'react-dom/server';
 export * from './Layout';
-export { default as Layout__default } from './Layout/docs/Layout__default.docs';
-export { default as Layout__two_Column } from './Layout/docs/Layout__two_Column.docs';
-export { default as Layout__three_Column } from './Layout/docs/Layout__three_Column.docs';
-export { default as Layout__four_Column } from './Layout/docs/Layout__four_Column.docs';
-export { default as Layout__Hidden } from './Layout/docs/Layout__Hidden.docs';
+// export { default as Layout__default } from './Layout/docs/Layout__default.docs';
+// export { default as Layout__two_Column } from './Layout/docs/Layout__two_Column.docs';
+// export { default as Layout__three_Column } from './Layout/docs/Layout__three_Column.docs';
+// export { default as Layout__four_Column } from './Layout/docs/Layout__four_Column.docs';
+// export { default as Layout__Hidden } from './Layout/docs/Layout__Hidden.docs';
 export { default as AppContainer } from './AppContainer/AppContainer';
-export { default as AppContainer__default } from './AppContainer/docs/AppContainer__default.docs';
+// export { default as AppContainer__default } from './AppContainer/docs/AppContainer__default.docs';
 export { default as Accordion } from './Accordion/Accordion';
-export { default as Accordion__Demo } from './Accordion/docs/Accordion__Demo.docs';
+// export { default as Accordion__Demo } from './Accordion/docs/Accordion__Demo.docs';
 export { default as Animation } from './Animation/Animation';
-export { default as Animation__default } from './Animation/docs/Animation__default.docs';
-export { default as Animation__fadeIn } from './Animation/docs/Animation__fadeIn.docs';
-export { default as Animation__scaleIn } from './Animation/docs/Animation__scaleIn.docs';
-export { default as Animation__slideDown } from './Animation/docs/Animation__slideDown.docs';
-export { default as Animation__slideLeft } from './Animation/docs/Animation__slideLeft.docs';
-export { default as Animation__zoomIn } from './Animation/docs/Animation__zoomIn.docs';
-export { default as Animation__skewIn } from './Animation/docs/Animation__skewIn.docs';
+// export { default as Animation__default } from './Animation/docs/Animation__default.docs';
+// export { default as Animation__fadeIn } from './Animation/docs/Animation__fadeIn.docs';
+// export { default as Animation__scaleIn } from './Animation/docs/Animation__scaleIn.docs';
+// export { default as Animation__slideDown } from './Animation/docs/Animation__slideDown.docs';
+// export { default as Animation__slideLeft } from './Animation/docs/Animation__slideLeft.docs';
+// export { default as Animation__zoomIn } from './Animation/docs/Animation__zoomIn.docs';
+// export { default as Animation__skewIn } from './Animation/docs/Animation__skewIn.docs';
 export { default as Card } from './Card/Card';
-export { default as Card__Default } from './Card/docs/Card__Default.docs';
-export { default as Card__Scroll } from './Card/docs/Card__Scroll.docs';
-export { default as Card__Custom } from './Card/docs/Card__Custom.docs';
+// export { default as Card__Default } from './Card/docs/Card__Default.docs';
+// export { default as Card__Scroll } from './Card/docs/Card__Scroll.docs';
+// export { default as Card__Custom } from './Card/docs/Card__Custom.docs';
 export { default as Avatar } from './Avatar/Avatar';
-export { default as Avatar__default } from './Avatar/docs/Avatar__default.docs';
-export { default as Avatar__palette } from './Avatar/docs/Avatar__palette.docs';
-export { default as Avatar__text } from './Avatar/docs/Avatar__text.docs';
-export { default as Avatar__custom } from './Avatar/docs/Avatar__custom.docs';
+// export { default as Avatar__default } from './Avatar/docs/Avatar__default.docs';
+// export { default as Avatar__palette } from './Avatar/docs/Avatar__palette.docs';
+// export { default as Avatar__text } from './Avatar/docs/Avatar__text.docs';
+// export { default as Avatar__custom } from './Avatar/docs/Avatar__custom.docs';
 export { default as AvatarTeam } from './AvatarTeam/AvatarTeam';
-export { default as AvatarTeam__default } from './AvatarTeam/docs/AvatarTeam__default.docs';
-export { default as AvatarTeam__size } from './AvatarTeam/docs/AvatarTeam__size.docs';
-export { default as AvatarTeam__palette } from './AvatarTeam/docs/AvatarTeam__palette.docs';
-export { default as AvatarTeam__custom } from './AvatarTeam/docs/AvatarTeam__custom.docs';
+// export { default as AvatarTeam__default } from './AvatarTeam/docs/AvatarTeam__default.docs';
+// export { default as AvatarTeam__size } from './AvatarTeam/docs/AvatarTeam__size.docs';
+// export { default as AvatarTeam__palette } from './AvatarTeam/docs/AvatarTeam__palette.docs';
+// export { default as AvatarTeam__custom } from './AvatarTeam/docs/AvatarTeam__custom.docs';
 export { default as Button } from './Button/Button';
-export { default as Button__default } from './Button/docs/Button__default.docs';
-export { default as Button__custom } from './Button/docs/Button__custom.docs';
+// export { default as Button__default } from './Button/docs/Button__default.docs';
+// export { default as Button__custom } from './Button/docs/Button__custom.docs';
 export { default as Buttongroup } from './Buttongroup/Buttongroup';
-export { default as Buttongroup__footer } from './Buttongroup/docs/Buttongroup__footer.docs';
-export { default as Buttongroup__header } from './Buttongroup/docs/Buttongroup__header.docs';
-export { default as Buttongroup__custom } from './Buttongroup/docs/Buttongroup__custom.docs';
+// export { default as Buttongroup__footer } from './Buttongroup/docs/Buttongroup__footer.docs';
+// export { default as Buttongroup__header } from './Buttongroup/docs/Buttongroup__header.docs';
+// export { default as Buttongroup__custom } from './Buttongroup/docs/Buttongroup__custom.docs';
 export { default as Switch } from './Switch/Switch';
-export { default as Switch__default } from './Switch/docs/Switch__default.docs';
-export { default as Switch__custom } from './Switch/docs/Switch__custom.docs';
+// export { default as Switch__default } from './Switch/docs/Switch__default.docs';
+// export { default as Switch__custom } from './Switch/docs/Switch__custom.docs';
 export { default as Radio } from './Radio/Radio';
-export { default as Radio__default } from './Radio/docs/Radio__default.docs';
-export { default as Radio__custom } from './Radio/docs/Radio__custom.docs';
+// export { default as Radio__default } from './Radio/docs/Radio__default.docs';
+// export { default as Radio__custom } from './Radio/docs/Radio__custom.docs';
 export { default as Textarea } from './Textarea/Textarea';
-export { default as Textarea__default } from './Textarea/docs/Textarea__default.docs';
-export { default as Textarea__animated } from './Textarea/docs/Textarea__animated.docs';
-export { default as Textarea__disabled } from './Textarea/docs/Textarea__disabled.docs';
-export { default as Textarea__custom } from './Textarea/docs/Textarea__custom.docs';
+// export { default as Textarea__default } from './Textarea/docs/Textarea__default.docs';
+// export { default as Textarea__animated } from './Textarea/docs/Textarea__animated.docs';
+// export { default as Textarea__disabled } from './Textarea/docs/Textarea__disabled.docs';
+// export { default as Textarea__custom } from './Textarea/docs/Textarea__custom.docs';
 export { default as Label } from './Label/Label';
-export { default as Label__palette } from './Label/docs/Label__palette.docs';
-export { default as Label__size } from './Label/docs/Label__size.docs';
-export { default as Label__clipped } from './Label/docs/Label__clipped.docs';
-export { default as Label__type } from './Label/docs/Label__type.docs';
-export { default as Label__custom } from './Label/docs/Label__custom.docs';
+// export { default as Label__palette } from './Label/docs/Label__palette.docs';
+// export { default as Label__size } from './Label/docs/Label__size.docs';
+// export { default as Label__clipped } from './Label/docs/Label__clipped.docs';
+// export { default as Label__type } from './Label/docs/Label__type.docs';
+// export { default as Label__custom } from './Label/docs/Label__custom.docs';
 export { default as DropDownHeading } from './DropDown/DropDownHeading';
-export { default as DropDownHeading__Heading } from './DropDown/docs/DropDownHeading__default.docs';
-export { default as DropDownHeading__Custom } from './DropDown/docs/DropDownHeading__custom.docs';
+// export { default as DropDownHeading__Heading } from './DropDown/docs/DropDownHeading__default.docs';
+// export { default as DropDownHeading__Custom } from './DropDown/docs/DropDownHeading__custom.docs';
 export { default as CheckBox } from './CheckBox/CheckBox';
-export { default as CheckBox__default } from './CheckBox/docs/CheckBox__default.docs';
-export { default as CheckBox__custom } from './CheckBox/docs/CheckBox__custom.docs';
+// export { default as CheckBox__default } from './CheckBox/docs/CheckBox__default.docs';
+// export { default as CheckBox__custom } from './CheckBox/docs/CheckBox__custom.docs';
 export { default as Ribbon } from './Ribbon/Ribbon';
-export { default as Ribbon__default } from './Ribbon/docs/Ribbon__default.docs';
-export { default as Ribbon__custom } from './Ribbon/docs/Ribbon__custom.docs';
+// export { default as Ribbon__default } from './Ribbon/docs/Ribbon__default.docs';
+// export { default as Ribbon__custom } from './Ribbon/docs/Ribbon__custom.docs';
 export { default as Tag } from './Tag/Tag';
-export { default as Tag__default } from './Tag/docs/Tag__default.docs';
-export { default as Tag__custom } from './Tag/docs/Tag__custom.docs';
+// export { default as Tag__default } from './Tag/docs/Tag__default.docs';
+// export { default as Tag__custom } from './Tag/docs/Tag__custom.docs';
 export * from './Tab';
-export { default as Tab__default } from './Tab/docs/Tab__default.docs';
+// export { default as Tab__default } from './Tab/docs/Tab__default.docs';
 export { default as TextBox } from './TextBox/TextBox';
-export { default as TextBox__default } from './TextBox/docs/TextBox__default.docs';
-export { default as TextBox__size } from './TextBox/docs/TextBox__size.docs';
-export { default as TextBox__variant } from './TextBox/docs/TextBox__variant.docs';
-export { default as TextBox__custom } from './TextBox/docs/TextBox__custom.docs';
+// export { default as TextBox__default } from './TextBox/docs/TextBox__default.docs';
+// export { default as TextBox__size } from './TextBox/docs/TextBox__size.docs';
+// export { default as TextBox__variant } from './TextBox/docs/TextBox__variant.docs';
+// export { default as TextBox__custom } from './TextBox/docs/TextBox__custom.docs';
 export { default as TextBoxIcon } from './TextBoxIcon/TextBoxIcon';
-export { default as TextBoxIcon__default } from './TextBoxIcon/docs/TextBoxIcon__default.docs';
-export { default as TextBoxIcon__custom } from './TextBoxIcon/docs/TextBoxIcon__custom.docs';
+// export { default as TextBoxIcon__default } from './TextBoxIcon/docs/TextBoxIcon__default.docs';
+// export { default as TextBoxIcon__custom } from './TextBoxIcon/docs/TextBoxIcon__custom.docs';
 export { default as Tooltip } from './Tooltip/Tooltip';
-export { default as Tooltip__default } from './Tooltip/docs/Tooltip__default.docs';
+// export { default as Tooltip__default } from './Tooltip/docs/Tooltip__default.docs';
 export { default as Select } from './Select/Select';
-export { default as Select__Select } from './Select/docs/Select__default.docs';
+// export { default as Select__Select } from './Select/docs/Select__default.docs';
 export { default as SelectWithIcon } from './Select/SelectWithIcon';
-export { default as SelectWithIcon__SelectWithIcon } from './Select/docs/SelectWithIcon__default.docs';
+// export { default as SelectWithIcon__SelectWithIcon } from './Select/docs/SelectWithIcon__default.docs';
 export { default as GroupSelect } from './Select/GroupSelect';
-export { default as GroupSelect__GroupSelect } from './Select/docs/GroupSelect__default.docs';
+// export { default as GroupSelect__GroupSelect } from './Select/docs/GroupSelect__default.docs';
 export { default as SelectWithAvatar } from './Select/SelectWithAvatar';
-export { default as SelectWithAvatar__SelectWithAvatar } from './Select/docs/SelectWithAvatar__default.docs';
+// export { default as SelectWithAvatar__SelectWithAvatar } from './Select/docs/SelectWithAvatar__default.docs';
 export { default as MultiSelect } from './MultiSelect/MultiSelect';
-export { default as MultiSelect__MultiSelect } from './MultiSelect/docs/MultiSelect__default.docs';
+// export { default as MultiSelect__MultiSelect } from './MultiSelect/docs/MultiSelect__default.docs';
 export { default as AdvancedMultiSelect } from './MultiSelect/AdvancedMultiSelect';
-export { default as AdvancedMultiSelect__AdvancedMultiSelect } from './MultiSelect/docs/AdvancedMultiSelect__default.docs';
+// export { default as AdvancedMultiSelect__AdvancedMultiSelect } from './MultiSelect/docs/AdvancedMultiSelect__default.docs';
 export { default as AdvancedGroupMultiSelect } from './MultiSelect/AdvancedGroupMultiSelect';
-export { default as AdvancedGroupMultiSelect__AdvancedGroupMultiSelect } from './MultiSelect/docs/AdvancedGroupMultiSelect__default.docs';
+// export { default as AdvancedGroupMultiSelect__AdvancedGroupMultiSelect } from './MultiSelect/docs/AdvancedGroupMultiSelect__default.docs';
 export { default as MultiSelectWithAvatar } from './MultiSelect/MultiSelectWithAvatar';
-export { default as MultiSelectWithAvatar__MultiSelectWithAvatar } from './MultiSelect/docs/MultiSelectWithAvatar__default.docs';
+// export { default as MultiSelectWithAvatar__MultiSelectWithAvatar } from './MultiSelect/docs/MultiSelectWithAvatar__default.docs';
 export { default as DateWidget } from './DateTime/DateWidget';
-export { default as DateWidget__dateWidget } from './DateTime/docs/DateWidget__default.docs';
-export { default as DateWidget__datetime } from './DateTime/docs/DateTime__default.docs';
+// export { default as DateWidget__dateWidget } from './DateTime/docs/DateWidget__default.docs';
+// export { default as DateWidget__datetime } from './DateTime/docs/DateTime__default.docs';
 export { default as ListItem } from './ListItem/ListItem';
-export { default as ListItem__default } from './ListItem/docs/ListItem__default.docs';
-export { default as ListItem__custom } from './ListItem/docs/ListItem__custom.docs';
+// export { default as ListItem__default } from './ListItem/docs/ListItem__default.docs';
+// export { default as ListItem__custom } from './ListItem/docs/ListItem__custom.docs';
 export { default as ListItemWithIcon } from './ListItem/ListItemWithIcon';
-export { default as ListItemWithIcon__default } from './ListItem/docs/ListItemWithIcon__default.docs';
-export { default as ListItemWithIcon__custom } from './ListItem/docs/ListItemWithIcon__custom.docs';
+// export { default as ListItemWithIcon__default } from './ListItem/docs/ListItemWithIcon__default.docs';
+// export { default as ListItemWithIcon__custom } from './ListItem/docs/ListItemWithIcon__custom.docs';
 export { default as ListItemWithCheckBox } from './ListItem/ListItemWithCheckBox';
-export { default as ListItemWithCheckBox__default } from './ListItem/docs/ListItemWithCheckBox__default.docs';
-export { default as ListItemWithCheckBox__custom } from './ListItem/docs/ListItemWithCheckBox__custom.docs';
+// export { default as ListItemWithCheckBox__default } from './ListItem/docs/ListItemWithCheckBox__default.docs';
+// export { default as ListItemWithCheckBox__custom } from './ListItem/docs/ListItemWithCheckBox__custom.docs';
 export { default as ListItemWithRadio } from './ListItem/ListItemWithRadio';
-export { default as ListItemWithRadio__default } from './ListItem/docs/ListItemWithRadio__default.docs';
-export { default as ListItemWithRadio__custom } from './ListItem/docs/ListItemWithRadio__custom.docs';
+// export { default as ListItemWithRadio__default } from './ListItem/docs/ListItemWithRadio__default.docs';
+// export { default as ListItemWithRadio__custom } from './ListItem/docs/ListItemWithRadio__custom.docs';
 export { default as ListItemWithAvatar } from './ListItem/ListItemWithAvatar';
-export { default as ListItemWithAvatar__default } from './ListItem/docs/ListItemWithAvatar__default.docs';
-export { default as ListItemWithAvatar__custom } from './ListItem/docs/ListItemWithAvatar__custom.docs';
+// export { default as ListItemWithAvatar__default } from './ListItem/docs/ListItemWithAvatar__default.docs';
+// export { default as ListItemWithAvatar__custom } from './ListItem/docs/ListItemWithAvatar__custom.docs';
 export { default as DropBox } from './DropBox/DropBox';
-export { default as DropBox__position } from './DropBox/docs/DropBox__position.docs';
-export { default as DropBox__size } from './DropBox/docs/DropBox__size.docs';
-export { default as DropBox__custom } from './DropBox/docs/DropBox__custom.docs';
-export { default as DropBox__customOrder } from './DropBox/docs/DropBox__customOrder.docs.js';
-export { default as DropBox__fixedPosition } from './DropBox/docs/DropBox__fixedPosition.docs.js';
+// export { default as DropBox__position } from './DropBox/docs/DropBox__position.docs';
+// export { default as DropBox__size } from './DropBox/docs/DropBox__size.docs';
+// export { default as DropBox__custom } from './DropBox/docs/DropBox__custom.docs';
+// export { default as DropBox__customOrder } from './DropBox/docs/DropBox__customOrder.docs.js';
+// export { default as DropBox__fixedPosition } from './DropBox/docs/DropBox__fixedPosition.docs.js';
 export { default as PopOver } from './PopOver/PopOver';
-export { default as PopOver__default } from './PopOver/docs/PopOver__default.docs.js';
+// export { default as PopOver__default } from './PopOver/docs/PopOver__default.docs.js';
 export { default as Stencils } from './Stencils/Stencils';
-export { default as Stencils__default } from './Stencils/docs/Stencils__default.docs';
-export { default as Stencils__custom } from './Stencils/docs/Stencils__custom.docs';
+// export { default as Stencils__default } from './Stencils/docs/Stencils__default.docs';
+// export { default as Stencils__custom } from './Stencils/docs/Stencils__custom.docs';
 export { default as Modal } from './Modal/Modal';
-export { default as Modal__default } from './Modal/__docs__/Modal__default.docs';
+// export { default as Modal__default } from './Modal/__docs__/Modal__default.docs';
 export * from './Responsive';
-export { default as Responsive__Custom } from './Responsive/docs/Responsive__Custom.docs';
-export { default as Responsive__default } from './Responsive/docs/Responsive__default.docs';
+// export { default as Responsive__Custom } from './Responsive/docs/Responsive__Custom.docs';
+// export { default as Responsive__default } from './Responsive/docs/Responsive__default.docs';
 export { default as RippleEffect } from './RippleEffect/RippleEffect';
-export { default as RippleEffect__default } from './RippleEffect/docs/RippleEffect__default.docs';
+// export { default as RippleEffect__default } from './RippleEffect/docs/RippleEffect__default.docs';
 export { default as PortalLayer } from './deprecated/PortalLayer/PortalLayer';
-export { default as PortalLayer__default } from './deprecated/PortalLayer/docs/PortalLayer__default.docs';
+// export { default as PortalLayer__default } from './deprecated/PortalLayer/docs/PortalLayer__default.docs';
+
 export { default as VelocityAnimation } from './VelocityAnimation/VelocityAnimation/VelocityAnimation';
-export { default as VelocityAnimation__VelocityAnimation } from './VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs';
+// export { default as VelocityAnimation__VelocityAnimation } from './VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs';
 export { default as VelocityAnimationGroup } from './VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-export { default as VelocityAnimationGroup__VelocityAnimationGroup } from './VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs';
+// export { default as VelocityAnimationGroup__VelocityAnimationGroup } from './VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs';
+
 export { Provider } from './Provider/IdProvider';
-export { default as Provider__Id_For_ClassComponent } from './Provider/docs/Provider_Id__Class.docs';
-export { default as Provider__Id_For_FunctionComponent } from './Provider/docs/Provider_Id__Function.docs';
-export { default as Provider__Zindex_For_ClassComponent } from './Provider/docs/Provider_Zindex__Class.docs';
-export { default as Provider__Zindex_For_FunctionComponent } from './Provider/docs/Provider_Zindex__Function.docs';
+// export { default as Provider__Id_For_ClassComponent } from './Provider/docs/Provider_Id__Class.docs';
+// export { default as Provider__Id_For_FunctionComponent } from './Provider/docs/Provider_Id__Function.docs';
+// export { default as Provider__Zindex_For_ClassComponent } from './Provider/docs/Provider_Zindex__Class.docs';
+// export { default as Provider__Zindex_For_FunctionComponent } from './Provider/docs/Provider_Zindex__Function.docs';
 
 //semantic//
 export { default as SemanticButton } from './semantic/Button/Button';
-export { default as SemanticButton__default } from './semantic/Button/docs/Button__default.docs.js';
-export { default as LightNightMode__AlternativeColors } from './LightNightMode/docs/AlternativeColors.docs';
+// export { default as SemanticButton__default } from './semantic/Button/docs/Button__default.docs.js';
+
+// export { default as LightNightMode__AlternativeColors } from './LightNightMode/docs/AlternativeColors.docs';
 export { default as ResponsiveDropBox } from './ResponsiveDropBox/ResponsiveDropBox';
 export { default as Heading } from './Heading/Heading';
-export { default as Heading__default } from './Heading/docs/Heading__default.docs.js';
+// export { default as Heading__default } from './Heading/docs/Heading__default.docs.js';

package/lib/AppContainer/AppContainer.js

@@ -18,6 +18,7 @@ require("@zohodesk/variables/assets/fontsizeVariables.module.css");
 require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
 require("@zohodesk/variables/assets/transitionVariables.module.css");
 require("@zohodesk/variables/assets/no_transitionVariables.module.css");
+require("../common/a11y.module.css");
 var _AppContainerModule = _interopRequireDefault(require("./AppContainer.module.css"));
 var _Config = require("../Provider/Config");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/Avatar/Avatar.js

@@ -178,7 +178,8 @@ var Avatar = /*#__PURE__*/function (_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["default"].createElement("span", {
         className: "".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " ")
       })));

package/lib/Button/Button.js

@@ -10,6 +10,7 @@ var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -50,7 +51,8 @@ var Button = /*#__PURE__*/function (_React$Component) {
         needAppearance = _this$props.needAppearance,
         getRef = _this$props.getRef,
         title = _this$props.title,
-        customClass = _this$props.customClass;
+        customClass = _this$props.customClass,
+        customProps = _this$props.customProps;
       var _customClass$customBu = customClass.customButton,
         customButton = _customClass$customBu === void 0 ? '' : _customClass$customBu,
         _customClass$customSt = customClass.customStatus,
@@ -60,7 +62,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
       var paletteLower = palette.toLowerCase();
       var statusLower = status.toLowerCase();
       var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : ''), " ").concat(statusLower !== 'none' ? _ButtonModule["default"].loader : '') : "".concat(_ButtonModule["default"]["default"]);
-      return /*#__PURE__*/_react["default"].createElement("button", {
+      return /*#__PURE__*/_react["default"].createElement("button", _extends({
         className: "".concat(customButton, " ").concat(classList, " ").concat(isBold ? _ButtonModule["default"].bold : '', "  "),
         "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
         disabled: disabled || statusLower === 'loading',
@@ -68,7 +70,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         type: "button",
         ref: getRef
-      }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
+      }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
         className: _ButtonModule["default"].overlay
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")] ? _ButtonModule["default"]["".concat(size, "loading")] : '') : _ButtonModule["default"].success)

package/lib/Card/props/defaultProps.js

@@ -16,7 +16,6 @@ exports.Card_defaultProps = Card_defaultProps;
 var CardContent_defaultProps = {
   isScrollAttribute: false,
   scroll: 'vertical',
-  preventParentScroll: 'vertical',
   dataId: 'CardContent',
   customClass: ''
 };