@zohodesk/dot 1.0.0-temp-175.7 → 1.0.0-temp-181

package/es/v1/form/fields/ValidationMessage/ValidationMessage.js

@@ -5,50 +5,50 @@ import Label from '@zohodesk/components/es/v1/Label/Label';
 import colors from '@zohodesk/components/es/Label/LabelColors.module.css';
 import style from '../../../../form/fields/ValidationMessage/ValidationMessage.module.css';
 import { Icon } from '@zohodesk/icons';
-export default class ValidationMessage extends React.Component {
-  render() {
-    let {
-      palette,
-      text,
-      htmlFor,
-      onClick,
-      type,
-      size,
-      dataId,
-      clipped,
-      a11y,
-      tooltip,
-      dataSelectorId
-    } = this.props;
-    let {
-      role = 'alert'
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      role: role,
-      onClick: onClick,
-      className: `${type === 'primary' ? style.primary : style.secondary}`,
-      "data-id": "errorMsgContainer",
-      "data-test-id": "errorMsgContainer",
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement(Label, {
-      text: text,
-      htmlFor: htmlFor,
-      palette: palette,
-      size: size,
-      dataId: dataId,
-      clipped: clipped,
-      title: clipped ? text : '',
-      customClass: style.lable
-    }), tooltip ? /*#__PURE__*/React.createElement("span", {
-      className: `${style.icon} ${colors[palette]}`,
-      "data-title": tooltip
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-information57",
-      size: "14"
-    })) : null);
-  }
 
-}
+const ValidationMessage = props => {
+  const {
+    palette,
+    text,
+    htmlFor,
+    onClick,
+    type,
+    size,
+    dataId,
+    clipped,
+    a11y,
+    tooltip,
+    dataSelectorId
+  } = props;
+  const {
+    role = 'alert'
+  } = a11y;
+  return /*#__PURE__*/React.createElement("div", {
+    role: role,
+    onClick: onClick,
+    className: `${type === 'primary' ? style.primary : style.secondary}`,
+    "data-id": "errorMsgContainer",
+    "data-test-id": "errorMsgContainer",
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/React.createElement(Label, {
+    text: text,
+    htmlFor: htmlFor,
+    palette: palette,
+    size: size,
+    dataId: dataId,
+    clipped: clipped,
+    title: clipped ? text : '',
+    customClass: style.lable
+  }), tooltip ? /*#__PURE__*/React.createElement("span", {
+    className: `${style.icon} ${colors[palette]}`,
+    "data-title": tooltip
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-information57",
+    size: "14"
+  })) : null);
+};
+
+export default ValidationMessage;
 ValidationMessage.propTypes = propTypes;
 ValidationMessage.defaultProps = defaultProps; // if (__DOCS__) {
 //   ValidationMessage.docs = {

package/es/v1/form/layout/Field/Field.js

@@ -1,33 +1,29 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import style from '../../../../form/layout/Field/Field.module.css';
-export default class Field extends Component {
-  render() {
-    let {
-      width,
-      children,
-      rowBreak,
-      column,
-      className,
-      containerClass,
-      dataId
-    } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: `${containerClass ? containerClass : ''} ${column == 'single' ? `${style.singleColumn}` : `${style[width]} `}`,
-      "data-id": dataId,
-      "data-test-id": dataId
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''} ${`fieldWidth_${width}`}`
-    }, children)), rowBreak && /*#__PURE__*/React.createElement("div", {
-      className: style.rowBreak
-    }));
-  }
 
-}
+const Field = props => {
+  const {
+    width,
+    children,
+    rowBreak,
+    column,
+    className,
+    containerClass,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `${containerClass ? containerClass : ''} ${column == 'single' ? `${style.singleColumn}` : `${style[width]} `}`,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${className ? className : ''} ${`fieldWidth_${width}`}`
+  }, children)), rowBreak && /*#__PURE__*/React.createElement("div", {
+    className: style.rowBreak
+  }));
+};
+
 Field.propTypes = propTypes;
-Field.defaultProps = defaultProps; // if (__DOCS__) {
-//   Field.docs = {
-//     componentGroup: 'ModuleAddForm'
-//   };
-// }
+Field.defaultProps = defaultProps;
+export default Field;

package/es/v1/form/layout/Section/Section.js

@@ -1,37 +1,29 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { propTypes } from './props/propTypes';
 import style from '../../../../form/layout/Section/ModuleFormSection.module.css';
