@zohodesk/dot 1.0.0-temp-228.2 → 1.0.0-temp-230

package/es/Attachment/Attachment.module.css

@@ -86,21 +86,19 @@
   width: var(--zd_size40) ;
 }
 
-[dir=ltr] .medium .attachright {
-  padding: var(--zd_size5) var(--zd_size25) var(--zd_size5) var(--zd_size10) ;
-}
-
-[dir=rtl] .medium .attachright {
-  padding: var(--zd_size5) var(--zd_size10) var(--zd_size5) var(--zd_size25) ;
+.medium .attachright {
+  padding-block: var(--zd_size5) ;
+  padding-inline: var(--zd_size10) var(--zd_size25) ;
 }
 
 .small .attachright {
-  padding: 0 var(--zd_size10) 0 var(--zd_size10) ;
+  padding-block:0 ;
+  padding-inline: var(--zd_size10) ;
 }
 
 .footer {
   font-size: 0 ;
-  margin-top: var(--zd_size3) ;
+  margin-block-start: var(--zd_size3) ;
 }
 
 .medium .atatchName {
@@ -183,7 +181,8 @@
   height: 2px;
   /*  Variable:Ignore  */
   width: 2px;
+  margin-inline: var(--zd_size6) ;
+  margin-block:0 ;
   background-color: var(--zdt_dot_text);
   border-radius: 50%;
-  margin: 0 var(--zd_size6) ;
-}
+}

package/es/AttachmentViewer/AttachmentViewer.js

@@ -48,6 +48,47 @@ export default class AttachmentViewer extends Component {
     this.handleMenuValidation = this.handleMenuValidation.bind(this);
     this.getPreviewIconData = this.getPreviewIconData.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) {
@@ -80,8 +121,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 +142,7 @@ export default class AttachmentViewer extends Component {
       }
     }
 
-    if (prevState.selectedIndex != selectedIndex) {
+    if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
       this.handleMenuValidation();
     }
   }
@@ -424,9 +466,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 +492,9 @@ export default class AttachmentViewer extends Component {
       i18nKeys,
       isActive,
       dataId,
-      customProps
+      customProps,
+      showCount,
+      renderCustomIcons
     } = this.props;
     const {
       avatarProps = {}
@@ -495,7 +540,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 +552,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 +604,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,10 +1,11 @@
 .header {
-    height: var(--zd_size40) ;
+    height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
+    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);
-    padding: 0 var(--zd_size15) ;
     border-bottom: 1px solid var(--zdt_attachmentviewer_header_border);
 }
 
@@ -22,9 +23,10 @@
 }
 
 .count {
+    padding-block:0 ;
+    padding-inline: var(--zd_size10) ;
     position: absolute;
     composes: xMiddle from '~@zohodesk/components/es/common/common.module.css';
-    padding: 0 var(--zd_size10) ;
 }
 
 .title,
@@ -33,29 +35,21 @@
     font-size: var(--zd_font_size15) ;
 }
 
