@zohodesk/dot 1.0.0-temp-226.1 → 1.0.0-temp-228

package/README.md

@@ -2,6 +2,11 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.9.8
+
+- **DotProvider** - Variables package handled and separated the component & variable import files
+- **Dependency**: @zohodesk/variables@1.3.0 , @zohodesk/components@1.6.6
+
 # 1.9.7
 
 - **Upload** => upload_overlay_bg color contrast fixed

package/es/ActionButton/ActionButton.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); }
+
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
@@ -7,13 +9,16 @@ import Button from '@zohodesk/components/es/Button/Button';
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
 import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import style from "./ActionButton.module.css";
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {
     super(props);
+    this.getElementId = getUniqueId(this);
     this.handleTogglePopup = this.handleTogglePopup.bind(this);
     this.handlePopupOpen = this.handlePopupOpen.bind(this);
+    this.popupId = this.getElementId();
   }
 
   handlePopupOpen(e) {
@@ -64,8 +69,12 @@ export class ActionButton extends React.Component {
       isAbsolutePositioningNeeded,
       isRestrictScroll,
       positionsOffset,
-      targetOffset
+      targetOffset,
+      a11yAttributes
     } = this.props;
+    const {
+      splitButton: a11yAttributes_splitButton
+    } = a11yAttributes;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
@@ -92,8 +101,7 @@ export class ActionButton extends React.Component {
       dataId: dataId,
       className: `${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
       "data-title": dataTitle,
-      tagName: "button",
-      tabIndex: "0"
+      tagName: "button"
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Box, {
@@ -113,22 +121,23 @@ export class ActionButton extends React.Component {
     }, text) : null)), subText ? /*#__PURE__*/React.createElement(Box, {
       "data-title": removeChildrenTooltip ? null : subText,
       className: style.subTxt
-    }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, {
+    }, subText) : null)), children ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _extends({}, a11yAttributes_splitButton, {
       onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
       onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
       onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
       className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
       dataId: `${dataId}_arrowButton`,
-      tabIndex: "0",
       tagName: "button",
-      dataSelectorId: `${dataSelectorId}_arrowButton`
-    }, /*#__PURE__*/React.createElement(Container, {
+      dataSelectorId: `${dataSelectorId}_arrowButton`,
+      "aria-expanded": isPopupOpen,
+      "aria-controls": this.popupId
+    }), /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-down",
       size: "6",
       iconClass: style.arrow
-    })), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+    }))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
       size: "small",
       isActive: isPopupOpen,
       boxPosition: position,
@@ -146,7 +155,8 @@ export class ActionButton extends React.Component {
       isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
       isRestrictScroll: isRestrictScroll,
       positionsOffset: positionsOffset,
-      targetOffset: targetOffset
+      targetOffset: targetOffset,
+      htmlId: this.popupId
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,

package/es/ActionButton/props/defaultProps.js

@@ -15,5 +15,6 @@ export const defaultProps = {
   removeChildrenTooltip: false,
   innerClassName: '',
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  a11yAttributes: {}
 };

package/es/ActionButton/props/propTypes.js

@@ -33,5 +33,8 @@ export const propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object
+  targetOffset: PropTypes.object,
+  a11yAttributes: PropTypes.shape({
+    splitButton: PropTypes.object
+  })
 };

package/es/list/Comment/Comment.module.css

@@ -1,29 +1,29 @@
-.varClass {
-  --icon_color: var(--zdt_comment_iconText);
-}
-.container {
-  composes: varClass;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-  position: relative;
-  color: var(--icon_color);
-  padding: 0 var(--zd_size2) ;
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_comment_hover_iconText);
-}
-.count {
-  position: absolute;
-  top: var(--zd_size1) ;
-  font-size: var(--zd_font_size9) ;
-  text-align: center;
-}
-[dir=ltr] .count {
-  left: 100% ;
-}
-[dir=rtl] .count {
-  right: 100% ;
-}
-.commentIcon {
-  font-size: var(--zd_font_size13) ;
-}
+.varClass {
+  --icon_color: var(--zdt_comment_iconText);
+}
+.container {
+  composes: varClass;
+  composes: inlineBlockMiddle from '../listCommon.module.css';
+  position: relative;
+  color: var(--icon_color);
+  padding: 0 var(--zd_size2) ;
+  cursor: pointer;
+}
+.container:hover {
+  --icon_color: var(--zdt_comment_hover_iconText);
+}
+.count {
+  position: absolute;
+  top: var(--zd_size1) ;
+  font-size: var(--zd_font_size9) ;
+  text-align: center;
+}
+[dir=ltr] .count {
+  left: 100% ;
+}
+[dir=rtl] .count {
+  right: 100% ;
+}
+.commentIcon {
+  font-size: var(--zd_font_size13) ;
+}

package/es/list/Dot/Dot.module.css

@@ -1,15 +1,15 @@
-.varClass {
-  --dotColor: var(--zdt_dot_text)
-}
-.dot {
-  composes: varClass;
-  font-size: var(--zd_font_size16) ;
-  color: var(--dotColor);
-  transform: perspective(1px);
-}
-.list {
-  margin: 0 var(--zd_size6) ;
-}
-.minimalList {
-  margin: 0 var(--zd_size6) ;
-}
+.varClass {
+  --dotColor: var(--zdt_dot_text)
+}
+.dot {
+  composes: varClass;
+  font-size: var(--zd_font_size16) ;
+  color: var(--dotColor);
+  transform: perspective(1px);
+}
+.list {
+  margin: 0 var(--zd_size6) ;
+}
+.minimalList {
+  margin: 0 var(--zd_size6) ;
+}

package/es/list/ListLayout/ListLayout.module.css

@@ -1,80 +1,80 @@
-.varClass {
-  --listBorder: var(--zdt_listLayout_border)
-}
-
-.container {
-  position: relative;
-  composes: varClass;
-}
-
-.listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
-  background-color: var(--zdt_listLayout_hover_bg);
-}
-
-.active, .active:hover {
-  background-color: var(--zdt_listLayout_active_bg);
-}
-
-.cursorPointer {
-  cursor: pointer
-}
-
-/* View */
-.classic .innerContainer {
-  min-height: var(--zd_size70) ;
-  padding: var(--zd_size13) 0 ;
-}
-
-.compact .innerContainer {
-  min-height: var(--zd_size41) ;
-  padding: var(--zd_size5) 0 ;
-}
-
-.superCompact .innerContainer {
-  min-height: var(--zd_size35) ;
-  padding: var(--zd_size2) 0 ;
-}
-
-.compact .innerContainer,
-.classic .innerContainer,
-.superCompact .innerContainer {
-  /* css:theme-validation:ignore */
-}
-
-.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
-  border-bottom: 1px dotted var(--listBorder);
-}
-
-[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
-  border-left: var(--zd_size2) solid transparent;
-}
-
-[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
-  border-right: var(--zd_size2) solid transparent;
-}
-
-[dir=ltr] .keyboardActive, [dir=ltr] .active {
-  border-top-left-radius: var(--zd_size5);
-  border-bottom-left-radius: var(--zd_size5);
-}
-
-[dir=rtl] .keyboardActive, [dir=rtl] .active {
-  border-top-right-radius: var(--zd_size5);
-  border-bottom-right-radius: var(--zd_size5);
-}
-
-[dir=ltr] .keyboardActive {
-  border-left-color: var(--zdt_listLayout_keyboard_active_border);
-}
-
-[dir=rtl] .keyboardActive {
-  border-right-color: var(--zdt_listLayout_keyboard_active_border);
-}
-
-[dir=ltr] .active {
-  border-left-color: var(--zdt_listLayout_active_border);
-}
-
-[dir=rtl] .active {
-  border-right-color: var(--zdt_listLayout_active_border);
+.varClass {
+  --listBorder: var(--zdt_listLayout_border)
+}
+
+.container {
+  position: relative;
+  composes: varClass;
+}
+
+.listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
+  background-color: var(--zdt_listLayout_hover_bg);
+}
+
+.active, .active:hover {
+  background-color: var(--zdt_listLayout_active_bg);
+}
+
+.cursorPointer {
+  cursor: pointer
+}
+
+/* View */
+.classic .innerContainer {
+  min-height: var(--zd_size70) ;
+  padding: var(--zd_size13) 0 ;
+}
+
+.compact .innerContainer {
+  min-height: var(--zd_size41) ;
+  padding: var(--zd_size5) 0 ;
+}
+
+.superCompact .innerContainer {
+  min-height: var(--zd_size35) ;
+  padding: var(--zd_size2) 0 ;
+}
+
+.compact .innerContainer,
+.classic .innerContainer,
+.superCompact .innerContainer {
+  /* css:theme-validation:ignore */
+}
+
+.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
+  border-bottom: 1px dotted var(--listBorder);
+}
+
+[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
+  border-left: var(--zd_size2) solid transparent;
+}
+
+[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
+  border-right: var(--zd_size2) solid transparent;
+}
+
+[dir=ltr] .keyboardActive, [dir=ltr] .active {
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+
+[dir=rtl] .keyboardActive, [dir=rtl] .active {
+  border-top-right-radius: var(--zd_size5);
+  border-bottom-right-radius: var(--zd_size5);
+}
+
+[dir=ltr] .keyboardActive {
+  border-left-color: var(--zdt_listLayout_keyboard_active_border);
+}
+
+[dir=rtl] .keyboardActive {
+  border-right-color: var(--zdt_listLayout_keyboard_active_border);
+}
+
+[dir=ltr] .active {
+  border-left-color: var(--zdt_listLayout_active_border);
+}
+
+[dir=rtl] .active {
+  border-right-color: var(--zdt_listLayout_active_border);
 }

package/lib/ActionButton/ActionButton.js

@@ -25,12 +25,16 @@ var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es
 
 var _CssProvider = _interopRequireDefault(require("@zohodesk/components/es/Provider/CssProvider"));
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _ActionButtonModule = _interopRequireDefault(require("./ActionButton.module.css"));
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.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); } }
@@ -62,8 +66,10 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, ActionButton);
 
     _this = _super.call(this, props);
+    _this.getElementId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
     _this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
     _this.handlePopupOpen = _this.handlePopupOpen.bind(_assertThisInitialized(_this));
+    _this.popupId = _this.getElementId();
     return _this;
   }
 
@@ -117,7 +123,9 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
           isAbsolutePositioningNeeded = _this$props3.isAbsolutePositioningNeeded,
           isRestrictScroll = _this$props3.isRestrictScroll,
           positionsOffset = _this$props3.positionsOffset,
-          targetOffset = _this$props3.targetOffset;
+          targetOffset = _this$props3.targetOffset,
+          a11yAttributes = _this$props3.a11yAttributes;
+      var a11yAttributes_splitButton = a11yAttributes.splitButton;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
@@ -144,8 +152,7 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         dataId: dataId,
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"].contentBox, " ").concat(_ActionButtonModule["default"][palette + 'Btn'], " ").concat(_ActionButtonModule["default"][size + '_btnBox'], " ").concat(children ? _ActionButtonModule["default"].contentBoxBdr : _ActionButtonModule["default"].contentBoxBdrRds, " ").concat(_ActionButtonModule["default"].clickable, " ").concat(innerClassName, " "),
         "data-title": dataTitle,
-        tagName: "button",
-        tabIndex: "0"
+        tagName: "button"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -165,22 +172,23 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
       }, text) : null)), subText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": removeChildrenTooltip ? null : subText,
         className: _ActionButtonModule["default"].subTxt
-      }, subText) : null)), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, subText) : null)), children ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({}, a11yAttributes_splitButton, {
         onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
         onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),
         dataId: "".concat(dataId, "_arrowButton"),
-        tabIndex: "0",
         tagName: "button",
-        dataSelectorId: "".concat(dataSelectorId, "_arrowButton")
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        dataSelectorId: "".concat(dataSelectorId, "_arrowButton"),
+        "aria-expanded": isPopupOpen,
+        "aria-controls": this.popupId
+      }), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down",
         size: "6",
         iconClass: _ActionButtonModule["default"].arrow
-      })), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+      }))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
         size: "small",
         isActive: isPopupOpen,
         boxPosition: position,
@@ -198,7 +206,8 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
         isRestrictScroll: isRestrictScroll,
         positionsOffset: positionsOffset,
-        targetOffset: targetOffset
+        targetOffset: targetOffset,
+        htmlId: this.popupId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,

package/lib/ActionButton/props/defaultProps.js

@@ -21,6 +21,7 @@ var defaultProps = {
   removeChildrenTooltip: false,
   innerClassName: '',
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  a11yAttributes: {}
 };
 exports.defaultProps = defaultProps;

package/lib/ActionButton/props/propTypes.js

@@ -43,6 +43,9 @@ var propTypes = {
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   isRestrictScroll: _propTypes["default"].bool,
   positionsOffset: _propTypes["default"].object,
-  targetOffset: _propTypes["default"].object
+  targetOffset: _propTypes["default"].object,
+  a11yAttributes: _propTypes["default"].shape({
+    splitButton: _propTypes["default"].object
+  })
 };
 exports.propTypes = propTypes;

package/lib/list/Comment/Comment.module.css

@@ -1,29 +1,29 @@
-.varClass {
-  --icon_color: var(--zdt_comment_iconText);
-}
-.container {
-  composes: varClass;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-  position: relative;
-  color: var(--icon_color);
-  padding: 0 var(--zd_size2) ;
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_comment_hover_iconText);
-}
-.count {
-  position: absolute;
-  top: var(--zd_size1) ;
-  font-size: var(--zd_font_size9) ;
-  text-align: center;
-}
-[dir=ltr] .count {
-  left: 100% ;
-}
-[dir=rtl] .count {
-  right: 100% ;
-}
-.commentIcon {
-  font-size: var(--zd_font_size13) ;
-}
+.varClass {
+  --icon_color: var(--zdt_comment_iconText);
+}
+.container {
+  composes: varClass;
+  composes: inlineBlockMiddle from '../listCommon.module.css';
+  position: relative;
+  color: var(--icon_color);
+  padding: 0 var(--zd_size2) ;
+  cursor: pointer;
+}
+.container:hover {
+  --icon_color: var(--zdt_comment_hover_iconText);
+}
+.count {
+  position: absolute;
+  top: var(--zd_size1) ;
+  font-size: var(--zd_font_size9) ;
+  text-align: center;
+}
+[dir=ltr] .count {
+  left: 100% ;
+}
+[dir=rtl] .count {
+  right: 100% ;
+}
+.commentIcon {
+  font-size: var(--zd_font_size13) ;
+}

package/lib/list/Dot/Dot.module.css

@@ -1,15 +1,15 @@
-.varClass {
-  --dotColor: var(--zdt_dot_text)
-}
-.dot {
-  composes: varClass;
-  font-size: var(--zd_font_size16) ;
-  color: var(--dotColor);
-  transform: perspective(1px);
-}
-.list {
-  margin: 0 var(--zd_size6) ;
-}
-.minimalList {
-  margin: 0 var(--zd_size6) ;
-}
+.varClass {
+  --dotColor: var(--zdt_dot_text)
+}
+.dot {
+  composes: varClass;
+  font-size: var(--zd_font_size16) ;
+  color: var(--dotColor);
+  transform: perspective(1px);
+}
+.list {
+  margin: 0 var(--zd_size6) ;
+}
+.minimalList {
+  margin: 0 var(--zd_size6) ;
+}

package/lib/list/ListLayout/ListLayout.module.css

@@ -1,80 +1,80 @@
-.varClass {
-  --listBorder: var(--zdt_listLayout_border)
-}
-
-.container {
-  position: relative;
-  composes: varClass;
-}
-
-.listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
-  background-color: var(--zdt_listLayout_hover_bg);
-}
-
-.active, .active:hover {
-  background-color: var(--zdt_listLayout_active_bg);
-}
-
-.cursorPointer {
-  cursor: pointer
-}
-
-/* View */
-.classic .innerContainer {
-  min-height: var(--zd_size70) ;
-  padding: var(--zd_size13) 0 ;
-}
-
-.compact .innerContainer {
-  min-height: var(--zd_size41) ;
-  padding: var(--zd_size5) 0 ;
-}
-
-.superCompact .innerContainer {
-  min-height: var(--zd_size35) ;
-  padding: var(--zd_size2) 0 ;
-}
-
-.compact .innerContainer,
-.classic .innerContainer,
-.superCompact .innerContainer {
-  /* css:theme-validation:ignore */
-}
-
-.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
-  border-bottom: 1px dotted var(--listBorder);
-}
-
-[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
-  border-left: var(--zd_size2) solid transparent;
-}
-
-[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
-  border-right: var(--zd_size2) solid transparent;
-}
-
-[dir=ltr] .keyboardActive, [dir=ltr] .active {
-  border-top-left-radius: var(--zd_size5);
-  border-bottom-left-radius: var(--zd_size5);
-}
-
-[dir=rtl] .keyboardActive, [dir=rtl] .active {
-  border-top-right-radius: var(--zd_size5);
-  border-bottom-right-radius: var(--zd_size5);
-}
-
-[dir=ltr] .keyboardActive {
-  border-left-color: var(--zdt_listLayout_keyboard_active_border);
-}
-
-[dir=rtl] .keyboardActive {
-  border-right-color: var(--zdt_listLayout_keyboard_active_border);
-}
-
-[dir=ltr] .active {
-  border-left-color: var(--zdt_listLayout_active_border);
-}
-
-[dir=rtl] .active {
-  border-right-color: var(--zdt_listLayout_active_border);
+.varClass {
+  --listBorder: var(--zdt_listLayout_border)
+}
+
+.container {
+  position: relative;
+  composes: varClass;
+}
+
+.listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
+  background-color: var(--zdt_listLayout_hover_bg);
+}
+
+.active, .active:hover {
+  background-color: var(--zdt_listLayout_active_bg);
+}
+
+.cursorPointer {
+  cursor: pointer
+}
+
+/* View */
+.classic .innerContainer {
+  min-height: var(--zd_size70) ;
+  padding: var(--zd_size13) 0 ;
+}
+
+.compact .innerContainer {
+  min-height: var(--zd_size41) ;
+  padding: var(--zd_size5) 0 ;
+}
+
+.superCompact .innerContainer {
+  min-height: var(--zd_size35) ;
+  padding: var(--zd_size2) 0 ;
+}
+
+.compact .innerContainer,
+.classic .innerContainer,
+.superCompact .innerContainer {
+  /* css:theme-validation:ignore */
+}
+
+.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
+  border-bottom: 1px dotted var(--listBorder);
+}
+
+[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
+  border-left: var(--zd_size2) solid transparent;
+}
+
+[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
+  border-right: var(--zd_size2) solid transparent;
+}
+
+[dir=ltr] .keyboardActive, [dir=ltr] .active {
+  border-top-left-radius: var(--zd_size5);
+  border-bottom-left-radius: var(--zd_size5);
+}
+
+[dir=rtl] .keyboardActive, [dir=rtl] .active {
+  border-top-right-radius: var(--zd_size5);
+  border-bottom-right-radius: var(--zd_size5);
+}
+
+[dir=ltr] .keyboardActive {
+  border-left-color: var(--zdt_listLayout_keyboard_active_border);
+}
+
+[dir=rtl] .keyboardActive {
+  border-right-color: var(--zdt_listLayout_keyboard_active_border);
+}
+
+[dir=ltr] .active {
+  border-left-color: var(--zdt_listLayout_active_border);
+}
+
+[dir=rtl] .active {
+  border-right-color: var(--zdt_listLayout_active_border);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-226.1",
+  "version": "1.0.0-temp-228",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -34,7 +34,7 @@
     "snap-update": "npm run test-clean && npm run test -- -u",
     "sstest": "react-cli sstest",
     "common_package_build": "cd ../common && npm run build && cd ../dot",
-    "prepublishOnly": "node prePublish.js && npm run downloadOnly && npm run css:review  && npm run review:props",
+    "prepublishOnly": "node prePublish.js && npm run downloadOnly",
     "postpublish": "node postPublish.js",
     "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib &&  react-cli clean ./package-lock.json &&  react-cli clean ./result.json",
     "download": "npm run downloadOnly  && cd ../ && npm run download",
@@ -68,13 +68,13 @@
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
-    "@zohodesk/components": "1.0.0-temp-250",
+    "@zohodesk/components": "1.6.6",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/icons": "1.2.8",
-    "@zohodesk/layout": "^3.1.0",
+    "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.3.3",
     "@zohodesk/utils": "1.3.16",
-    "@zohodesk/variables": "1.1.1-exp.4",
+    "@zohodesk/variables": "1.3.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
@@ -84,8 +84,8 @@
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
-    "@zohodesk/variables": "1.1.1-exp.4",
-    "@zohodesk/components": "1.0.0-temp-250",
+    "@zohodesk/variables": "1.3.0",
+    "@zohodesk/components": "1.6.6",
     "@zohodesk/icons": "1.2.8",
     "@zohodesk/svg": "1.3.3",
     "@zohodesk/virtualizer": "1.0.13",
@@ -95,4 +95,4 @@
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0"
   }
-}
+}