-export default class Section extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  render() {
-    let {
-      title,
-      dataId,
-      containerClass,
-      titleClass,
-      className,
-      column,
-      formName
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      "data-id": dataId,
-      "data-test-id": dataId,
-      className: containerClass ? containerClass : ''
-    }, title && /*#__PURE__*/React.createElement("div", {
-      className: titleClass ? titleClass : ''
-    }, title), /*#__PURE__*/React.createElement("div", {
-      className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
-      "data-id": formName && formName,
-      "data-test-id": formName && formName
-    }, this.props.children));
-  }
+const Section = props => {
+  const {
+    title,
+    dataId,
+    containerClass,
+    titleClass,
+    className,
+    column,
+    formName
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-id": dataId,
+    "data-test-id": dataId,
+    className: containerClass ? containerClass : ''
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: titleClass ? titleClass : ''
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: `${className ? className : ''} ${column == 'single' ? style.singleColumn : ''}`,
+    "data-id": formName && formName,
+    "data-test-id": formName && formName
+  }, this.props.children));
+};
 
-}
-Section.propTypes = propTypes; // if (__DOCS__) {
-//   Section.docs = {
-//     componentGroup: 'ModuleAddForm'
-//   };
-// }
+export default Section;
+Section.propTypes = propTypes;

package/es/v1/form/layout/Section/props/propTypes.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
-  children: PropTypes.node,
   className: PropTypes.string,
   containerClass: PropTypes.string,
   dataId: PropTypes.string,

package/es/v1/list/Subject/Subject.js

@@ -1,57 +1,48 @@
 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, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Link from '../../Link/Link';
 import style from '../../../list/Subject/Subject.module.css';
-export default class Subject extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  render() {
-    let {
-      text,
-      dataId,
-      urlName,
-      href,
-      urlData,
-      onClick,
-      isLink,
-      target,
-      fontWeight,
-      className,
-      isDotted,
-      children,
-      customProps
-    } = this.props;
-    let {
-      LinkProps = {},
-      TextProps = {}
-    } = customProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
-      urlName: urlName,
-      href: href,
-      urlData: urlData,
-      onClick: onClick,
-      className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
-      dataId: dataId,
-      title: text,
-      target: target
-    }, LinkProps), children ? children : text) : /*#__PURE__*/React.createElement("span", _extends({
-      className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]}`,
-      "data-title": text,
-      "data-id": dataId,
-      "data-test-id": dataId
-    }, TextProps), text));
-  }
+const Subject = props => {
+  const {
+    text,
+    dataId,
+    urlName,
+    href,
+    urlData,
+    onClick,
+    isLink,
+    target,
+    fontWeight,
+    className,
+    isDotted,
+    children,
+    customProps
+  } = props;
+  const {
+    LinkProps = {},
+    TextProps = {}
+  } = customProps;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, _extends({
+    urlName: urlName,
+    href: href,
+    urlData: urlData,
+    onClick: onClick,
+    className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]} ${style.cursorPointer}`,
+    dataId: dataId,
+    title: text,
+    target: target
+  }, LinkProps), children ? children : text) : /*#__PURE__*/React.createElement("span", _extends({
+    className: `${style.subject} ${isDotted ? style.dotted : ''} ${className} ${style[`font_${fontWeight}`]}`,
+    "data-title": text,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, TextProps), text));
+};
 
-}
+export default Subject;
 Subject.propTypes = propTypes;
-Subject.defaultProps = defaultProps; // if (__DOCS__) {
-//   Subject.docs = {
-//     folderName: 'List',
-//     componentGroup: 'Subject'
-//   };
-// }
+Subject.defaultProps = defaultProps;

package/es/v1/list/TagNew/TagNew.js

@@ -1,33 +1,24 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import style from '../../../list/TagNew/TagNew.module.css';
-export default class TagNew extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  render() {
-    let {
-      className,
-      text,
-      animate,
-      onClick,
-      dataId
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.tagStyle} ${animate ? style.bounceIn : ''} ${className ? className : ''}`,
-      onClick: onClick,
-      "data-id": dataId,
-      "data-test-id": dataId
-    }, text);
-  }
+const TagNew = props => {
+  const {
+    className,
+    text,
+    animate,
+    onClick,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.tagStyle} ${animate ? style.bounceIn : ''} ${className ? className : ''}`,
+    onClick: onClick,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, text);
+};
 
-}
+export default TagNew;
 TagNew.propTypes = propTypes;
-TagNew.defaultProps = defaultProps; // if (__DOCS__) {
-//   TagNew.docs = {
-//     folderName: 'List',
-//     componentGroup: 'TagNew'
-//   };
-// }
+TagNew.defaultProps = defaultProps;