-[dir=ltr] .menuBar {
-    padding-left: var(--zd_size5) ;
-}
-
-[dir=rtl] .menuBar {
-    padding-right: var(--zd_size5) ;
+.menuBar {
+    padding-inline-start: var(--zd_size5) ;
 }
 
 .mbleMenuBar {
+    margin-block-start: var(--zd_size8) ;
     align-self: baseline;
-    margin-top: var(--zd_size8) ;
 }
 
-[dir=ltr] .menu+.menu {
-    margin-left: var(--zd_size22) ;
-}
-
-[dir=rtl] .menu+.menu {
-    margin-right: var(--zd_size22) ;
+.menu+.menu {
+    margin-inline-start: var(--zd_size22) ;
 }
 
 .mobileMenu+.mobileMenu {
-    margin-bottom: var(--zd_size22) ;
+    margin-block-end: var(--zd_size22) ;
 }
 
 .menuIcon {
@@ -85,9 +79,10 @@
 }
 
 .preview {
+    margin-block: var(--zd_size20) ;
+    margin-inline:0 ;
     composes: posrel from '~@zohodesk/components/es/common/common.module.css';
     text-align: center;
-    margin: var(--zd_size20) 0 ;
 }
 
 .zoomIn {
@@ -128,15 +123,8 @@
     width: 100% ;
     overflow: hidden;
     transition: height var(--zd_transition3);
-    background-color: var(--zdt_attachmentviewer_footer_bg)
-}
-
-[dir=ltr] .footer {
-    padding-right: var(--zd_size68) 
-}
-
-[dir=rtl] .footer {
-    padding-left: var(--zd_size68) 
+    padding-inline-end: var(--zd_size68) ;
+    background-color: var(--zdt_attachmentviewer_footer_bg);
 }
 
 .footerHeight {
@@ -148,7 +136,8 @@
 }
 
 .listContainer {
-    padding: 0 var(--zd_size18) ;
+    padding-block:0 ;
+    padding-inline: var(--zd_size18) ;
 }
 
 .imgItem {
@@ -168,12 +157,8 @@
     border-color: var(--zdt_attachmentviewer_hover_border);
 }
 
-[dir=ltr] .imgItem+.imgItem {
-    margin-left: var(--zd_size12) ;
-}
-
-[dir=rtl] .imgItem+.imgItem {
-    margin-right: var(--zd_size12) ;
+.imgItem+.imgItem {
+    margin-inline-start: var(--zd_size12) ;
 }
 
 .image, .crsrPointer {
@@ -335,21 +320,15 @@
 
 .author {
     max-width: var(--zd_size200) ;
-}
-
-[dir=ltr] .author {
-    padding-left: var(--zd_size15) ;
-}
-
-[dir=rtl] .author {
-    padding-right: var(--zd_size15) ;
+    padding-inline-start: var(--zd_size15) ;
 }
 
 .authorName {
+    margin-block:0 ;
+    margin-inline: var(--zd_size10) ;
     font-size: var(--zd_font_size15) ;
     color: var(--zdt_attachmentviewer_title_text);
     composes: dotted from '~@zohodesk/components/es/common/common.module.css';
-    margin: 0 var(--zd_size10) ;
 }
 
 .btn {
@@ -361,7 +340,7 @@
 }
 
 .fileTypeImg {
-    margin-bottom: var(--zd_size30) ;
+    margin-block-end: var(--zd_size30) ;
 }
 
 .previewNone {
@@ -373,7 +352,7 @@
 
 .downloadLink {
     display: inline-block;
-    padding-top: var(--zd_size15) ;
+    padding-block-start: var(--zd_size15) ;
 }
 
 .previewIconDiv {
@@ -385,4 +364,4 @@
     color: var(--zdt_attachmentviewer_title_text);
     padding: var(--zd_size2) ;
     margin: auto ;
-}
+}

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

@@ -44,5 +44,7 @@ export const AttachmentViewer_propTypes = {
   renderUnSupportedElement: PropTypes.func,
   customProps: PropTypes.shape({
     avatarProps: PropTypes.exact(AvatarProps)
-  })
+  }),
+  showCount: PropTypes.bool,
+  renderCustomIcons: PropTypes.func
 };

package/es/AudioPlayer/AudioPlayer.module.css

@@ -5,7 +5,8 @@
 }
 
 .dragtag {
-    margin: 0 var(--zd_size10) ;
+    margin-block:0 ;
+    margin-inline: var(--zd_size10) ;
 }
 
 .audioHid {
@@ -24,12 +25,8 @@
     font-size: var(--zd_font_size11) ;
 }
 
-[dir=ltr] .timerBox {
-    margin-left: var(--zd_size6) ;
-}
-
-[dir=rtl] .timerBox {
-    margin-right: var(--zd_size6) ;
+.timerBox {
+    margin-inline-start: var(--zd_size6) ;
 }
 
 .rightBox,
@@ -143,4 +140,4 @@ input::-moz-focus-inner, input::-moz-focus-outer {
     border-radius: 4px;
 }
 
-/* End of audio range styles */
+/* End of audio range styles */

package/es/DotProvider/DotProvider.js

@@ -13,6 +13,7 @@ const DotProvider = /*#__PURE__*/forwardRef((props, ref) => {
     baseFontUnit,
     zoomUnitVariable,
     fontUnitVariable,
+    excludeFeatures,
     themeAppearanceAttr,
     themeColorAttr,
     providerRef,
@@ -49,6 +50,7 @@ const DotProvider = /*#__PURE__*/forwardRef((props, ref) => {
     baseFontUnit: baseFontUnit,
     zoomUnitVariable: zoomUnitVariable,
     fontUnitVariable: fontUnitVariable,
+    excludeFeatures: excludeFeatures,
     getProviderElement,
     onAssetsDownloadSuccess: onAssetsDownloadSuccess,
     getAssetsPromises: getAssetsPromises

package/es/DotProvider/__tests__/DotProvider.spec.js

@@ -196,5 +196,111 @@ describe('DotProvider Unit-Test', () => {
       zoomSizePromise: expect.any(Promise)
     }));
   });
+  test('should not set zoom CSS variable when zoom is excluded', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      id: "dot-provider",
+      excludeFeatures: ['zoom'],
+      baseZoomUnit: "2px"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    const el = container.querySelector('#dot-provider');
+    expect(el.style.getPropertyValue('--zd_baseUnit')).toBe('');
+  });
+  test('should still set font CSS variable when zoom is excluded', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      id: "dot-provider",
+      excludeFeatures: ['zoom'],
+      baseFontUnit: "18px"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {
+      const el = container.querySelector('#dot-provider');
+      expect(el.style.getPropertyValue('--zd_baseFontUnit')).toBe('18px');
+    });
+  });
+  test('should not set font CSS variable when font is excluded', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      id: "dot-provider",
+      excludeFeatures: ['font'],
+      baseFontUnit: "18px"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    const el = container.querySelector('#dot-provider');
+    expect(el.style.getPropertyValue('--zd_baseFontUnit')).toBe('');
+  });
+  test('should still set zoom CSS variable when font is excluded', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      id: "dot-provider",
+      excludeFeatures: ['font'],
+      baseZoomUnit: "2px"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {
+      const el = container.querySelector('#dot-provider');
+      expect(el.style.getPropertyValue('--zd_baseUnit')).toBe('2px');
+    });
+  });
+  test('should not set zoom or font CSS variables when both are excluded', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      id: "dot-provider",
+      excludeFeatures: ['font', 'zoom'],
+      baseZoomUnit: "2px",
+      baseFontUnit: "18px"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    const el = container.querySelector('#dot-provider');
+    expect(el.style.getPropertyValue('--zd_baseUnit')).toBe('');
+    expect(el.style.getPropertyValue('--zd_baseFontUnit')).toBe('');
+  });
+  test('getAssetsPromises should expose resolved promises when features are excluded', async () => {
+    const mockFunc = jest.fn();
+    render( /*#__PURE__*/React.createElement(DotProvider, {
+      excludeFeatures: ['font', 'zoom'],
+      getAssetsPromises: mockFunc
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    expect(mockFunc).toHaveBeenCalledWith(expect.objectContaining({
+      zoomSizePromise: expect.any(Promise),
+      fontSizePromise: expect.any(Promise)
+    }));
+    const {
+      zoomSizePromise,
+      fontSizePromise
+    } = mockFunc.mock.calls[0][0];
+    await expect(zoomSizePromise).resolves.toBeUndefined();
+    await expect(fontSizePromise).resolves.toBeUndefined();
+  });
+  test('onAssetsDownloadSuccess should still fire when font and zoom are excluded', async () => {
+    const mockFunc = jest.fn();
+    render( /*#__PURE__*/React.createElement(DotProvider, {
+      excludeFeatures: ['font', 'zoom'],
+      onAssetsDownloadSuccess: mockFunc
+    }, "This is a DotProvider component"));
+    await waitFor(() => {
+      expect(mockFunc).toHaveBeenCalled();
+    });
+  });
+  test('should not set theme attributes when theme is excluded', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(DotProvider, {
+      id: "dot-provider",
+      excludeFeatures: ['theme'],
+      themeAppearance: "dark",
+      themeColor: "orange"
+    }, "This is a DotProvider component"));
+    await waitFor(() => {});
+    const el = container.querySelector('#dot-provider');
+    expect(el.getAttribute('data-mode')).toBeNull();
+    expect(el.getAttribute('data-theme')).toBeNull();
+  });
 }); // need to check error handling cases
 // onAssetsDownloadSuccess not called verification

