@zohodesk/dot 1.0.0-temp-230.1 → 1.0.0-temp-230.3

package/es/AttachmentViewer/AttachmentImage.js

@@ -43,7 +43,8 @@ export default class AttachmentImage extends Component {
       isCover,
       customClass,
       onLoad,
-      onError
+      onError,
+      imageRef
     } = this.props;
     const {
       isImageValid
@@ -59,6 +60,7 @@ export default class AttachmentImage extends Component {
       className: customImageClass,
       alt: alt,
       isCover: isCover,
+      eleRef: imageRef,
       onLoad: onLoad,
       onError: onError
     });

package/es/AttachmentViewer/AttachmentViewer.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { AttachmentViewer_defaultProps } from "./props/defaultProps";
 import { AttachmentViewer_propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
-import { Icon } from '@zohodesk/icons';
+import Icon from '@zohodesk/icons/es/Icon';
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import Typography from '@zohodesk/components/es/Typography/Typography';
@@ -107,11 +107,11 @@ export default class AttachmentViewer extends Component {
       selectedIndex
     } = this.state;
     let indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
-    const attachmentPreviewUrlChanged = previewObj.previewData[0]?.viewUrl !== prevState.data[0]?.viewUrl; // Triggers an update if the previewed attachment is edited by the Attachment Annotator.
+    const attachmentPreviewUrlChanged = previewObj.previewData.some((value, index) => value?.viewUrl !== prevState.data[index]?.viewUrl); // Triggers an update if any previewed attachment is edited by the Attachment Annotator.
 
     if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged || attachmentPreviewUrlChanged) {
       let objChanged = previewObj.previewData.some((value, index) => {
-        return shallowDiff(value, prevProps.previewObj[index]);
+        return shallowDiff(value, prevProps.previewObj.previewData[index]);
       });
 
       if (objChanged || indexChanged) {
@@ -367,7 +367,8 @@ export default class AttachmentViewer extends Component {
       children,
       dataId = 'attachViewer',
       customClass = {},
-      customProps = {}
+      customProps = {},
+      imageRef
     } = data;
     const {
       imageProps = {}
@@ -376,6 +377,7 @@ export default class AttachmentViewer extends Component {
       customImageClass = '',
       customChildrenClass = ''
     } = customClass;
+    const resolvedImageRef = imageRef;
     const retainZoom = canZoom && selectedIndex == i && maintainZoom;
     const handleZoomOut = isPreviewAttachmentValid && isZoomed ? this.zoomOut.bind(this, i) : undefined;
     const handleZoomIn = isPreviewAttachmentValid && !isZoomed ? e => this.zoomIn(e, i, true) : undefined;
@@ -387,15 +389,16 @@ export default class AttachmentViewer extends Component {
       customImageClass,
       customChildrenClass
     });
-    const img = /*#__PURE__*/React.createElement(AttachmentImage, _extends({
+    const img = /*#__PURE__*/React.createElement(AttachmentImage, _extends({}, imageProps, {
       customClass: imageFrameCustomClass,
       src: viewUrl,
       onClick: handleImageClick,
       alt: name,
       dataId: dataId,
       id: `img${i}`,
-      isCover: false
-    }, imageProps), children);
+      isCover: false,
+      imageRef: resolvedImageRef
+    }), children);
     return typeof renderCustomImagePreviewElement === 'function' ? renderCustomImagePreviewElement({
       defaultView: img,
       data,

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -2,7 +2,7 @@
     height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size15) ;
     composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
     background-color: var(--zdt_attachmentviewer_header_bg);
@@ -10,20 +10,13 @@
 }
 
 .title {
+    padding-inline-end: var(--zd_size15) ;
     max-width: 50% ;
     composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .title {
-    padding-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .title {
-    padding-left: var(--zd_size15) ;
-}
-
 .count {
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size10) ;
     position: absolute;
     composes: xMiddle from '~@zohodesk/components/es/common/common.module.css';
@@ -80,7 +73,7 @@
 
 .preview {
     margin-block: var(--zd_size20) ;
-    margin-inline:0 ;
+    margin-inline: 0 ;
     composes: posrel from '~@zohodesk/components/es/common/common.module.css';
     text-align: center;
 }
@@ -136,7 +129,7 @@
 }
 
 .listContainer {
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size18) ;
 }
 
@@ -324,7 +317,7 @@
 }
 
 .authorName {
-    margin-block:0 ;
+    margin-block: 0 ;
     margin-inline: var(--zd_size10) ;
     font-size: var(--zd_font_size15) ;
     color: var(--zdt_attachmentviewer_title_text);
@@ -364,4 +357,4 @@
     color: var(--zdt_attachmentviewer_title_text);
     padding: var(--zd_size2) ;
     margin: auto ;
-}
+}

