@zohodesk/dot 1.0.0-temp-229.2 → 1.0.0-temp-230.2

package/README.md

@@ -4,12 +4,13 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 # 1.9.13
 
-- **StatusDropdown**
-  - Added `renderCustomDropBoxHeader` prop to render a custom node (e.g. suggested status, banner, info message) at the top of the dropdown, above the options list.
-  - Added `customDropBoxHeader` key under the `customClass` prop to style the custom header wrapper.
+- **AttachmentViewer**
+  - Added support for updating existing attachment list items.
+  - Increased header bar height.
+  - Added support for `showCount`, `renderCustomIcons`, annotation URL re-rendering, and `downloadName`.
 
-- **SelectField**
-  - Added `renderCustomDropBoxHeader` prop, forwarded to the underlying `Select` component to render a custom node at the top of the dropdown.
+- **Link**
+  - Added `downloadName` prop for custom file download names.
 
 # 1.9.12
 
@@ -35,6 +36,7 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 - PX to variable conversion was not applied due to the CBT migration. The issue has now been fixed. 
 
+
 # 1.9.8
 
 - **DotProvider** - Variables package handled and separated the component & variable import files

package/assets/Appearance/dark/mode/Dot_DarkMode.module.css

@@ -259,9 +259,6 @@
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
-	--zdt_statusdropdown_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
-	--zdt_statusdropdown_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
-	--zdt_statusdropdown_wrapper_dropdown_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -259,9 +259,6 @@
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
-	--zdt_statusdropdown_wrapper_container_border:hsla(218, calc(var(--zd-saturation, 1) * 42.22%), calc(91.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_statusdropdown_wrapper_container_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), 97.45%, 1);
-	--zdt_statusdropdown_wrapper_dropdown_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css

@@ -259,9 +259,6 @@
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
-	--zdt_statusdropdown_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
-	--zdt_statusdropdown_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
-	--zdt_statusdropdown_wrapper_dropdown_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

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

@@ -47,8 +47,35 @@ export default class AttachmentViewer extends Component {
     this.zoomMaintain = this.zoomMaintain.bind(this);
     this.handleMenuValidation = this.handleMenuValidation.bind(this);
     this.getPreviewIconData = this.getPreviewIconData.bind(this);
-    this.renderIframe = this.renderIframe.bind(this);
-  }
+    this.renderIframe = this.renderIframe.bind(this); // this.updateItem = this.updateItem.bind(this);
+  } // updateItem(idOrIndex, changes) {
+  //   if (!changes || typeof changes !== 'object') {
+  //     return false;
+  //   }
+  //   const { data } = this.state;
+  //   const targetIdx = typeof idOrIndex === 'number'
+  //     ? idOrIndex
+  //     : data.findIndex((item) => item && item.id === idOrIndex);
+  //   if (targetIdx < 0 || targetIdx >= data.length) {
+  //     return false;
+  //   }
+  //   this.setState((prevState) => {
+  //     const nextData = prevState.data.slice();
+  //     nextData[targetIdx] = { ...nextData[targetIdx], ...changes };
+  //     let nextDataList = prevState.dataList;
+  //     if (targetIdx < prevState.dataList.length) {
+  //       nextDataList = prevState.dataList.slice();
+  //       nextDataList[targetIdx] = { ...nextDataList[targetIdx], ...changes };
+  //     }
+  //     return { data: nextData, dataList: nextDataList };
+  //   }, () => {
+  //     if (this.state.selectedIndex === targetIdx) {
+  //       this.handleMenuValidation();
+  //     }
+  //   });
+  //   return true;
+  // }
+
 
   isImageFileType(fileName) {
     const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
@@ -80,8 +107,9 @@ 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.
 
-    if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
+    if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged || attachmentPreviewUrlChanged) {
       let objChanged = previewObj.previewData.some((value, index) => {
         return shallowDiff(value, prevProps.previewObj[index]);
       });
@@ -100,7 +128,7 @@ export default class AttachmentViewer extends Component {
       }
     }
 
-    if (prevState.selectedIndex != selectedIndex) {
+    if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
       this.handleMenuValidation();
     }
   }
@@ -308,6 +336,77 @@ export default class AttachmentViewer extends Component {
     }, this.props.customProps.iframeProps));
   }
 