package/es/DotProvider/hooks/useDotProvider.js

@@ -20,6 +20,7 @@ function useDotProvider(_ref) {
     getProviderElement,
     zoomUnitVariable,
     fontUnitVariable,
+    excludeFeatures,
     themeAppearanceAttr,
     themeColorAttr,
     onAssetsDownloadSuccess,
@@ -33,6 +34,7 @@ function useDotProvider(_ref) {
     getProviderElement,
     zoomUnitVariable,
     fontUnitVariable,
+    excludeFeatures,
     themeAppearanceAttr,
     themeColorAttr
   });
@@ -42,15 +44,15 @@ function useDotProvider(_ref) {
     zoomSizePromise,
     fontSizePromise
   } = assetsPromises;
-  const allPromises = [...themeAppearancePromise, ...themeColorPromise, zoomSizePromise, fontSizePromise];
   useLayoutEffect(() => {
+    const allPromises = [...themeAppearancePromise, ...themeColorPromise, zoomSizePromise, fontSizePromise];
     Promise.all(allPromises).then(() => {
       typeof onAssetsDownloadSuccess === 'function' && onAssetsDownloadSuccess();
     }).catch(error => {
       console.error('Error loading assets:', error);
     });
     typeof getAssetsPromises === 'function' && getAssetsPromises(assetsPromises);
-  }, [...allPromises]);
+  }, [themeAppearancePromise, themeColorPromise, zoomSizePromise, fontSizePromise]);
 }
 
 export default useDotProvider;

