react-core-ts 1.0.10 → 1.0.11

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import './styles/global.css';
 export { default as AutoComplete } from './AutoComplete';
 export { default as CustomAutoComplete } from './AutoComplete';
 export { default as ExpandableAutoComplete } from './ExpandableAutoComplete';
+export { default as ExpandableToolTip } from './utilities/expandableTootltip';
 export { default as ToolTip } from './utilities/tooltip';
 export { deepEqual } from './utilities/deepEqual';
 export type { AutoSuggestionInputProps } from './commontypes';

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deepEqual = exports.ToolTip = exports.ExpandableAutoComplete = exports.CustomAutoComplete = exports.AutoComplete = void 0;
+exports.deepEqual = exports.ToolTip = exports.ExpandableToolTip = exports.ExpandableAutoComplete = exports.CustomAutoComplete = exports.AutoComplete = void 0;
 require("./styles/global.css");
 var AutoComplete_1 = require("./AutoComplete");
 Object.defineProperty(exports, "AutoComplete", { enumerable: true, get: function () { return __importDefault(AutoComplete_1).default; } });
@@ -11,6 +11,8 @@ var AutoComplete_2 = require("./AutoComplete");
 Object.defineProperty(exports, "CustomAutoComplete", { enumerable: true, get: function () { return __importDefault(AutoComplete_2).default; } });
 var ExpandableAutoComplete_1 = require("./ExpandableAutoComplete");
 Object.defineProperty(exports, "ExpandableAutoComplete", { enumerable: true, get: function () { return __importDefault(ExpandableAutoComplete_1).default; } });
+var expandableTootltip_1 = require("./utilities/expandableTootltip");
+Object.defineProperty(exports, "ExpandableToolTip", { enumerable: true, get: function () { return __importDefault(expandableTootltip_1).default; } });
 var tooltip_1 = require("./utilities/tooltip");
 Object.defineProperty(exports, "ToolTip", { enumerable: true, get: function () { return __importDefault(tooltip_1).default; } });
 var deepEqual_1 = require("./utilities/deepEqual");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAA6B;AAE7B,+CAAyD;AAAhD,6HAAA,OAAO,OAAgB;AAChC,+CAA+D;AAAtD,mIAAA,OAAO,OAAsB;AACtC,mEAA6E;AAApE,iJAAA,OAAO,OAA0B;AAE1C,+CAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,mDAAkD;AAAzC,sGAAA,SAAS,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAA6B;AAE7B,+CAAyD;AAAhD,6HAAA,OAAO,OAAgB;AAChC,+CAA+D;AAAtD,mIAAA,OAAO,OAAsB;AACtC,mEAA6E;AAApE,iJAAA,OAAO,OAA0B;AAC1C,qEAA8E;AAArE,wIAAA,OAAO,OAAqB;AACrC,+CAAyD;AAAhD,mHAAA,OAAO,OAAW;AAC3B,mDAAkD;AAAzC,sGAAA,SAAS,OAAA"}

package/dist/styles/styles/components/autocomplete.css

