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

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);
       }
     }

package/lib/NewStar/NewStar.module.css

@@ -2,6 +2,7 @@
   position: absolute;
   height: var(--zd_size20) ;
   width: var(--zd_size21) ;
+  pointer-events: none;
 }
 .topLeft {
   top: 0 ;
@@ -90,73 +91,133 @@
   animation-delay: 1s;
 }
 
-.topLeft .starOne{top:0 }
-
-[dir=ltr] .topLeft .starOne{
-  left:0 }
-
-[dir=rtl] .topLeft .starOne{right:0 }
-.topLeft .starTwo{top:0 
-  /*  Variable:Ignore  */}
-[dir=ltr] .topLeft .starTwo{
-  left:var(--zd_size10) }
-[dir=rtl] .topLeft .starTwo{right:var(--zd_size10) }
-.topLeft .starThree{
-  /*  Variable:Ignore  */top:10px}
-[dir=ltr] .topLeft .starThree{
-  left:0 }
-[dir=rtl] .topLeft .starThree{right:0 }
-
-.topRight .starOne{top:0 }
-
-[dir=ltr] .topRight .starOne{
-  right:0 }
-
-[dir=rtl] .topRight .starOne{left:0 }
-.topRight .starTwo{top:0 
-  /*  Variable:Ignore  */}
-[dir=ltr] .topRight .starTwo{
-  right:var(--zd_size10) }
-[dir=rtl] .topRight .starTwo{left:var(--zd_size10) }
-.topRight .starThree{
-  /*  Variable:Ignore  */top:10px}
-[dir=ltr] .topRight .starThree{
-  right:0 }
-[dir=rtl] .topRight .starThree{left:0 }
-
-.bottomLeft .starOne{bottom:0 }
-
-[dir=ltr] .bottomLeft .starOne{
-  left:0 }
-
-[dir=rtl] .bottomLeft .starOne{right:0 }
-.bottomLeft .starTwo{bottom:0 
-  /*  Variable:Ignore  */}
-[dir=ltr] .bottomLeft .starTwo{
-  left:var(--zd_size10) }
-[dir=rtl] .bottomLeft .starTwo{right:var(--zd_size10) }
-.bottomLeft .starThree{
-  /*  Variable:Ignore  */bottom:10px}
-[dir=ltr] .bottomLeft .starThree{
-  left:0 }
-[dir=rtl] .bottomLeft .starThree{right:0 }
-
-.bottomRight .starOne{bottom:0 }
-
-[dir=ltr] .bottomRight .starOne{
-  right:0 }
-
-[dir=rtl] .bottomRight .starOne{left:0 }
-.bottomRight .starTwo{bottom:0 
-  /*  Variable:Ignore  */}
-[dir=ltr] .bottomRight .starTwo{
-  right:var(--zd_size10) }
-[dir=rtl] .bottomRight .starTwo{left:var(--zd_size10) }
-.bottomRight .starThree{
-  /*  Variable:Ignore  */bottom:10px}
-[dir=ltr] .bottomRight .starThree{
-  right:0 }
-[dir=rtl] .bottomRight .starThree{left:0 }
+.topLeft .starOne {
+  top: 0 ;
+}
+
+[dir=ltr] .topLeft .starOne {
+  left: 0 ;
+}
+
+[dir=rtl] .topLeft .starOne {
+  right: 0 ;
+}
+.topLeft .starTwo {
+  top: 0 ;
+  /*  Variable:Ignore  */
+}
+[dir=ltr] .topLeft .starTwo {
+  left: var(--zd_size10) ;
+}
+[dir=rtl] .topLeft .starTwo {
+  right: var(--zd_size10) ;
+}
+.topLeft .starThree {
+  /*  Variable:Ignore  */
+  top: 10px;
+}
+[dir=ltr] .topLeft .starThree {
+  left: 0 ;
+}
+[dir=rtl] .topLeft .starThree {
+  right: 0 ;
+}
+
+.topRight .starOne {
+  top: 0 ;
+}
+
+[dir=ltr] .topRight .starOne {
+  right: 0 ;
+}
+
+[dir=rtl] .topRight .starOne {
+  left: 0 ;
+}
+.topRight .starTwo {
+  top: 0 ;
+  /*  Variable:Ignore  */
+}
+[dir=ltr] .topRight .starTwo {
+  right: var(--zd_size10) ;
+}
+[dir=rtl] .topRight .starTwo {
+  left: var(--zd_size10) ;
+}
+.topRight .starThree {
+  /*  Variable:Ignore  */
+  top: 10px;
+}
+[dir=ltr] .topRight .starThree {
+  right: 0 ;
+}
+[dir=rtl] .topRight .starThree {
+  left: 0 ;
+}
+
+.bottomLeft .starOne {
+  bottom: 0 ;
+}
+
+[dir=ltr] .bottomLeft .starOne {
+  left: 0 ;
+}
+
+[dir=rtl] .bottomLeft .starOne {
+  right: 0 ;
+}
+.bottomLeft .starTwo {
+  bottom: 0 ;
+  /*  Variable:Ignore  */
+}
+[dir=ltr] .bottomLeft .starTwo {
+  left: var(--zd_size10) ;
+}
+[dir=rtl] .bottomLeft .starTwo {
+  right: var(--zd_size10) ;
+}
+.bottomLeft .starThree {
+  /*  Variable:Ignore  */
+  bottom: 10px;
+}
+[dir=ltr] .bottomLeft .starThree {
+  left: 0 ;
+}
+[dir=rtl] .bottomLeft .starThree {
+  right: 0 ;
+}
+
+.bottomRight .starOne {
+  bottom: 0 ;
+}
+
+[dir=ltr] .bottomRight .starOne {
+  right: 0 ;
+}
+
+[dir=rtl] .bottomRight .starOne {
+  left: 0 ;
+}
+.bottomRight .starTwo {
+  bottom: 0 ;
+  /*  Variable:Ignore  */
+}
+[dir=ltr] .bottomRight .starTwo {
+  right: var(--zd_size10) ;
+}
+[dir=rtl] .bottomRight .starTwo {
+  left: var(--zd_size10) ;
+}
+.bottomRight .starThree {
+  /*  Variable:Ignore  */
+  bottom: 10px;
+}
+[dir=ltr] .bottomRight .starThree {
+  right: 0 ;
+}
+[dir=rtl] .bottomRight .starThree {
+  left: 0 ;
+}
 
 @keyframes twinkle {
   0% {

package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -23,6 +23,7 @@
   font-family: var(--zd_semibold);
   /* css:theme-validation:ignore */
   color: var(--titleColor);
+  word-wrap: break-word;
 }
 .small .title {
   font-size: var(--zd_font_size16) ;
@@ -52,6 +53,9 @@
 .linkDescWrapper {
   margin-top: var(--zd_size20) ;
 }
+.desc{
+  word-wrap: break-word;
+}
 [dir=ltr] .linkDesc, [dir=ltr] .desc {
   margin-right: var(--zd_size4) ;
 }