@zohodesk/dot 1.7.21 → 1.7.23

package/lib/Hooks/Dragger/useDragger.js

@@ -36,6 +36,12 @@ function useDragger(_ref) {
     y: 0
   });
   var draggable = (0, _react.useRef)(false);
+  var dragStarted = (0, _react.useRef)(false);
+  var initialMouse = (0, _react.useRef)({
+    x: 0,
+    y: 0
+  });
+  var DRAG_DISTANCE_THRESHOLD = 4;
   (0, _react.useEffect)(function () {
     if (isActive) {
       parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || (0, _Config.getDotLibraryConfig)('draggerBoundary') || document.body;
@@ -62,46 +68,63 @@ function useDragger(_ref) {
     e = e || window.event;
     e.preventDefault();
 
-    if (draggable.current) {
-      var left = offset.current.x + e.clientX;
-      var top = offset.current.y + e.clientY;
+    if (!draggable.current) {
+      return;
+    }
+
+    if (!dragStarted.current) {
+      var dx = Math.abs(e.clientX - initialMouse.current.x);
+      var dy = Math.abs(e.clientY - initialMouse.current.y);
 
-      var _calculateDragPositio = calculateDragPosition(left, top),
-          x = _calculateDragPositio.x,
-          y = _calculateDragPositio.y;
+      if (dx < DRAG_DISTANCE_THRESHOLD && dy < DRAG_DISTANCE_THRESHOLD) {
+        return;
+      }
 
-      draggableEle.current.style.left = x + 'px';
-      draggableEle.current.style.top = y + 'px';
+      var draggableEleRect = draggableEle.current.getBoundingClientRect();
+      var parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
+        left: 0,
+        top: 0
+      };
+      offset.current.x = draggableEleRect.left - e.clientX;
+      offset.current.y = draggableEleRect.top - e.clientY;
+      var relativeRect = {
+        left: draggableEleRect.left - parentEleRect.left,
+        top: draggableEleRect.top - parentEleRect.top
+      };
+      var styleRef = draggableEle.current.style;
+      styleRef.top = "".concat(relativeRect.top, "px");
+      styleRef.left = "".concat(relativeRect.left, "px");
+      styleRef.width = "".concat(draggableEleRect.width, "px");
+      styleRef.position = "fixed";
+      styleRef.bottom = "initial";
+      styleRef.right = "initial";
+      dragStarted.current = true;
     }
+
+    var left = offset.current.x + e.clientX;
+    var top = offset.current.y + e.clientY;
+
+    var _calculateDragPositio = calculateDragPosition(left, top),
+        x = _calculateDragPositio.x,
+        y = _calculateDragPositio.y;
+
+    draggableEle.current.style.left = "".concat(x, "px");
+    draggableEle.current.style.top = "".concat(y, "px");
   }, [calculateDragPosition]);
   var closeDragElement = (0, _react.useCallback)(function () {
     document.removeEventListener('mouseup', closeDragElement);
     document.removeEventListener('mousemove', elementDrag);
+    dragStarted.current = false;
+    draggable.current = false;
   }, []);
   var dragMouseDown = (0, _react.useCallback)(function (e) {
     e = e || window.event; // e.preventDefault();
 
-    var draggableEleRect = draggableEle.current.getBoundingClientRect();
-    var style = draggableEle.current.style;
-    var width = draggableEleRect.width;
-    var parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
-      left: 0,
-      top: 0
-    };
-    var relativeRect = {
-      left: draggableEleRect.left - parentEleRect.left,
-      top: draggableEleRect.top - parentEleRect.top
+    initialMouse.current = {
+      x: e.clientX,
+      y: e.clientY
     };
-    var top = relativeRect.top,
-        left = relativeRect.left;
-    style.top = "".concat(top, "px");
-    style.left = "".concat(left, "px");
-    style.width = "".concat(width, "px");
-    style.bottom = 'initial';
-    style.right = 'initial';
-    style.position = 'fixed';
-    offset.current.x = draggableEle.current.offsetLeft - e.clientX;
-    offset.current.y = draggableEle.current.offsetTop - e.clientY;
+    dragStarted.current = false;
     draggable.current = true;
     document.addEventListener('mouseup', closeDragElement);
     document.addEventListener('mousemove', elementDrag);

package/lib/dot_layer.module.css

@@ -0,0 +1 @@
+@layer dot-core, dot-core.ActionButton, dot-core.AlphabeticList, dot-core.Attachment, dot-core.AttachmentViewer, dot-core.ChannelIcon, dot-core.Drawer, dot-core.ExternalLink, dot-core.FlipCard, dot-core.FormAction, dot-core.css, dot-core.IconButton, dot-core.Image, dot-core.ImportantNotes, dot-core.Link, dot-core.Loader, dot-core.Message, dot-core.MessageBanner, dot-core.NewStar, dot-core.PlusIcon, dot-core.Separator, dot-core.TagWithIcon, dot-core.ToastMessage, dot-core.Upload, dot-core.AlertHeader, dot-core.AlertLookup, dot-core.AvatarClose, dot-core.AvatarCollision, dot-core.AvatarIcon, dot-core.AvatarStatus, dot-core.AvatarThread, dot-core.AvatarUser, dot-core.AvatarWithTeam, dot-core.common, dot-core.FreezeLayer, dot-core.SelectDropdown, dot-core.ToggleDropDown, dot-core.CommonEmptyState, dot-core.EditionPage, dot-core.errorstate, dot-core.Inconvenience, dot-core.LinkText, dot-core.NoRequestFound, dot-core.PermissionPlay, dot-core.RequestUrlNotFound, dot-core.UnableToProcess, dot-core.UnauthorizedLogin, dot-core.WillBack, dot-core.fields, dot-core.TagsMultiSelect, dot-core.TagsMultiSelectField, dot-core.TextEditor, dot-core.TextEditorWrapper, dot-core.ValidationMessage, dot-core.Field, dot-core.Section, dot-core.SetupDetailLayout, dot-core.SubtabLayout, dot-core.AvatarFlip, dot-core.BluePrintStatus, dot-core.Comment, dot-core.DepartmentDropDown, dot-core.Dot, dot-core.DotNew, dot-core.GridStencils, dot-core.Icons, dot-core.ListLayout, dot-core.ListStencils, dot-core.SecondaryText, dot-core.SecondryPanel, dot-core.SentimentStatus, dot-core.Subject, dot-core.TagNew, dot-core.Thread, dot-core.list, dot-core.StatusDropdown, dot-core.StatusListItem, dot-core.EmptyPage, dot-core.Lookup, dot-core.Close, dot-core.Search, dot-core.TicketHeader, dot-core.Title, dot-core.ViewDropDown, dot-core.header, dot-core.Button, dot-core.Views, dot-core.Description, dot-core.ListGroup, dot-core.TableData, dot-core.TableHead, dot-core.TableRow, dot-core.Text, dot-core.AlertClose, dot-core.GlobalNotification, dot-core.alertIcons, dot-core.lookup, dot-core.DesktopNotification, dot-core.DesktopNotificationHeader, dot-core.mode, dot-core.blue, dot-core.green, dot-core.orange, dot-core.red, dot-core.yellow;

package/lib/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -5,6 +5,7 @@
   display: inline;
 }
 .icon{
+  /*css:theme-validation:ignore*/
   color:var(--label_text_color);
   display: inline-block;
   margin: 0 var(--zd_size5) ;

package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -6,6 +6,7 @@
   composes: varClass;
   min-height: var(--zd_size54) ;
   position: relative;
+  /*css:theme-validation:ignore*/
   color: var(--zdt_desktopnotification_text);
   background-color: var(--alert_lookup_bg_color);
   border-style: solid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.7.21",
+  "version": "1.7.23",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -26,22 +26,23 @@
     "build:watch": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
     "rtl:watch": "react-cli rtl ./src ./es -w",
     "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
-    "prepare": "react-cli clean assets &&  npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
+    "prepare": "react-cli clean assets &&  npm run init && npm run css:build ",
     "init": "npm run clean && npm run build:variables",
     "build:variables": "react-cli clean ./assets && node ./preprocess/index",
     "lint": "react-cli lint",
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
+    "customTest": "node ./__testUtils__/runTest.js",
     "test": "react-cli test",
     "_test": "",
     "snap-update": "npm run test-clean && npm run test -- -u",
     "sstest": "react-cli sstest",
     "common_package_build": "cd ../common && npm run build && cd ../dot",
     "docs": "npm run css:review && review:props && react-cli docs",
-    "prepublishOnly": "node prePublish.js && npm run downloadOnly  && npm run css:review  && npm run review:props",
+    "prepublishOnly": "node prePublish.js && npm run downloadOnly && 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": "react-cli clean ./node_modules ./package-lock.json && npm install && cd ../ && npm run download",
+    "download": "npm run downloadOnly  && cd ../ && npm run download",
     "downloadOnly": "react-cli clean ./node_modules ./package-lock.json && npm install",
     "expublish": "npm publish --tag experimental-version",
     "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
@@ -53,7 +54,14 @@
     "theme:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation validate ./src ./.cli ./.cli/stringContains.js",
     "theme:addignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation addignore ./src ./.cli ./.cli/stringContains.js",
     "theme:removeignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation removeignore ./src ./.cli",
-    "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json"
+    "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json",
+    "css:layer_config_generate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/scan_css_generate_json.js ./src ./assets css_layer_config.json",
+    "css:layer_wrap_es": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets --skip-existing-layer",
+    "css:layer_wrap_lib": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./lib ./assets css_layer_config.json --rewrite=src=lib  --rewrite=assets=assets --skip-existing-layer",
+    "css:layer_generate_order": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/generate_layer_order.js  css_layer_config.json ./src/dot_layer.module.css",
+    "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js  css_layer_config.json ./src/ ./assets",
+    "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build && npm run rtl && npm run cssVariableConvert  ",
+    "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es  --rewrite=assets=assets"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.9",
@@ -62,7 +70,7 @@
     "@testing-library/user-event": "^13.0.10",
     "@zohodesk-private/color-variable-preprocessor": "1.2.0",
     "@zohodesk-private/css-variable-migrator": "1.0.9",
-    "@zohodesk-private/node-plugins": "1.1.8",
+    "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.7",
     "@zohodesk/components": "1.4.12",

package/.cli/MissedPropType_Keys.html

@@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
-
-    <title>Missed PropType Key</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            font-family: 'Asap Condensed', sans-serif;
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-
-        th {
-            position: sticky;
-            top: 0;
-            background-color: #001C30;
-            color: #F5F5F5;
-        }
-
-        th,
-        td {
-            border: 1px solid black;
-            padding: 8px;
-        }
-
-        tr:nth-child(even) {
-            background-color: #EDEEF7;
-        }
-
-        .table-container {
-            margin-bottom: 20px;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="table-container"></div>
-    <script>
-        const jsonData = {}
-        const tableContainer = document.getElementById('table-container');
-        const table = document.createElement('table');
-        const thead = document.createElement('thead');
-        const tbody = document.createElement('tbody');
-
-        const headerRow = document.createElement('tr');
-        const headers = ['No', 'Component', 'FilePath'];
-        headers.forEach(header => {
-            const th = document.createElement('th');
-            th.textContent = header;
-            headerRow.appendChild(th);
-        });
-        thead.appendChild(headerRow);
-        table.appendChild(thead);
-        var componentCount = 1;
-        function generateRows(component, data, innerComponent = '') {
-
-            const filePath = data.filePath ? data.filePath : '';
-
-            const row = document.createElement('tr');
-            const numbers = document.createElement('td');
-            const componentCell = document.createElement('td');
-            const filePathCell = document.createElement('td');
-
-            numbers.textContent = componentCount;
-            componentCell.textContent = component;
-            filePathCell.textContent = filePath;
-
-            row.appendChild(numbers);
-            row.appendChild(componentCell);
-            row.appendChild(filePathCell);
-            tbody.appendChild(row);
-
-            if (data.innerComponent) {
-                Object.entries(data.innerComponent).forEach(([innerComp, innerData]) => {
-                    generateRows(innerComp, innerData, component);
-                });
-            }
-            componentCount++;
-        }
-
-        Object.entries(jsonData).forEach(([component, data]) => {
-            generateRows(component, data);
-        });
-
-        table.appendChild(tbody);
-        tableContainer.appendChild(table);
-
-        generateTable(jsonData);
-    </script>
-</body>
-
-</html>

package/.cli/PropLessFiles.html

@@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
-
-    <title>Prop Less components</title>
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            font-family: 'Asap Condensed', sans-serif;
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-
-        th {
-            position: sticky;
-            top: 0;
-            background-color: #001C30;
-            color: #F5F5F5;
-        }
-
-        th,
-        td {
-            border: 1px solid black;
-            padding: 8px;
-        }
-
-        tr:nth-child(even) {
-            background-color: #EDEEF7;
-        }
-
-        .table-container {
-            margin-bottom: 20px;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="table-container"></div>
-    <script>
-        const jsonData = {"LinkContext":{"filePath":"src/Link/LinkContext.js"},"Loader":{"filePath":"src/v1/Loader/Loader.js"},"MessageNew":{"filePath":"src/v1/Message/Message.js"},"GlobalNotificationNew":{"filePath":"src/version2/GlobalNotification/GlobalNotification.js"},"DesktopNotification":{"filePath":"src/version2/notification/DesktopNotification/DesktopNotification.js"}}
-        const tableContainer = document.getElementById('table-container');
-        const table = document.createElement('table');
-        const thead = document.createElement('thead');
-        const tbody = document.createElement('tbody');
-
-        const headerRow = document.createElement('tr');
-        const headers = ['No', 'Component', 'FilePath'];
-        headers.forEach(header => {
-            const th = document.createElement('th');
-            th.textContent = header;
-            headerRow.appendChild(th);
-        });
-        thead.appendChild(headerRow);
-        table.appendChild(thead);
-        var componentCount = 1;
-        function generateRows(component, data, innerComponent = '') {
-
-            const filePath = data.filePath ? data.filePath : '';
-
-            const row = document.createElement('tr');
-            const numbers = document.createElement('td');
-            const componentCell = document.createElement('td');
-            const filePathCell = document.createElement('td');
-
-            numbers.textContent = componentCount;
-            componentCell.textContent = component;
-            filePathCell.textContent = filePath;
-
-            row.appendChild(numbers);
-            row.appendChild(componentCell);
-            row.appendChild(filePathCell);
-            tbody.appendChild(row);
-
-            if (data.innerComponent) {
-                Object.entries(data.innerComponent).forEach(([innerComp, innerData]) => {
-                    generateRows(innerComp, innerData, component);
-                });
-            }
-            componentCount++;
-        }
-
-        Object.entries(jsonData).forEach(([component, data]) => {
-            generateRows(component, data);
-        });
-
-        table.appendChild(tbody);
-        tableContainer.appendChild(table);
-
-        generateTable(jsonData);
-    </script>
-</body>
-
-</html>