@@ -0,0 +1,578 @@
+body * {
+  box-sizing: border-box;
+}
+:root {
+  --grey-dark: #4a4a4a;
+  --grey-light: #d3d3d3;
+  --blue-navy: #001f3f;
+  --input-disabled: #a9a9a9;
+  --error-light: #f08080;
+  --error-extra-light: #fddede;
+  --success: #28a745;
+  --success-light: #d4edda;
+  --blue-light: #add8e6;
+}
+:root {
+  --blue-navy: #001f3f;
+  --table-hover: #your-hover-color; /* Replace with your actual color code */
+}
+
+.custom-spinner {
+  width: 24px !important; /* w-6 */
+  height: 24px; /* h-6 */
+  color: transparent; /* text-table-hover */
+  fill: var(--blue-navy); /* fill-blue-navy */
+  animation: spin 1s linear infinite; /* animate-spin */
+  width: 15px;
+  position: relative;
+  top: 1px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.textfield,
+.textfield-big {
+  outline: none;
+  color: var(--grey-dark);
+  border-color: var(--grey-light);
+  background-color: white;
+}
+
+.textfield:focus,
+.textfield-big:focus {
+  border-color: var(--blue-navy);
+}
+
+.textfield:disabled,
+.textfield-big:disabled {
+  color: var(--input-disabled);
+}
+
+.textfield-error,
+.textfield-big-error {
+  outline: none;
+  color: var(--error-light) !important;
+  border-color: var(--error-light) !important;
+  background-color: var(--error-extra-light) !important ;
+}
+
+.textfield-error::placeholder,
+.textfield-big-error::placeholder {
+  color: var(--error-light);
+}
+
+.textfield-success {
+  outline: none;
+  color: var(--success);
+  border-color: var(--success);
+  background-color: var(--success-light);
+}
+
+.textfield-success:focus {
+  ring-width: 0;
+}
+
+.textfield-success::placeholder {
+  color: var(--success);
+}
+
+.textfield-editable {
+  outline: none;
+  color: var(--grey-dark);
+  border-color: var(--blue-navy);
+  background-color: var(--blue-light);
+}
+
+.textfield-editable::placeholder {
+  color: var(--grey-dark);
+}
+
+.qbs-autocomplete-suggestions {
+  position: absolute;
+  height: auto;
+  width: 100%;
+  padding: 8px; /* Corresponding to p-1.5 in Tailwind */
+  z-index: 99;
+  margin-top: 4px;
+  margin-bottom: 0;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
+}
+.qbs-autocomplete-suggestions.bottom {
+  top: 100%; /* Position below the input */
+  /* Other styling */
+}
+
+.qbs-autocomplete-suggestions.top {
+  bottom: 100%; /* Position above the input */
+  /* Other styling */
+}
+.qbs-autocomplete-suggestions-item {
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 6px;
+  color: #222;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.qbs-autocomplete-suggestions-item:hover {
+  background: #f8f8f8;
+  border-radius: 6px;
+}
+
+/* When value.id is equal to suggestion.id */
+.is-selected {
+  border-radius: 6px;
+  background: var(--neutrals-grey-20, #f4f4f4);
+}
+
+/* When value.id is NOT equal to suggestion.id */
+.qbs-autocomplete-suggestions-item .is-not-selected:hover {
+  background-color: #f1f5f9; /* Replace with actual color code for 'hover:bg-table-hover' */
+}
+
+.qbs-autocomplete-notfound {
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.qbs-autocomplete-close-icon {
+  position: absolute;
+  top: calc(50% - 7px);
+  right: 2px; /* right-1 */
+  padding-left: 0.25rem; /* px-1 */
+  padding-right: 0.25rem; /* px-1 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white; /* bg-white */
+}
+.qbs-textfield-default {
+  width: 100%;
+  position: relative;
+  padding-right: 8px;
+  min-height: 36px;
+  height: 36px;
+  border-radius: 6px;
+  padding-left: 8px;
+  border: 1px solid #d6d8dc;
+  background: #fff;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  color: #313131;
+}
+
+.qbs-expandable-container {
+  border: 1px solid #d6d8dc;
+  background: #fff;
+  box-sizing: border-box;
+  padding: 5px;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 1 0%;
+  gap: 5px;
+}
+
+.qbs-textfield-default.expandable {
+  height: auto;
+  border: none;
+}
+
+.qbs-expandable-container .qbs-textfield-expandable {
+  flex: 1 1 auto;
+  display: inline-grid;
+  grid-template-columns: 0px min-content;
+  grid-area: 1 / 1 / 2 / 3;
+  overflow: hidden;
+}
+.qbs-expandable-container .qbs-textfield-expandable::after {
+  content: attr(data-value) " ";
+  visibility: hidden;
+  white-space: pre;
+  grid-area: 1 / 2;
+  font: inherit;
+  min-width: 2px;
+  border: 0px;
+  margin: 0px;
+  outline: 0px;
+  padding: 0px;
+}
+.qbs-expandable-container .qbs-textfield-expandable input {
+  opacity: 1;
+  width: 100%;
+  grid-area: 1 / 2;
+  min-width: 10px;
+  border: 0px;
+  margin: 0px;
+  outline: 0px;
+  padding: 0px;
+  height: auto;
+  min-height: auto;
+  border-radius: 0;
+}
+
+.qbs-textfield-default::placeholder {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.qbs-autocomplete-close-icon button:focus-within {
+  outline: none;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.autoWidth {
+  width: auto;
+}
+.icon-button {
+  background: transparent;
+  border: none;
+  display: inline-flex;
+  cursor: pointer;
+  padding: 0px 1px;
+}
+.labels {
+  font-size: 12px;
+}
+.dropdown-search-input {
+  min-width: -webkit-fill-available;
+  border-radius: 6px;
+  border: 1px solid var(--border-card-color-default, #d6d8dc);
+  background: var(--surface-input-bg-color-default, #fff);
+  color: #313131;
+  font-size: 14px;
+  height: 36px;
+  padding: 0px 8px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  padding-left: 32px;
+}
+.qbs-autocomplete-suggestions-sub {
+  position: relative;
+  overflow: auto;
+  max-height: 192px;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.qbs-autocomplete-listitem-container {
+  display: flex;
+  align-items: center;
+  gap: 0px;
+}
+ul {
+  list-style-type: none;
+}
+
+.react-core-ts-search-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4, 4px);
+  align-self: stretch;
+  margin-bottom: 4px;
+}
+.selected-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 6px;
+  margin: 0;
+  background-color: #e0e0e0;
+  color: #333;
+  border-radius: 6px;
+  border: 1px solid rgba(231, 100, 88, 0.1);
+  background: rgba(231, 100, 88, 0.1);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  color: #e76458;
+  gap: 6px;
+  height: 22px;
+}
+
+.remove-item-btn {
+  background-color: transparent;
+  border: none;
+  color: #e76458;
+  cursor: pointer;
+}
+
+.remove-item-btn:hover {
+  color: #e76458;
+}
+
+.selected-items-container {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  position: absolute;
+  left: 8px;
+  z-index: 99;
+  top: 6.5px;
+  flex-wrap: wrap;
+}
+
+.qbs-expandable-container .selected-items-container {
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.selected-item-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 8px;
+  margin: 0;
+  border-radius: 6px;
+  background: #c63a3a;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  color: #fff;
+  height: 22px;
+}
+
+.loadMoreSection {
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-start;
+  padding: 8px;
+}
+.loadMoreSection p {
+  color: #336cfc;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  margin: 0;
+}
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
+  border-radius: 0px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 4px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 100px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
+  background-color: #ddd;
+}
+
+.qbs-autocomplete-suggestions-item.is-selected {
+  color: #e76458;
+  background: #f8f8f8;
+}
+
+span.dropdown-search-icon {
+  position: absolute;
+  left: 8px;
+  top: 10px;
+}
+
+.dropdown-search-input:focus {
+  outline: none;
+  border: 1px solid #222;
+}
+
+.qbs-autocomplete-checkbox-container {
+  gap: 8px;
+  padding: 6px 8px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.qbs-autocomplete-checkbox-container .qbs-autocomplete-suggestions-item {
+  padding: 0;
+  pointer-events: none;
+}
+
+.qbs-autocomplete-checkbox-container:hover {
+  background: #f8f8f8;
+  border-radius: 6px;
+}
+
+.qbs-autocomplete-checkbox-container.is-selected {
+  background: #f8f8f8;
+  border-radius: 6px;
+}
+
+.qbs-autocomplete-checkbox {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qbs-autocomplete-checkbox input {
+  opacity: 0;
+}
+
+.qbs-autocomplete-checkbox input ~ label {
+  position: absolute;
+  border-radius: 3px;
+  border: 1px solid #999696;
+  width: 16px;
+  height: 16px;
+  top: 3px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.qbs-autocomplete-checkbox input ~ label svg {
+  opacity: 0;
+  transition: all 0.2s ease;
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 9px;
+  height: 9px;
+}
+
+.qbs-autocomplete-checkbox input:checked ~ label {
+  transition: all 0.2s ease;
+  border-radius: 3px;
+  background: #e76458;
+  border-color: #e76458;
+}
+.qbs-autocomplete-checkbox input:checked ~ label svg {
+  opacity: 1;
+  transition: all 0.2s ease;
+}
+
+.action_label {
+  font-size: 14px;
+  color: #4c7ad6;
+}
+/* Tooltip.css */
+/* .tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-content {
+  visibility: hidden;
+  width: max-content;
+  background-color: black;
+  color: white;
+  text-align: center;
+  max-width: 150px;
+  padding: 5px 10px;
+  border-radius: 6px;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: visibility 0.2s ease-in-out;
+}
+
+.tooltip-content::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: black transparent transparent transparent;
+}
+
+.tooltip-wrapper:hover .tooltip-content {
+  visibility: visible;
+} */
+.qbs-table-tooltip {
+  position: relative;
+  display: contents;
+  cursor: pointer;
+}
+
+.qbs-table-tooltip .tooltiptext, .tooltiptext {
+  visibility: hidden;
+  background-color: #000;
+  color: #fff;
+  text-align: center;
+  padding: 6px;
+  border-radius: 4px;
+  position: absolute;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.3s;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  max-width: 300px;
+}
+
+.qbs-table-tooltip.up .tooltiptext {
+  bottom: 125%;
+  left: 0%;
+}
+
+.qbs-table-tooltip.down .tooltiptext {
+  top: 125%;
+  right: 0px;
+  left: auto;
+}
+
+.qbs-table-tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
+.qbs-table-tooltip .tooltiptext::after, .tooltiptext::after {
+  content: "";
+  position: absolute;
+  border-width: 5px;
+  border-style: solid;
+}
+
+.qbs-table-tooltip.up .tooltiptext::after, .up.tooltiptext::after {
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-color: #000 transparent transparent transparent;
+}
+
+.qbs-table-tooltip.down .tooltiptext::after, .down.tooltiptext::after {
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-color: transparent transparent #000 transparent;
+}

package/dist/styles/styles/global.css

@@ -0,0 +1 @@
+@import './components/autocomplete.css';

package/dist/utilities/expandableTootltip.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
+import React from 'react';
 declare const ExpandableToolTip: React.FC<any>;
 export default ExpandableToolTip;

package/dist/utilities/expandableTootltip.js

@@ -41,7 +41,7 @@ var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var ExpandableToolTip = function (_a) {
     var title = _a.title, children = _a.children, enabled = _a.enabled;
-    var _b = (0, react_1.useState)("bottom-position"), dropdownPosition = _b[0], setDropdownPosition = _b[1];
+    var _b = (0, react_1.useState)('bottom-position'), dropdownPosition = _b[0], setDropdownPosition = _b[1];
     var dropRef = (0, react_1.useRef)(null);
     var menuButtonRef = (0, react_1.useRef)(null);
     var _c = (0, react_1.useState)(false), visible = _c[0], setVisible = _c[1];
@@ -59,19 +59,19 @@ var ExpandableToolTip = function (_a) {
             var spaceBelow = viewportHeight - inputBoxRect.bottom;
             if (spaceAbove > spaceBelow) {
                 if (spaceAbove > 90 && spaceBelow < 120) {
-                    return "top-position";
+                    return 'top-position';
                 }
                 else {
-                    return "bottom-position";
+                    return 'bottom-position';
                 }
             }
             else {
                 var diff = spaceBelow - spaceAbove;
                 if (spaceAbove > 90 && spaceBelow > 90 && diff < 90) {
-                    return "top-position";
+                    return 'top-position';
                 }
                 else {
-                    return "bottom-position";
+                    return 'bottom-position';
                 }
             }
         }
@@ -86,7 +86,7 @@ var ExpandableToolTip = function (_a) {
             var left = rect.left + window.scrollX;
             var height = rect.height;
             var width = (_a = dropRef === null || dropRef === void 0 ? void 0 : dropRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-            if (dropPosition === "bottom-position") {
+            if (dropPosition === 'bottom-position') {
                 top_1 = top_1 + height / 2 - 5;
             }
             else {
@@ -111,7 +111,7 @@ var ExpandableToolTip = function (_a) {
                 var boxWidth_1 = menuButtonRef.current.offsetWidth;
                 setTooltipStyle(function (prevStyle) { return (__assign(__assign({}, prevStyle), { left: prevStyle.left + boxWidth_1 / 2 - tooltipWidth_1 / 2 < 0
                         ? 20
-                        : prevStyle.left + boxWidth_1 / 2 - tooltipWidth_1 / 2, width: tooltipWidth_1, top: dropdownPosition === "bottom-position"
+                        : prevStyle.left + boxWidth_1 / 2 - tooltipWidth_1 / 2, width: tooltipWidth_1, top: dropdownPosition === 'bottom-position'
                         ? prevStyle.top
                         : prevStyle.top - tooltipHeight_1 })); });
             }
@@ -119,9 +119,9 @@ var ExpandableToolTip = function (_a) {
         if (visible) {
             updateTooltipPosition();
         }
-        window.addEventListener("resize", updateTooltipPosition);
+        window.addEventListener('resize', updateTooltipPosition);
         return function () {
-            window.removeEventListener("resize", updateTooltipPosition);
+            window.removeEventListener('resize', updateTooltipPosition);
         };
     }, [visible, dropdownPosition]);
     (0, react_1.useEffect)(function () {
@@ -130,26 +130,25 @@ var ExpandableToolTip = function (_a) {
                 setVisible(false);
             }
         };
-        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener('mousedown', handleClickOutside);
         return function () {
-            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener('mousedown', handleClickOutside);
         };
     }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuButtonRef, style: { display: "flex" } },
-            children,
-            visible &&
-                enabled &&
-                tooltipStyle &&
-                react_dom_1.default.createPortal(react_1.default.createElement("span", { ref: function (node) { return (dropRef.current = node); }, className: "tooltiptext  ".concat(dropdownPosition == "bottom-position" ? "down" : "up"), style: {
-                        top: tooltipStyle.top,
-                        left: tooltipStyle.left,
-                        opacity: 1,
-                        width: tooltipStyle.width,
-                        minWidth: "60px",
-                        maxWidth: "200px",
-                        visibility: "visible",
-                    } }, title), document.body))));
+    return (react_1.default.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuButtonRef, style: { display: 'flex' } },
+        children,
+        visible &&
+            enabled &&
+            tooltipStyle &&
+            react_dom_1.default.createPortal(react_1.default.createElement("span", { ref: function (node) { return (dropRef.current = node); }, className: "tooltiptext  ".concat(dropdownPosition == 'bottom-position' ? 'down' : 'up'), style: {
+                    top: tooltipStyle.top,
+                    left: tooltipStyle.left,
+                    opacity: 1,
+                    width: tooltipStyle.width,
+                    minWidth: '60px',
+                    maxWidth: '200px',
+                    visibility: 'visible',
+                } }, title), document.body)));
 };
 exports.default = ExpandableToolTip;
 //# sourceMappingURL=expandableTootltip.js.map

package/dist/utilities/expandableTootltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandableTootltip.js","sourceRoot":"","sources":["../../src/utilities/expandableTootltip.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"expandableTootltip.js","sourceRoot":"","sources":["../../src/utilities/expandableTootltip.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-core-ts",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/index.tsx

@@ -3,7 +3,7 @@ import './styles/global.css';
 export { default as AutoComplete } from './AutoComplete';
 export { default as CustomAutoComplete } from './AutoComplete';
 export { default as ExpandableAutoComplete } from './ExpandableAutoComplete';
-
+export { default as ExpandableToolTip } from './utilities/expandableTootltip';
 export { default as ToolTip } from './utilities/tooltip';
 export { deepEqual } from './utilities/deepEqual';
 export type { AutoSuggestionInputProps } from './commontypes';

package/src/utilities/expandableTootltip.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useRef, useLayoutEffect, useEffect } from "react";
-import ReactDOM from "react-dom";
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 
 const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
-  const [dropdownPosition, setDropdownPosition] = useState("bottom-position");
+  const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
   const dropRef = useRef(null);
   const menuButtonRef = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(false);
@@ -20,16 +20,16 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
       const spaceBelow = viewportHeight - inputBoxRect.bottom;
       if (spaceAbove > spaceBelow) {
         if (spaceAbove > 90 && spaceBelow < 120) {
-          return "top-position";
+          return 'top-position';
         } else {
-          return "bottom-position";
+          return 'bottom-position';
         }
       } else {
         const diff: number = spaceBelow - spaceAbove;
         if (spaceAbove > 90 && spaceBelow > 90 && diff < 90) {
-          return "top-position";
+          return 'top-position';
         } else {
-          return "bottom-position";
+          return 'bottom-position';
         }
       }
     }
@@ -44,7 +44,7 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
       let left = rect.left + window.scrollX;
       const height = rect.height;
       const width = dropRef?.current?.offsetWidth;
-      if (dropPosition === "bottom-position") {
+      if (dropPosition === 'bottom-position') {
         top = top + height / 2 - 5;
       } else {
         top = top - height * 2 + 15;
@@ -77,7 +77,7 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
               : prevStyle.left + boxWidth / 2 - tooltipWidth / 2,
           width: tooltipWidth,
           top:
-            dropdownPosition === "bottom-position"
+            dropdownPosition === 'bottom-position'
               ? prevStyle.top
               : prevStyle.top - tooltipHeight,
         }));
@@ -88,10 +88,10 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
       updateTooltipPosition();
     }
 
-    window.addEventListener("resize", updateTooltipPosition);
+    window.addEventListener('resize', updateTooltipPosition);
 
     return () => {
-      window.removeEventListener("resize", updateTooltipPosition);
+      window.removeEventListener('resize', updateTooltipPosition);
     };
   }, [visible, dropdownPosition]);
 