+  getRenderImageFrameCustomClass(_ref3) {
+    let {
+      canZoom,
+      retainZoom,
+      isZoomed,
+      customImageClass,
+      customChildrenClass
+    } = _ref3;
+    return {
+      customImageClass: `${style.img} ${style.altText} ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
+      customChildrenClass
+    };
+  }
+
+  renderImageFrame(data, i) {
+    const {
+      selectedIndex,
+      isZoomed,
+      canZoom,
+      isPreviewAttachmentValid
+    } = this.state;
+    const {
+      maintainZoom,
+      renderCustomImagePreviewElement
+    } = this.props;
+    const {
+      viewUrl,
+      name,
+      children,
+      dataId = 'attachViewer',
+      customClass = {},
+      customProps = {},
+      imageRef
+    } = data;
+    const {
+      imageProps = {}
+    } = customProps;
+    const {
+      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;
+    const handleImageClick = isPreviewAttachmentValid ? isZoomed ? handleZoomOut : handleZoomIn : undefined;
+    const imageFrameCustomClass = this.getRenderImageFrameCustomClass({
+      canZoom,
+      retainZoom,
+      isZoomed,
+      customImageClass,
+      customChildrenClass
+    });
+    const img = /*#__PURE__*/React.createElement(AttachmentImage, _extends({
+      customClass: imageFrameCustomClass,
+      src: viewUrl,
+      onClick: handleImageClick,
+      alt: name,
+      dataId: dataId,
+      id: `img${i}`,
+      isCover: false
+    }, imageProps, {
+      imageRef: resolvedImageRef
+    }), children);
+    return typeof renderCustomImagePreviewElement === 'function' ? renderCustomImagePreviewElement({
+      defaultView: img,
+      data,
+      index: i
+    }) : img;
+  }
+
   imgPreviewView(downloadUrl) {
     var _this = this;
 
@@ -404,18 +503,7 @@ export default class AttachmentViewer extends Component {
       }, videoProps), /*#__PURE__*/React.createElement("source", {
         src: viewUrl,
         type: `video/${extension}`
-      })) : _this.isImageFileType(name) || children ? /*#__PURE__*/React.createElement(AttachmentImage, _extends({
-        customClass: {
-          customImageClass: `${style.img} ${style.altText} ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
-          customChildrenClass
-        },
-        src: viewUrl,
-        onClick: isPreviewAttachmentValid ? isZoomed ? _this.zoomOut.bind(_this, i) : e => _this.zoomIn(e, i, true) : undefined,
-        alt: name,
-        dataId: dataId,
-        id: `img${i}`,
-        isCover: false
-      }, imageProps), children) : type === "document" && previewurl != null ? _this.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/React.createElement("div", {
+      })) : _this.isImageFileType(name) || children ? _this.renderImageFrame(data, i) : type === "document" && previewurl != null ? _this.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/React.createElement("div", {
         className: style.previewNone
       }, /*#__PURE__*/React.createElement("div", {
         className: style.fileTypeImg
@@ -424,9 +512,10 @@ export default class AttachmentViewer extends Component {
         $ui_weight: "semibold"
       }, previewUnsupportedText), downloadUrl ? /*#__PURE__*/React.createElement(Link, {
         href: downloadUrl,
+        download: true,
+        downloadName: name,
         className: style.downloadLink,
-        hasReload: true,
-        download: true
+        hasReload: true
       }, /*#__PURE__*/React.createElement(Button, {
         palette: "primaryFilled",
         text: downloadText
@@ -449,7 +538,9 @@ export default class AttachmentViewer extends Component {
       i18nKeys,
       isActive,
       dataId,
-      customProps
+      customProps,
+      showCount,
+      renderCustomIcons
     } = this.props;
     const {
       avatarProps = {}
@@ -477,10 +568,10 @@ export default class AttachmentViewer extends Component {
     }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       responsiveId: responsiveId,
       query: this.responsiveFunc
-    }, _ref3 => {
+    }, _ref4 => {
       let {
         uptoTablet
-      } = _ref3;
+      } = _ref4;
       return /*#__PURE__*/React.createElement(Container, {
         scroll: "none",
         "data-scroll-palette": "dark"
@@ -495,7 +586,7 @@ export default class AttachmentViewer extends Component {
         "data-title": selectedAttachment.name,
         dataId: "attachName",
         id: ariaId
-      }, selectedAttachment.name), /*#__PURE__*/React.createElement(Box, {
+      }, selectedAttachment.name), showCount && /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         className: style.count,
         dataId: "attachCountContainer"
@@ -507,7 +598,11 @@ export default class AttachmentViewer extends Component {
         align: uptoTablet ? 'bottom' : 'center',
         wrap: "wrap",
         isCover: false
-      }, canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
+      }, typeof renderCustomIcons === 'function' && renderCustomIcons({
+        selectedAttachment,
+        selectedIndex,
+        totalLen
+      }), canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
         className: uptoTablet ? style.mobileMenu : style.menu,
         onClick: this.zoomOut.bind(this, selectedIndex),
         "data-id": "zoomOut",
@@ -555,6 +650,7 @@ export default class AttachmentViewer extends Component {
         className: uptoTablet ? style.mobileMenu : style.menu
       }, /*#__PURE__*/React.createElement(Link, {
         href: downloadUrl,
+        downloadName: selectedAttachment.name,
         target: "_parent",
         hasReload: true,
         download: true,

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -1,5 +1,5 @@
 .header {
-    height: var(--zd_size40) ;
+    height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
     padding-block:0 ;

package/es/AttachmentViewer/props/defaultProps.js

@@ -12,5 +12,6 @@ export const AttachmentViewer_defaultProps = {
   isActive: false,
   dataId: 'AttachmentViewer',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  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
@@ -17,6 +20,9 @@ export const AttachmentImage_propTypes = {
 };
 export const AttachmentViewer_propTypes = {
   hideAttachmentViewer: PropTypes.func,
+  imageRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
   i18nKeys: PropTypes.shape({
     nextText: PropTypes.string,
     previousText: PropTypes.string,
@@ -44,5 +50,7 @@ export const AttachmentViewer_propTypes = {
   renderUnSupportedElement: PropTypes.func,
   customProps: PropTypes.shape({
     avatarProps: PropTypes.exact(AvatarProps)
-  })
+  }),
+  showCount: PropTypes.bool,
+  renderCustomIcons: PropTypes.func
 };

package/es/Link/Link.js

@@ -61,7 +61,8 @@ export default class Link extends React.Component {
       rel,
       dataId,
       customProps,
-      ariaLabel
+      ariaLabel,
+      downloadName
     } = this.props;
     let {
       isLink,
@@ -71,10 +72,10 @@ export default class Link extends React.Component {
     let option = {};
 
     if (download) {
-      option.download = true;
+      option.download = downloadName || true;
     }
 
-    let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
+    let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'downloadName', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
     let others = Object.keys(this.props).filter(key => ignoreKeys.indexOf(key) == -1).reduce((res, key) => {
       res[key] = this.props[key];
       return res;

package/es/Link/props/propTypes.js

@@ -13,6 +13,7 @@ export const propTypes = {
   customProps: PropTypes.object,
   onClick: PropTypes.func,
   download: PropTypes.bool,
+  downloadName: PropTypes.string,
   ariaLabel: PropTypes.string,
   key: PropTypes.string
 };

package/es/common/dot_boxShadow.module.css

@@ -40,6 +40,4 @@
     --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
-/* status dropdown */
-    --zd_bs_statusdropdown_wrapper_container: var(--zd_bs_contrast_outline, 3px 3px 26px 0 var(--zdt_texteditor_menu_after_box_shadow));
 }

package/es/form/fields/SelectField/SelectField.js

@@ -97,8 +97,7 @@ export default class SelectField extends PureComponent {
       onFocus,
       iconOnHover,
       customProps,
-      renderLabelProps,
-      renderCustomDropBoxHeader
+      renderLabelProps
     } = this.props;
     const {
       LabelProps = {},
@@ -168,8 +167,7 @@ export default class SelectField extends PureComponent {
       iconOnHover: iconOnHover,
       title: title
     }, SelectProps, {
-      ariaLabelledby: uniqueId,
-      renderCustomDropBoxHeader: renderCustomDropBoxHeader
+      ariaLabelledby: uniqueId
     }), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
       text: validationMessage,
       palette: validationPalette,

package/es/form/fields/SelectField/props/defaultProps.js

@@ -13,7 +13,6 @@ export const defaultProps = {
   isDefaultSelectValue: true,
   placeHolder: '',
   customProps: {},
-  renderCustomDropBoxHeader: null,
   dataSelectorId: 'selectField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/SelectField/props/propTypes.js

@@ -45,7 +45,6 @@ export const propTypes = {
     ValidationMessageProps1: PropTypes.object,
     ValidationMessageProps2: PropTypes.object
   }),
-  renderCustomDropBoxHeader: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   htmlId: PropTypes.string,
   ...FieldCommonPropTypes
 };