package/es/v1/list/Thread/Thread.js

@@ -1,43 +1,34 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/es/v1/semantic/Button/Button';
 import style from '../../../list/Thread/Thread.module.css';
-export default class Thread extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  render() {
-    let {
-      count: threadCount,
-      className,
-      iconTitle,
-      dataId,
-      align
-    } = this.props;
-    let count = threadCount === '0' ? '1' : threadCount;
-    return /*#__PURE__*/React.createElement(Button, {
-      customClass: `${style.container} ${style[`align_${align}`]} ${className}`,
-      title: iconTitle,
-      dataId: dataId,
-      a11y: {
-        ariaLabel: iconTitle
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-TK-thread",
-      size: "9"
-    }), /*#__PURE__*/React.createElement("span", {
-      className: style.count
-    }, count));
-  }
+const Thread = props => {
+  const {
+    count: threadCount,
+    className,
+    iconTitle,
+    dataId,
+    align
+  } = props;
+  const count = threadCount === '0' ? '1' : threadCount;
+  return /*#__PURE__*/React.createElement(Button, {
+    customClass: `${style.container} ${style[`align_${align}`]} ${className}`,
+    title: iconTitle,
+    dataId: dataId,
+    a11y: {
+      ariaLabel: iconTitle
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-TK-thread",
+    size: "9"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: style.count
+  }, count));
+};
 
-}
+export default Thread;
 Thread.propTypes = propTypes;
-Thread.defaultProps = defaultProps; // if (__DOCS__) {
-//   Thread.docs = {
-//     folderName: 'List',
-//     componentGroup: 'Thread'
-//   };
-// }
+Thread.defaultProps = defaultProps;

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -352,7 +352,8 @@ function StatusDropdown(props) {
       needMultiLineText: needMultiLineText,
       a11y: {
         role: isSearch ? 'option' : 'menuitem',
-        ariaSelected: value === item[keyName]
+        ariaSelected: value === item[keyName],
+        'data-a11y-list-active': selectedIndex === i
       }
     })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
       className: style.svgWrapper,

package/es/v1/list/status/StatusListItem/StatusListItem.js

@@ -35,7 +35,9 @@ export default function StatusListItem(props) {
     getRef,
     id,
     onClick,
-    onMouseEnter
+    onMouseEnter,
+    customClass,
+    children
   } = props;
   let options = {};
   let {
@@ -70,7 +72,7 @@ export default function StatusListItem(props) {
     isCover: false,
     align: "baseline",
     alignBox: "row",
-    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
+    className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
     dataId: String(value).replace("'", '_'),
     onClick: !isDisabled && handleClick,
     onMouseEnter: handleMouseEnter,
@@ -78,14 +80,19 @@ export default function StatusListItem(props) {
     tagName: isLink ? 'a' : 'li',
     "data-title": isDisabled ? disableTitle : null,
     tabindex: isDisabled ? '-1' : '0'
-  }, options), /*#__PURE__*/React.createElement(Box, {
+  }, options, a11y), /*#__PURE__*/React.createElement(Box, {
     className: `${style.statusType} ${style[bulletColor]}`
   }), /*#__PURE__*/React.createElement(Box, {
-    "data-title": isDisabled ? null : title,
     flexible: true,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: needMultiLineText ? 'top' : 'vertical'
+  }, /*#__PURE__*/React.createElement(Box, {
+    "data-title": isDisabled ? null : title,
     shrink: true,
     className: needMultiLineText ? style.multiLineValue : style.value
-  }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
+  }, value), /*#__PURE__*/React.createElement(Box, null, children && children))), needTick && active ? /*#__PURE__*/React.createElement("div", {
     className: style.tickIcon,
     "aria-hidden": ariaHidden
   }, /*#__PURE__*/React.createElement(Icon, {

package/es/v1/list/status/StatusListItem/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   needBorder: true,
   bulletColor: 'black',
   a11y: {},
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: ''
 };

package/es/v1/list/status/StatusListItem/props/propTypes.js

@@ -25,5 +25,7 @@ export const propTypes = {
     role: PropTypes.string,
     ariaSelected: PropTypes.bool,
     ariaHidden: PropTypes.bool
-  })
+  }),
+  customClass: PropTypes.string,
+  children: PropTypes.node
 };

package/es/v1/lookup/Lookup/Lookup.js

@@ -1,3 +1,5 @@
+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); }
+
 /*** Libraries ***/
 import React, { useRef, useCallback, useEffect } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