@@ -102,47 +102,45 @@ const ExpandableToolTip: React.FC<any> = ({ title, children, enabled }) => {
       }
     };
 
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
 
   return (
-    <>
-      <div
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        ref={menuButtonRef}
-        style={{ display: "flex" }}
-      >
-        {children}
+    <div
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      ref={menuButtonRef}
+      style={{ display: 'flex' }}
+    >
+      {children}
 
-        {visible &&
-          enabled &&
-          tooltipStyle &&
-          ReactDOM.createPortal(
-            <span
-              ref={(node) => (dropRef.current = node)}
-              className={`tooltiptext  ${
-                dropdownPosition == "bottom-position" ? "down" : "up"
-              }`}
-              style={{
-                top: tooltipStyle.top,
-                left: tooltipStyle.left,
-                opacity: 1,
-                width: tooltipStyle.width,
-                minWidth: "60px",
-                maxWidth: "200px",
-                visibility: "visible",
-              }}
-            >
-              {title}
-            </span>,
-            document.body
-          )}
-      </div>
-    </>
+      {visible &&
+        enabled &&
+        tooltipStyle &&
+        ReactDOM.createPortal(
+          <span
+            ref={(node) => (dropRef.current = node)}
+            className={`tooltiptext  ${
+              dropdownPosition == 'bottom-position' ? 'down' : 'up'
+            }`}
+            style={{
+              top: tooltipStyle.top,
+              left: tooltipStyle.left,
+              opacity: 1,
+              width: tooltipStyle.width,
+              minWidth: '60px',
+              maxWidth: '200px',
+              visibility: 'visible',
+            }}
+          >
+            {title}
+          </span>,
+          document.body
+        )}
+    </div>
   );
 };