package/es/AttachmentViewer/props/defaultProps.js

@@ -1,3 +1,4 @@
+import { DUMMY_OBJECT } from "../../utils/General";
 export const AttachmentImage_defaultProps = {
   dataId: 'AttachmentImage',
   customClass: {
@@ -11,7 +12,7 @@ export const AttachmentViewer_defaultProps = {
   maintainZoom: false,
   isActive: false,
   dataId: 'AttachmentViewer',
-  i18nKeys: {},
-  customProps: {},
+  i18nKeys: DUMMY_OBJECT,
+  customProps: DUMMY_OBJECT,
   showCount: true
 };

package/es/AttachmentViewer/props/propTypes.js

@@ -2,6 +2,9 @@ import PropTypes from 'prop-types';
 import { propTypes as AvatarProps } from '@zohodesk/components/es/Avatar/props/propTypes';
 export const AttachmentImage_propTypes = {
   alt: PropTypes.string,
+  imageRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
   customClass: PropTypes.shape({
     customImageClass: PropTypes.string,
     customChildrenClass: PropTypes.string
@@ -29,7 +32,7 @@ export const AttachmentViewer_propTypes = {
     showText: PropTypes.string,
     previewUnsupportedText: PropTypes.string
   }),
-  needDownload: PropTypes.string,
+  needDownload: PropTypes.bool,
   previewObj: PropTypes.object,
   responsiveId: PropTypes.string,
   maintainZoom: PropTypes.bool,
@@ -42,6 +45,7 @@ export const AttachmentViewer_propTypes = {
     document: PropTypes.arrayOf(PropTypes.string)
   }),
   renderUnSupportedElement: PropTypes.func,
+  renderCustomImagePreviewElement: PropTypes.func,
   customProps: PropTypes.shape({
     avatarProps: PropTypes.exact(AvatarProps)
   }),

package/lib/AttachmentViewer/AttachmentImage.js

@@ -92,7 +92,8 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
           isCover = _this$props.isCover,
           customClass = _this$props.customClass,
           onLoad = _this$props.onLoad,
-          onError = _this$props.onError;
+          onError = _this$props.onError,
+          imageRef = _this$props.imageRef;
       var isImageValid = this.state.isImageValid;
       var _customClass$customIm = customClass.customImageClass,
           customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm;
@@ -104,6 +105,7 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
         className: customImageClass,
         alt: alt,
         isCover: isCover,
+        eleRef: imageRef,
         onLoad: onLoad,
         onError: onError
       });

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -15,7 +15,7 @@ var _propTypes = require("./props/propTypes");
 
 var _Layout = require("@zohodesk/components/es/Layout");
 
-var _icons = require("@zohodesk/icons");
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
 
 var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Avatar"));
 
@@ -187,16 +187,18 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _previewObj$previewDa, _prevState$data$;
-
       var previewObj = this.props.previewObj;
       var selectedIndex = this.state.selectedIndex;
       var indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
-      var attachmentPreviewUrlChanged = ((_previewObj$previewDa = previewObj.previewData[0]) === null || _previewObj$previewDa === void 0 ? void 0 : _previewObj$previewDa.viewUrl) !== ((_prevState$data$ = prevState.data[0]) === null || _prevState$data$ === void 0 ? void 0 : _prevState$data$.viewUrl); // Triggers an update if the previewed attachment is edited by the Attachment Annotator.
+      var attachmentPreviewUrlChanged = previewObj.previewData.some(function (value, index) {
+        var _prevState$data$index;
+
+        return (value === null || value === void 0 ? void 0 : value.viewUrl) !== ((_prevState$data$index = prevState.data[index]) === null || _prevState$data$index === void 0 ? void 0 : _prevState$data$index.viewUrl);
+      }); // Triggers an update if any previewed attachment is edited by the Attachment Annotator.
 
       if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged || attachmentPreviewUrlChanged) {
         var objChanged = previewObj.previewData.some(function (value, index) {
-          return (0, _General.shallowDiff)(value, prevProps.previewObj[index]);
+          return (0, _General.shallowDiff)(value, prevProps.previewObj.previewData[index]);
         });
 
         if (objChanged || indexChanged) {
@@ -412,7 +414,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       } : fileUnknown;
       var iconName = fileDetails.iconName,
           iconSize = fileDetails.iconSize;
-      return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+      return /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconClass: _AttachmentViewerModule["default"].prevFooterIcon,
         name: iconName,
         size: iconSize,
@@ -461,13 +463,15 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           _data$customClass = data.customClass,
           customClass = _data$customClass === void 0 ? {} : _data$customClass,
           _data$customProps = data.customProps,
-          customProps = _data$customProps === void 0 ? {} : _data$customProps;
+          customProps = _data$customProps === void 0 ? {} : _data$customProps,
+          imageRef = data.imageRef;
       var _customProps$imagePro = customProps.imageProps,
           imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro;
       var _customClass$customIm = customClass.customImageClass,
           customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm,
           _customClass$customCh = customClass.customChildrenClass,
           customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
+      var resolvedImageRef = imageRef;
       var retainZoom = canZoom && selectedIndex == i && maintainZoom;
       var handleZoomOut = isPreviewAttachmentValid && isZoomed ? this.zoomOut.bind(this, i) : undefined;
       var handleZoomIn = isPreviewAttachmentValid && !isZoomed ? function (e) {
@@ -482,15 +486,16 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         customChildrenClass: customChildrenClass
       });
 