@@ -36,7 +38,8 @@ export default function Lookup(props) {
     ariaLabelledby,
     ariaDescribedby,
     ariaLabel,
-    ariaModal = isActive ? true : undefined
+    ariaModal = isActive ? true : undefined,
+    ...a11yAttributes
   } = a11y;
   const {
     focusScopeProps = {}
@@ -64,7 +67,7 @@ export default function Lookup(props) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, []);
-  const content = /*#__PURE__*/React.createElement("div", {
+  const content = /*#__PURE__*/React.createElement("div", _extends({
     ref: createRef,
     tabIndex: "-1",
     "data-a11y-need-focus-style": "false",
@@ -77,7 +80,7 @@ export default function Lookup(props) {
     className: `${style.box} ${style[`${size}Size`]}`,
     "data-id": dataId,
     "data-test-id": dataId
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
     "data-drag-container": "true",
     isCover: false,
     className: isMinHeight ? `${style.wrapper}` : `${style.coverwrap}`

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -3,7 +3,6 @@
   --commonalert_border_color: var(--zdt_commonalert_default_border);
   --globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
   --globalnotification_text_color: var(--zdt_globalnotification_default_text);
-  --globalnotification_box_shadow: var(--zdt_globalnotification_default_box_shadow);
 }
 
 .message {
@@ -180,4 +179,4 @@
 [dir=rtl] .close {
   left: var(--zd_size12) ;
   margin: auto var(--zd_size25) auto 0 ;
-}
+}

package/lib/Drawer/Drawer.js

@@ -39,6 +39,8 @@ var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/F
 
 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); } }
@@ -253,7 +255,8 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           onBodyClick = _this$props4.onBodyClick,
           onClose = _this$props4.onClose,
           needFocusScope = _this$props4.needFocusScope,
-          customProps = _this$props4.customProps;
+          customProps = _this$props4.customProps,
+          a11y = _this$props4.a11y;
       var _customProps$focusSco = customProps.focusScopeProps,
           focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
       var _focusScopeProps$need = focusScopeProps.needAutoFocus,
@@ -280,12 +283,12 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
         return child;
       });
 
-      var content = /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      var content = /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({
         className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size]),
         "data-a11y-need-focus-style": "false",
         tabindex: -1,
         eleRef: this.createRef
-      }, /*#__PURE__*/_react["default"].createElement(_Card.Card, {
+      }, a11y), /*#__PURE__*/_react["default"].createElement(_Card.Card, {
         onClick: function onClick(e) {
           e && e.stopPropagation && e.stopPropagation();
           onBodyClick(e);

package/lib/Drawer/props/defaultProps.js

@@ -26,6 +26,7 @@ var Drawer_defaultProps = {
   needAutoZindex: true,
   onBodyClick: function onBodyClick() {},
   needFocusScope: false,
-  customProps: {}
+  customProps: {},
+  a11y: {}
 };
 exports.Drawer_defaultProps = Drawer_defaultProps;

package/lib/Drawer/props/propTypes.js

@@ -61,6 +61,7 @@ var Drawer_propTypes = {
   subDrawerSize: _propTypes["default"].oneOf(['xsmall', 'small', 'medium']),
   needFocusScope: _propTypes["default"].bool,
   customProps: _propTypes["default"].object,
-  innerPortalName: _propTypes["default"].string
+  innerPortalName: _propTypes["default"].string,
+  a11y: _propTypes["default"].object
 };
 exports.Drawer_propTypes = Drawer_propTypes;

package/lib/Hooks/Dragger/useDragger.js

@@ -37,9 +37,10 @@ function useDragger(_ref) {
   });
   var draggable = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
-    parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || (0, _Config.getDotLibraryConfig)('draggerBoundary') || document.body;
-  }, []); //did Mount
-  //calculateDragPosition --> To sperate Dom action
+    if (isActive) {
+      parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || (0, _Config.getDotLibraryConfig)('draggerBoundary') || document.body;
+    }
+  }, [isActive]); //calculateDragPosition --> To sperate Dom action
 
   var calculateDragPosition = (0, _react.useCallback)(function (x, y) {
     if (parentEle.current && draggableEle.current) {

package/lib/IconButton/IconButton.js

@@ -73,8 +73,8 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
     key: "handleToggle",
     value: function handleToggle(e) {
       if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
-        e.preventDefault();
-        this.triggerClick(e);
+        e.preventDefault(); // this.triggerClick(e);
+
         this.triggerMouseDown(e);
       }
     }