@zohodesk/dot 1.0.0-temp-192 → 1.0.0-temp-193.1

package/README.md

@@ -2,6 +2,11 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.5.0
+
+- **CurrencyField** 
+- In customProps prop > TextBoxProps key changed to TextBoxIconProps (Impact Change)
+
 # 1.4.18
 
 - **renderRightPlaceholderNode**

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -5,7 +5,7 @@ import { propTypes } from './props/propTypes';
 /**** Components ****/
 
 import Label from '@zohodesk/components/lib/Label/Label';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
@@ -101,7 +101,7 @@ export default class CurrencyField extends PureComponent {
     } = this.props;
     const {
       LabelProps = {},
-      TextBoxProps = {},
+      TextBoxIconProps = {},
       ValidationMessageProps1 = {},
       ValidationMessageProps2 = {}
     } = customProps;
@@ -136,7 +136,7 @@ export default class CurrencyField extends PureComponent {
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
-    }, /*#__PURE__*/React.createElement(TextBox, {
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
       htmlId: uniqueId,
       id: id,
       type: textBoxType,
@@ -157,7 +157,10 @@ export default class CurrencyField extends PureComponent {
       needEffect: isReadOnly || isDisabled ? false : true,
       isClickable: isClickable,
       needReadOnlyStyle: needReadOnlyStyle,
-      ...TextBoxProps
+      a11y: {
+        ariaLabelledby: labelName
+      },
+      ...TextBoxIconProps
     }), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
       text: validationMessage,
       palette: validationPalette,

package/es/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -9,15 +9,46 @@ exports[`CurrencyField rendering the defult props 1`] = `
     <div
       class="fieldContainer "
     >
-      <input
-        class="  container xmedium  primary border effect  borderColor_default  "
-        data-id="textBox"
-        data-selector-id="textBox"
-        data-test-id="textBox"
-        id="1"
-        type="text"
-        value=""
-      />
+      <div
+        class="container effect    flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            class="  container xmedium  primary  effect  borderColor_default  "
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            id="1"
+            maxlength="250"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+        <div
+          class="line borderColor_default "
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>

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

@@ -27,7 +27,7 @@ export const propTypes = {
   needReadOnlyStyle: PropTypes.bool,
   customProps: PropTypes.shape({
     LabelProps: PropTypes.object,
-    TextBoxProps: PropTypes.object,
+    TextBoxIconProps: PropTypes.object,
     ValidationMessageProps1: PropTypes.object,
     ValidationMessageProps2: PropTypes.object
   }),

package/es/v1/DotProvider/libraryChunks/dynamicImports.js

@@ -1,45 +1,40 @@
+import { importFiles } from "../../../../es/v1/DotProvider/utils/importFiles";
 import { appearanceImports, appearanceMapping } from "../utils/appearanceProperties";
 import { themeImports, themeMapping } from "../utils/themeProperties";
 import { imports, mapping } from "../utils/sizeProperties";
-import { processFiles } from "../utils/importFiles";
 import { errorMessage } from "../utils/errorMessage";
 const defaultLib = ['component', 'dot', 'svg'];
 const modeArray = ['light', 'dark', 'pureDark'];
 const themeArray = ['blue', 'green', 'orange', 'red', 'yellow'];
-export function getAppearance(mode, library) {
-  const libArray = typeof library === 'string' ? [library] : library != undefined ? library : defaultLib;
+export function getAppearance(mode) {
+  const libArray = defaultLib;
   errorMessage(modeArray, mode, 'appearance');
-  processFiles({
-    type: 'appearance',
-    libArray: libArray,
-    mapping: appearanceMapping,
-    imports: appearanceImports,
-    mode: mode
+  const importFilesArray = [];
+  libArray.map(libName => {
+    const importFile = appearanceMapping[libName][mode];
+    importFilesArray.push(importFile);
+  });
+  return importFiles({
+    file: importFilesArray,
+    imports: appearanceImports
   });
 }
-export function getTheme(mode, theme, library) {
-  const libArray = typeof library === 'string' ? [library] : library != undefined ? library : defaultLib;
+export function getTheme(mode, theme) {
+  const libArray = defaultLib;
   errorMessage(themeArray, theme, 'theme');
-  processFiles({
-    type: 'theme',
-    libArray: libArray,
-    mapping: themeMapping,
-    imports: themeImports,
-    mode: mode,
-    theme: theme
+  const importFilesArray = [];
+  libArray.map(libName => {
+    const importFile = themeMapping[libName][theme][mode];
+    importFilesArray.push(importFile);
+  });
+  return importFiles({
+    file: importFilesArray,
+    imports: themeImports
   });
 }
 export function getZoomSize() {
-  processFiles({
-    type: 'zoom',
-    mapping: mapping,
-    imports: imports
-  });
+  return imports[mapping.zoomSize]();
 }
 export function getFontSize() {
-  processFiles({
-    type: 'font',
-    mapping: mapping,
-    imports: imports
-  });
+  return imports[mapping.fontSize]();
 }

package/es/v1/DotProvider/providerAssets.js

@@ -0,0 +1,38 @@
+import { getAppearance, getTheme, getZoomSize, getFontSize } from './libraryChunks/dynamicImports';
+export function providerAssets(_ref) {
+  let {
+    appearance,
+    theme,
+    baseZoomSize,
+    baseFontSize,
+    providerRef,
+    getAssetPromise,
+    sizeVariableName,
+    fontSizeVariableName
+  } = _ref;
+  const promises = [];
+  const libAppearance = getAppearance(appearance);
+  promises.push(libAppearance);
+  const libTheme = getTheme(appearance, theme);
+  promises.push(libTheme);
+
+  if (baseZoomSize) {
+    const zoomSize = getZoomSize();
+    promises.push(zoomSize);
+
+    if (providerRef()) {
+      providerRef().style.setProperty(sizeVariableName, baseZoomSize);
+    }
+  }
+
+  if (baseFontSize) {
+    const fontSize = getFontSize();
+    promises.push(fontSize);
+
+    if (providerRef()) {
+      providerRef().style.setProperty(fontSizeVariableName, baseFontSize);
+    }
+  }
+
+  getAssetPromise(Promise.all(promises));
+}

package/es/v1/DotProvider/useDotProvider.js

@@ -0,0 +1,40 @@
+import { useLayoutEffect } from 'react';
+import { providerAssets } from './providerAssets';
+import '@zohodesk/components/assets/Contrast/lightContrastLightness.module.css';
+import '@zohodesk/components/assets/Contrast/darkContrastLightness.module.css';
+import '@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css';
+import '@zohodesk/variables/assets/colorVariables.module.css';
+import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/components/es/common/basic.module.css';
+import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/components/lib/common/boxShadow.module.css';
+import '../../common/dot_boxShadow.module.css';
+
+function useDotProvider(_ref) {
+  let {
+    appearance = 'light',
+    theme = 'blue',
+    baseZoomSize = 1,
+    baseFontSize = 16,
+    providerRef = () => {
+      return document.documentElement;
+    },
+    getAssetPromise,
+    sizeVariableName = '--zd_baseSize',
+    fontSizeVariableName = '--zd_baseFontSize'
+  } = _ref;
+  useLayoutEffect(() => {
+    providerAssets({
+      appearance,
+      theme,
+      baseZoomSize,
+      baseFontSize,
+      providerRef,
+      getAssetPromise,
+      sizeVariableName,
+      fontSizeVariableName
+    });
+  }, [appearance, theme, baseZoomSize, baseFontSize, providerRef, getAssetPromise, sizeVariableName, fontSizeVariableName]);
+}
+
+export default useDotProvider;

package/es/v1/DotProvider/utils/importFiles.js

@@ -1,50 +1,8 @@
-export function processFiles(_ref) {
-  let {
-    type,
-    libArray,
-    mapping,
-    imports,
-    mode,
-    theme
-  } = _ref;
-
-  if (type === 'appearance') {
-    const importFilesArray = [];
-    libArray.map(libName => {
-      const importFile = mapping[libName][mode];
-      importFilesArray.push(importFile);
-    });
-    importFiles({
-      file: importFilesArray,
-      imports: imports
-    });
-  }
-
-  if (type === 'theme') {
-    const importFilesArray = [];
-    libArray.map(libName => {
-      const importFile = mapping[libName][theme][mode];
-      importFilesArray.push(importFile);
-    });
-    importFiles({
-      file: importFilesArray,
-      imports: imports
-    });
-  }
-
-  if (type === 'zoom') {
-    return imports[mapping.zoomSize]();
-  }
-
-  if (type === 'font') {
-    return imports[mapping.fontSize]();
-  }
-}
-export function importFiles(_ref2) {
+export function importFiles(_ref) {
   let {
     file,
     imports
-  } = _ref2;
+  } = _ref;
   const promises = [];
   file.forEach(fileKey => {
     if (imports[fileKey]) {
@@ -53,7 +11,7 @@ export function importFiles(_ref2) {
       console.error(`Import not found for ${fileKey}`);
     }
   });
-  return Promise.all(promises).catch(error => {
+  return Promise.all(promises).then(() => Promise.resolve()).catch(error => {
     console.error(`Error importing files:`, error);
     return Promise.reject(error);
   });

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -15,7 +15,7 @@ var _propTypes = require("./props/propTypes");
 
 var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
 
-var _TextBox = _interopRequireDefault(require("@zohodesk/components/lib/TextBox/TextBox"));
+var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/lib/TextBoxIcon/TextBoxIcon"));
 
 var _ValidationMessage = _interopRequireDefault(require("../ValidationMessage/ValidationMessage"));
 
@@ -150,8 +150,8 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
           renderLabelProps = _this$props3.renderLabelProps;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
-          _customProps$TextBoxP = customProps.TextBoxProps,
-          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
+          _customProps$TextBoxI = customProps.TextBoxIconProps,
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$Validati = customProps.ValidationMessageProps1,
           ValidationMessageProps1 = _customProps$Validati === void 0 ? {} : _customProps$Validati,
           _customProps$Validati2 = customProps.ValidationMessageProps2,
@@ -184,7 +184,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
-      }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({
+      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: uniqueId,
         id: id,
         type: textBoxType,
@@ -204,8 +204,11 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         isDisabled: isDisabled,
         needEffect: isReadOnly || isDisabled ? false : true,
         isClickable: isClickable,
-        needReadOnlyStyle: needReadOnlyStyle
-      }, TextBoxProps)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
+        needReadOnlyStyle: needReadOnlyStyle,
+        a11y: {
+          ariaLabelledby: labelName
+        }
+      }, TextBoxIconProps)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,
         type: errorType,

package/lib/form/fields/CurrencyField/__tests__/__snapshots__/CurrencyField.spec.js.snap

@@ -9,15 +9,46 @@ exports[`CurrencyField rendering the defult props 1`] = `
     <div
       class="fieldContainer "
     >
-      <input
-        class="  container xmedium  primary border effect  borderColor_default  "
-        data-id="textBox"
-        data-selector-id="textBox"
-        data-test-id="textBox"
-        id="1"
-        type="text"
-        value=""
-      />
+      <div
+        class="container effect    flex rowdir"
+        data-id="containerComponent"
+        data-selector-id="textBoxIcon"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="grow basis shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <input
+            class="  container xmedium  primary  effect  borderColor_default  "
+            data-id="textBoxIcon"
+            data-selector-id="textBoxIcon"
+            data-test-id="textBoxIcon"
+            id="1"
+            maxlength="250"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="iconContainer  shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+        <div
+          class="line borderColor_default "
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/lib/form/fields/CurrencyField/props/propTypes.js

@@ -44,7 +44,7 @@ var propTypes = _objectSpread({
   needReadOnlyStyle: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     LabelProps: _propTypes["default"].object,
-    TextBoxProps: _propTypes["default"].object,
+    TextBoxIconProps: _propTypes["default"].object,
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
   }),

package/lib/v1/DotProvider/libraryChunks/dynamicImports.js

@@ -8,57 +8,52 @@ exports.getFontSize = getFontSize;
 exports.getTheme = getTheme;
 exports.getZoomSize = getZoomSize;
 
+var _importFiles = require("../../../../es/v1/DotProvider/utils/importFiles");
+
 var _appearanceProperties = require("../utils/appearanceProperties");
 
 var _themeProperties = require("../utils/themeProperties");
 
 var _sizeProperties = require("../utils/sizeProperties");
 
-var _importFiles = require("../utils/importFiles");
-
 var _errorMessage = require("../utils/errorMessage");
 
 var defaultLib = ['component', 'dot', 'svg'];
 var modeArray = ['light', 'dark', 'pureDark'];
 var themeArray = ['blue', 'green', 'orange', 'red', 'yellow'];
 
-function getAppearance(mode, library) {
-  var libArray = typeof library === 'string' ? [library] : library != undefined ? library : defaultLib;
+function getAppearance(mode) {
+  var libArray = defaultLib;
   (0, _errorMessage.errorMessage)(modeArray, mode, 'appearance');
-  (0, _importFiles.processFiles)({
-    type: 'appearance',
-    libArray: libArray,
-    mapping: _appearanceProperties.appearanceMapping,
-    imports: _appearanceProperties.appearanceImports,
-    mode: mode
+  var importFilesArray = [];
+  libArray.map(function (libName) {
+    var importFile = _appearanceProperties.appearanceMapping[libName][mode];
+    importFilesArray.push(importFile);
+  });
+  return (0, _importFiles.importFiles)({
+    file: importFilesArray,
+    imports: _appearanceProperties.appearanceImports
   });
 }
 
-function getTheme(mode, theme, library) {
-  var libArray = typeof library === 'string' ? [library] : library != undefined ? library : defaultLib;
+function getTheme(mode, theme) {
+  var libArray = defaultLib;
   (0, _errorMessage.errorMessage)(themeArray, theme, 'theme');
-  (0, _importFiles.processFiles)({
-    type: 'theme',
-    libArray: libArray,
-    mapping: _themeProperties.themeMapping,
-    imports: _themeProperties.themeImports,
-    mode: mode,
-    theme: theme
+  var importFilesArray = [];
+  libArray.map(function (libName) {
+    var importFile = _themeProperties.themeMapping[libName][theme][mode];
+    importFilesArray.push(importFile);
+  });
+  return (0, _importFiles.importFiles)({
+    file: importFilesArray,
+    imports: _themeProperties.themeImports
   });
 }
 
 function getZoomSize() {
-  (0, _importFiles.processFiles)({
-    type: 'zoom',
-    mapping: _sizeProperties.mapping,
-    imports: _sizeProperties.imports
-  });
+  return _sizeProperties.imports[_sizeProperties.mapping.zoomSize]();
 }
 
 function getFontSize() {
-  (0, _importFiles.processFiles)({
-    type: 'font',
-    mapping: _sizeProperties.mapping,
-    imports: _sizeProperties.imports
-  });
+  return _sizeProperties.imports[_sizeProperties.mapping.fontSize]();
 }

package/lib/v1/DotProvider/providerAssets.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.providerAssets = providerAssets;
+
+var _dynamicImports = require("./libraryChunks/dynamicImports");
+
+function providerAssets(_ref) {
+  var appearance = _ref.appearance,
+      theme = _ref.theme,
+      baseZoomSize = _ref.baseZoomSize,
+      baseFontSize = _ref.baseFontSize,
+      providerRef = _ref.providerRef,
+      getAssetPromise = _ref.getAssetPromise,
+      sizeVariableName = _ref.sizeVariableName,
+      fontSizeVariableName = _ref.fontSizeVariableName;
+  var promises = [];
+  var libAppearance = (0, _dynamicImports.getAppearance)(appearance);
+  promises.push(libAppearance);
+  var libTheme = (0, _dynamicImports.getTheme)(appearance, theme);
+  promises.push(libTheme);
+
+  if (baseZoomSize) {
+    var zoomSize = (0, _dynamicImports.getZoomSize)();
+    promises.push(zoomSize);
+
+    if (providerRef()) {
+      providerRef().style.setProperty(sizeVariableName, baseZoomSize);
+    }
+  }
+
+  if (baseFontSize) {
+    var fontSize = (0, _dynamicImports.getFontSize)();
+    promises.push(fontSize);
+
+    if (providerRef()) {
+      providerRef().style.setProperty(fontSizeVariableName, baseFontSize);
+    }
+  }
+
+  getAssetPromise(Promise.all(promises));
+}

package/lib/v1/DotProvider/useDotProvider.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _providerAssets = require("./providerAssets");
+
+require("@zohodesk/components/assets/Contrast/lightContrastLightness.module.css");
+
+require("@zohodesk/components/assets/Contrast/darkContrastLightness.module.css");
+
+require("@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css");
+
+require("@zohodesk/variables/assets/colorVariables.module.css");
+
+require("@zohodesk/variables/assets/dotVariables.module.css");
+
+require("@zohodesk/components/es/common/basic.module.css");
+
+require("@zohodesk/variables/lib/fontFamilyVariables.module.css");
+
+require("@zohodesk/components/lib/common/boxShadow.module.css");
+
+require("../../common/dot_boxShadow.module.css");
+
+function useDotProvider(_ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'light' : _ref$appearance,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'blue' : _ref$theme,
+      _ref$baseZoomSize = _ref.baseZoomSize,
+      baseZoomSize = _ref$baseZoomSize === void 0 ? 1 : _ref$baseZoomSize,
+      _ref$baseFontSize = _ref.baseFontSize,
+      baseFontSize = _ref$baseFontSize === void 0 ? 16 : _ref$baseFontSize,
+      _ref$providerRef = _ref.providerRef,
+      providerRef = _ref$providerRef === void 0 ? function () {
+    return document.documentElement;
+  } : _ref$providerRef,
+      getAssetPromise = _ref.getAssetPromise,
+      _ref$sizeVariableName = _ref.sizeVariableName,
+      sizeVariableName = _ref$sizeVariableName === void 0 ? '--zd_baseSize' : _ref$sizeVariableName,
+      _ref$fontSizeVariable = _ref.fontSizeVariableName,
+      fontSizeVariableName = _ref$fontSizeVariable === void 0 ? '--zd_baseFontSize' : _ref$fontSizeVariable;
+  (0, _react.useLayoutEffect)(function () {
+    (0, _providerAssets.providerAssets)({
+      appearance: appearance,
+      theme: theme,
+      baseZoomSize: baseZoomSize,
+      baseFontSize: baseFontSize,
+      providerRef: providerRef,
+      getAssetPromise: getAssetPromise,
+      sizeVariableName: sizeVariableName,
+      fontSizeVariableName: fontSizeVariableName
+    });
+  }, [appearance, theme, baseZoomSize, baseFontSize, providerRef, getAssetPromise, sizeVariableName, fontSizeVariableName]);
+}
+
+var _default = useDotProvider;
+exports["default"] = _default;