-      var img = /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+      var img = /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({}, imageProps, {
         customClass: imageFrameCustomClass,
         src: viewUrl,
         onClick: handleImageClick,
         alt: name,
         dataId: dataId,
         id: "img".concat(i),
-        isCover: false
-      }, imageProps), children);
+        isCover: false,
+        imageRef: resolvedImageRef
+      }), children);
 
       return typeof renderCustomImagePreviewElement === 'function' ? renderCustomImagePreviewElement({
         defaultView: img,
@@ -787,7 +792,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement("button", {
           className: _AttachmentViewerModule["default"].btn,
           "aria-label": i18nKeys.previousText
-        }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
           name: "ZD-arrowLeft3",
           iconClass: _AttachmentViewerModule["default"].arrow,
           dataId: "leftAttachNav",
@@ -808,7 +813,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement("button", {
           className: _AttachmentViewerModule["default"].btn,
           "aria-label": i18nKeys.nextText
-        }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
           name: "ZD-arrowRight3",
           iconClass: _AttachmentViewerModule["default"].arrow,
           dataId: "rightAttachNav",

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -2,7 +2,7 @@
     height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size15) ;
     composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
     background-color: var(--zdt_attachmentviewer_header_bg);
@@ -10,20 +10,13 @@
 }
 
 .title {
+    padding-inline-end: var(--zd_size15) ;
     max-width: 50% ;
     composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .title {
-    padding-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .title {
-    padding-left: var(--zd_size15) ;
-}
-
 .count {
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size10) ;
     position: absolute;
     composes: xMiddle from '~@zohodesk/components/es/common/common.module.css';
@@ -80,7 +73,7 @@
 
 .preview {
     margin-block: var(--zd_size20) ;
-    margin-inline:0 ;
+    margin-inline: 0 ;
     composes: posrel from '~@zohodesk/components/es/common/common.module.css';
     text-align: center;
 }
@@ -136,7 +129,7 @@
 }
 
 .listContainer {
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size18) ;
 }
 
@@ -324,7 +317,7 @@
 }
 
 .authorName {
-    margin-block:0 ;
+    margin-block: 0 ;
     margin-inline: var(--zd_size10) ;
     font-size: var(--zd_font_size15) ;
     color: var(--zdt_attachmentviewer_title_text);
@@ -364,4 +357,4 @@
     color: var(--zdt_attachmentviewer_title_text);
     padding: var(--zd_size2) ;
     margin: auto ;
-}
+}