package/es/DotProvider/hooks/useDownloadAssetsAndSetAttr.js

@@ -12,33 +12,50 @@ export default function useDownloadAssetsAndSetAttr(_ref) {
     getProviderElement,
     zoomUnitVariable,
     fontUnitVariable,
+    excludeFeatures,
     themeAppearanceAttr,
     themeColorAttr
   } = _ref;
+  const excluded = useMemo(() => new Set(excludeFeatures), [excludeFeatures]);
+  const needTheme = !excluded.has('theme');
+  const needZoom = !excluded.has('zoom');
+  const needFont = !excluded.has('font');
   const themeAppearancePromise = useMemo(() => {
-    const themeAppearanceAssetPromise = getThemeAppearanceAssetPromise({
+    if (!needTheme) {
+      return [Promise.resolve()];
+    }
+
+    return getThemeAppearanceAssetPromise({
       themeAppearance
     });
-    return themeAppearanceAssetPromise;
-  }, [themeAppearance]);
+  }, [themeAppearance, needTheme]);
   const themeColorPromise = useMemo(() => {
-    const themeColorAssetPromise = getThemeColorAssetPromise({
+    if (!needTheme) {
+      return [Promise.resolve()];
+    }
+
+    return getThemeColorAssetPromise({
       themeAppearance,
       themeColor
     });
-    return themeColorAssetPromise;
-  }, [themeAppearance, themeColor]);
+  }, [themeAppearance, themeColor, needTheme]);
   const modifiedZoomUnitWithSuffix = useMemo(() => {
     return !isNaN(Number(baseZoomUnit)) ? `${Number(baseZoomUnit)}px` : baseZoomUnit;
   }, [baseZoomUnit]);
   const zoomSizePromise = useMemo(() => {
-    const assetPromise = getZoomSizeAssetPromise();
-    return assetPromise;
-  }, []);
+    if (!needZoom) {
+      return Promise.resolve();
+    }
+
+    return getZoomSizeAssetPromise();
+  }, [needZoom]);
   const fontSizePromise = useMemo(() => {
-    const assetPromise = getFontSizeAssetPromise();
-    return assetPromise;
-  }, []);
+    if (!needFont) {
+      return Promise.resolve();
+    }
+
+    return getFontSizeAssetPromise();
+  }, [needFont]);
   const combinedPromise = {
     themeAppearancePromise,
     themeColorPromise,
@@ -47,6 +64,10 @@ export default function useDownloadAssetsAndSetAttr(_ref) {
   };
 
   function setThemeAttribute() {
+    if (!needTheme) {
+      return;
+    }
+
     const themePromise = [...themeAppearancePromise, ...themeColorPromise];
     Promise.all(themePromise).then(() => {
       const providerElement = getProviderElement();
@@ -61,6 +82,10 @@ export default function useDownloadAssetsAndSetAttr(_ref) {
   }
 
   function setZoomSizeAttribute() {
+    if (!needZoom) {
+      return;
+    }
+
     zoomSizePromise.then(() => {
       const providerElement = getProviderElement();
 
@@ -73,6 +98,10 @@ export default function useDownloadAssetsAndSetAttr(_ref) {
   }
 
   function setFontSizeAttribute() {
+    if (!needFont) {
+      return;
+    }
+
     fontSizePromise.then(() => {
       const providerElement = getProviderElement();
 
@@ -86,12 +115,12 @@ export default function useDownloadAssetsAndSetAttr(_ref) {
 
   useLayoutEffect(() => {
     setThemeAttribute();
-  }, [themeAppearanceAttr, themeColorAttr, themeAppearance, themeColor, getProviderElement]);
+  }, [themeAppearanceAttr, themeColorAttr, themeAppearance, themeColor, getProviderElement, needTheme]);
   useLayoutEffect(() => {
     setZoomSizeAttribute();
-  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, getProviderElement]);
+  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, zoomSizePromise, getProviderElement, needZoom]);
   useLayoutEffect(() => {
     setFontSizeAttribute();
-  }, [fontUnitVariable, baseFontUnit, getProviderElement]);
+  }, [fontUnitVariable, baseFontUnit, fontSizePromise, getProviderElement, needFont]);
   return combinedPromise;
 }

package/es/DotProvider/props/defaultProps.js

@@ -1,4 +1,5 @@
 import { THEME_APPEARANCE_LIGHT, THEME_COLOR_BLUE } from "../utils/constants";
+import { DUMMY_ARRAY } from '@zohodesk/utils/es/constantProps/constant';
 export const defaultProps = {
   themeAppearance: THEME_APPEARANCE_LIGHT,
   themeColor: THEME_COLOR_BLUE,
@@ -6,6 +7,7 @@ export const defaultProps = {
   baseFontUnit: '16px',
   zoomUnitVariable: '--zd_baseUnit',
   fontUnitVariable: '--zd_baseFontUnit',
+  excludeFeatures: DUMMY_ARRAY,
   themeAppearanceAttr: 'data-mode',
   themeColorAttr: 'data-theme'
 };

package/es/DotProvider/props/propTypes.js

@@ -7,6 +7,7 @@ export const propTypes = {
   baseFontUnit: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   zoomUnitVariable: PropTypes.string,
   fontUnitVariable: PropTypes.string,
+  excludeFeatures: PropTypes.arrayOf(PropTypes.string),
   themeAppearanceAttr: PropTypes.string,
   themeColorAttr: PropTypes.string,
   providerRef: PropTypes.func,