@zohodesk/dot 1.9.10 → 1.9.11

package/README.md

@@ -2,6 +2,13 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.9.11
+
+- padding, margin based css properties migrated to padding-inline,padding-block, margin-inline, margin-block 
+
+- **DotProvider** — Added `excludeFeatures` prop (default `[]`). Accepts an array of feature names to exclude from DotProvider. Supported values: `'theme'`, `'font'`, `'zoom'`. Example: `excludeFeatures={['font', 'zoom']}` skips font/zoom CSS chunk downloads and their variable/attribute application while keeping theme active.
+
+
 # 1.9.10
 
 - **ActionButton**

package/es/ActionButton/ActionButton.module.css

@@ -89,11 +89,14 @@
 }
 
 .small_btnBox {
-  padding: 0 var(--zd_size8) ;
+  padding-block:0 ;
+  padding-inline: var(--zd_size8) ;
 }
 
-.medium_btnBox, .large_btnBox {
-  padding: 0 var(--zd_size10) ;
+.medium_btnBox,
+.large_btnBox {
+  padding-block:0 ;
+  padding-inline: var(--zd_size10) ;
 }
 
 .txt {
@@ -174,8 +177,10 @@
 }
 
 .popupWrapper {
-  padding: var(--zd_size10) 0 ;
-  margin: var(--zd_size5) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline:0 ;
+  margin-block: var(--zd_size5) ;
+  margin-inline:0 ;
 }
 
 .arrow,
@@ -184,10 +189,6 @@
   color: var(--buttonText);
 }
 
-[dir=ltr] .iconMrgn {
-  margin-right: var(--zd_size6) ;
+.iconMrgn {
+  margin-inline-end: var(--zd_size6) ;
 }
-
-[dir=rtl] .iconMrgn {
-  margin-left: var(--zd_size6) ;
-}

package/es/AlphabeticList/AlphabeticList.module.css

@@ -12,19 +12,18 @@
   padding: 0 ;
 }
 .column .title {
-  margin-bottom: var(--zd_size3) ;
+  margin-block-end: var(--zd_size3) ;
 }
-[dir=ltr] .row .title {
-  margin-right: var(--zd_size3) ;
-}
-[dir=rtl] .row .title {
-  margin-left: var(--zd_size3) ;
+.row .title {
+  margin-inline-end: var(--zd_size3) ;
 }
 .row  .letter {
-  padding: 0 var(--zd_size3) ;
+  padding-block:0 ;
+  padding-inline: var(--zd_size3) ;
 }
 .column .letter {
-  padding: var(--zd_size3) 0 ;
+  padding-block: var(--zd_size3) ;
+  padding-inline: 0 ;
 }
 .heading {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';

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.module.css

@@ -2,9 +2,10 @@
     height: var(--zd_size40) ;
     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/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';
 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,