package/lib/AttachmentViewer/props/defaultProps.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AttachmentViewer_defaultProps = exports.AttachmentImage_defaultProps = void 0;
+
+var _General = require("../../utils/General");
+
 var AttachmentImage_defaultProps = {
   dataId: 'AttachmentImage',
   customClass: {
@@ -18,8 +21,8 @@ var AttachmentViewer_defaultProps = {
   maintainZoom: false,
   isActive: false,
   dataId: 'AttachmentViewer',
-  i18nKeys: {},
-  customProps: {},
+  i18nKeys: _General.DUMMY_OBJECT,
+  customProps: _General.DUMMY_OBJECT,
   showCount: true
 };
 exports.AttachmentViewer_defaultProps = AttachmentViewer_defaultProps;

package/lib/AttachmentViewer/props/propTypes.js

@@ -13,6 +13,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var AttachmentImage_propTypes = {
   alt: _propTypes["default"].string,
+  imageRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].shape({
+    current: _propTypes["default"].any
+  })]),
   customClass: _propTypes["default"].shape({
     customImageClass: _propTypes["default"].string,
     customChildrenClass: _propTypes["default"].string
@@ -41,7 +44,7 @@ var AttachmentViewer_propTypes = {
     showText: _propTypes["default"].string,
     previewUnsupportedText: _propTypes["default"].string
   }),
-  needDownload: _propTypes["default"].string,
+  needDownload: _propTypes["default"].bool,
   previewObj: _propTypes["default"].object,
   responsiveId: _propTypes["default"].string,
   maintainZoom: _propTypes["default"].bool,
@@ -54,6 +57,7 @@ var AttachmentViewer_propTypes = {
     document: _propTypes["default"].arrayOf(_propTypes["default"].string)
   }),
   renderUnSupportedElement: _propTypes["default"].func,
+  renderCustomImagePreviewElement: _propTypes["default"].func,
   customProps: _propTypes["default"].shape({
     avatarProps: _propTypes["default"].exact(_propTypes2.propTypes)
   }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-230.1",
+  "version": "1.0.0-temp-230.3",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -34,16 +34,16 @@
     "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 css:review",
+    "prepublishOnly": "node ../prePublish.js && npm run css:review  && npm run review:props",
     "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",
     "downloadOnly": "react-cli clean ./node_modules ./package-lock.json && npm install --legacy-peer-deps",
     "expublish": "node ../publish.js -- exp",
     "css:lineheight:validate": "npx z-node-plugins lineheight:errorcheck ./src/",
-    "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
-    "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
-    "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
+    "variable:addignore": "npx css-variable-migrator addignore ./src",
+    "variable:convert": "npx css-variable-migrator convert ./src",
+    "variable:check": "npx css-variable-migrator check ./src",
     "css:review": " npm run dubCheck && npm run css:lineheight:validate && npm run theme:validate ",
     "theme:validate": "npx z-node-plugins theme:validate ./src ./.cli ./.cli/stringContains.js",
     "theme:addignore": "npx z-node-plugins theme:addignore ./src ./.cli ./.cli/stringContains.js",
@@ -66,15 +66,15 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.0.10",
     "@zohodesk-private/color-variable-preprocessor": "1.3.1",
-    "@zohodesk-private/css-variable-migrator": "1.0.9",
+    "@zohodesk-private/css-variable-migrator": "1.0.11",
     "@zohodesk-private/node-plugins": "1.1.14",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/client_build_tool": "0.0.20",
-    "@zohodesk/components": "1.6.12",
+    "@zohodesk/components": "1.6.13",
     "@zohodesk/dotkit": "1.0.9",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.0",
+    "@zohodesk/icons": "1.3.1",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/react-cli": "1.1.27",
     "@zohodesk/svg": "1.3.5",
@@ -89,8 +89,8 @@
   "peerDependencies": {
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.3.1",
-    "@zohodesk/components": "1.6.12",
-    "@zohodesk/icons": "1.3.0",
+    "@zohodesk/components": "1.6.13",
+    "@zohodesk/icons": "1.3.1",
     "@zohodesk/svg": "1.3.5",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",