react-core-ts 1.0.7 → 1.0.8

package/dist/utilities/expandableTootltip.js

@@ -0,0 +1,155 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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];
+    var _d = (0, react_1.useState)({
+        top: 0,
+        left: 0,
+        width: 0,
+    }), tooltipStyle = _d[0], setTooltipStyle = _d[1];
+    var adjustDropdownPosition = function () {
+        var _a;
+        if (menuButtonRef.current) {
+            var inputBoxRect = (_a = menuButtonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var viewportHeight = window.innerHeight;
+            var spaceAbove = inputBoxRect.top;
+            var spaceBelow = viewportHeight - inputBoxRect.bottom;
+            if (spaceAbove > spaceBelow) {
+                if (spaceAbove > 90 && spaceBelow < 120) {
+                    return "top-position";
+                }
+                else {
+                    return "bottom-position";
+                }
+            }
+            else {
+                var diff = spaceBelow - spaceAbove;
+                if (spaceAbove > 90 && spaceBelow > 90 && diff < 90) {
+                    return "top-position";
+                }
+                else {
+                    return "bottom-position";
+                }
+            }
+        }
+    };
+    var handleMouseEnter = function (e) {
+        var _a;
+        if (menuButtonRef.current) {
+            var dropPosition = adjustDropdownPosition();
+            setDropdownPosition(dropPosition);
+            var rect = e.target.getBoundingClientRect();
+            var top_1 = rect.bottom + window.scrollY;
+            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") {
+                top_1 = top_1 + height / 2 - 5;
+            }
+            else {
+                top_1 = top_1 - height * 2 + 15;
+            }
+            setTooltipStyle({
+                top: top_1,
+                left: left,
+                width: width,
+            });
+            setVisible(true);
+        }
+    };
+    var handleMouseLeave = function () {
+        setVisible(false);
+    };
+    (0, react_1.useLayoutEffect)(function () {
+        var updateTooltipPosition = function () {
+            if (dropRef.current && visible && tooltipStyle) {
+                var tooltipHeight_1 = dropRef.current.offsetHeight;
+                var tooltipWidth_1 = dropRef.current.offsetWidth;
+                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.top
+                        : prevStyle.top - tooltipHeight_1 })); });
+            }
+        };
+        if (visible) {
+            updateTooltipPosition();
+        }
+        window.addEventListener("resize", updateTooltipPosition);
+        return function () {
+            window.removeEventListener("resize", updateTooltipPosition);
+        };
+    }, [visible, dropdownPosition]);
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (dropRef.current && !dropRef.current.contains(event.target)) {
+                setVisible(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () {
+            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))));
+};
+exports.default = ExpandableToolTip;
+//# sourceMappingURL=expandableTootltip.js.map

package/dist/utilities/expandableTootltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandableTootltip.js","sourceRoot":"","sources":["../../src/utilities/expandableTootltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4E;AAC5E,wDAAiC;AAEjC,IAAM,iBAAiB,GAAkB,UAAC,EAA4B;QAA1B,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA;IAC5D,IAAA,KAA0C,IAAA,gBAAQ,EAAC,iBAAiB,CAAC,EAApE,gBAAgB,QAAA,EAAE,mBAAmB,QAA+B,CAAC;IAC5E,IAAM,OAAO,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAC7B,IAAM,aAAa,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IACxC,IAAA,KAAkC,IAAA,gBAAQ,EAAC;QAC/C,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;KACT,CAAC,EAJK,YAAY,QAAA,EAAE,eAAe,QAIlC,CAAC;IACH,IAAM,sBAAsB,GAAG;;QAC7B,IAAI,aAAa,CAAC,OAAO,EAAE;YACzB,IAAM,YAAY,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;YACpE,IAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;YAE1C,IAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC;YACpC,IAAM,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC,MAAM,CAAC;YACxD,IAAI,UAAU,GAAG,UAAU,EAAE;gBAC3B,IAAI,UAAU,GAAG,EAAE,IAAI,UAAU,GAAG,GAAG,EAAE;oBACvC,OAAO,cAAc,CAAC;iBACvB;qBAAM;oBACL,OAAO,iBAAiB,CAAC;iBAC1B;aACF;iBAAM;gBACL,IAAM,IAAI,GAAW,UAAU,GAAG,UAAU,CAAC;gBAC7C,IAAI,UAAU,GAAG,EAAE,IAAI,UAAU,GAAG,EAAE,IAAI,IAAI,GAAG,EAAE,EAAE;oBACnD,OAAO,cAAc,CAAC;iBACvB;qBAAM;oBACL,OAAO,iBAAiB,CAAC;iBAC1B;aACF;SACF;IACH,CAAC,CAAC;IAEF,IAAM,gBAAgB,GAAG,UAAC,CAAmB;;QAC3C,IAAI,aAAa,CAAC,OAAO,EAAE;YACzB,IAAM,YAAY,GAAG,sBAAsB,EAAE,CAAC;YAC9C,mBAAmB,CAAC,YAAY,CAAC,CAAC;YAClC,IAAM,IAAI,GAAI,CAAC,CAAC,MAAsB,CAAC,qBAAqB,EAAE,CAAC;YAC/D,IAAI,KAAG,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC;YACvC,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC;YACtC,IAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;YAC3B,IAAM,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,0CAAE,WAAW,CAAC;YAC5C,IAAI,YAAY,KAAK,iBAAiB,EAAE;gBACtC,KAAG,GAAG,KAAG,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;aAC5B;iBAAM;gBACL,KAAG,GAAG,KAAG,GAAG,MAAM,GAAG,CAAC,GAAG,EAAE,CAAC;aAC7B;YAED,eAAe,CAAC;gBACd,GAAG,EAAE,KAAG;gBACR,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,KAAK;aACb,CAAC,CAAC;YACH,UAAU,CAAC,IAAI,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IAEF,IAAM,gBAAgB,GAAG;QACvB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,IAAA,uBAAe,EAAC;QACd,IAAM,qBAAqB,GAAG;YAC5B,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,IAAI,YAAY,EAAE;gBAC9C,IAAM,eAAa,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC;gBACnD,IAAM,cAAY,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC;gBACjD,IAAM,UAAQ,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;gBACnD,eAAe,CAAC,UAAC,SAAS,IAAK,OAAA,uBAC1B,SAAS,KACZ,IAAI,EACF,SAAS,CAAC,IAAI,GAAG,UAAQ,GAAG,CAAC,GAAG,cAAY,GAAG,CAAC,GAAG,CAAC;wBAClD,CAAC,CAAC,EAAE;wBACJ,CAAC,CAAC,SAAS,CAAC,IAAI,GAAG,UAAQ,GAAG,CAAC,GAAG,cAAY,GAAG,CAAC,EACtD,KAAK,EAAE,cAAY,EACnB,GAAG,EACD,gBAAgB,KAAK,iBAAiB;wBACpC,CAAC,CAAC,SAAS,CAAC,GAAG;wBACf,CAAC,CAAC,SAAS,CAAC,GAAG,GAAG,eAAa,IACnC,EAX6B,CAW7B,CAAC,CAAC;aACL;QACH,CAAC,CAAC;QAEF,IAAI,OAAO,EAAE;YACX,qBAAqB,EAAE,CAAC;SACzB;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC;QAEzD,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEhC,IAAA,iBAAS,EAAC;QACR,IAAM,kBAAkB,GAAG,UAAC,KAAiB;YAC3C,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBACtE,UAAU,CAAC,KAAK,CAAC,CAAC;aACnB;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL;QACE,uCACE,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAE,aAAa,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAEzB,QAAQ;YAER,OAAO;gBACN,OAAO;gBACP,YAAY;gBACZ,mBAAQ,CAAC,YAAY,CACnB,wCACE,GAAG,EAAE,UAAC,IAAI,IAAK,OAAA,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,EAAxB,CAAwB,EACvC,SAAS,EAAE,uBACT,gBAAgB,IAAI,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CACrD,EACF,KAAK,EAAE;wBACL,GAAG,EAAE,YAAY,CAAC,GAAG;wBACrB,IAAI,EAAE,YAAY,CAAC,IAAI;wBACvB,OAAO,EAAE,CAAC;wBACV,KAAK,EAAE,YAAY,CAAC,KAAK;wBACzB,QAAQ,EAAE,MAAM;wBAChB,QAAQ,EAAE,OAAO;wBACjB,UAAU,EAAE,SAAS;qBACtB,IAEA,KAAK,CACD,EACP,QAAQ,CAAC,IAAI,CACd,CACC,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}

package/docs/App.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import AutoComplete from '../src/AutoComplete';
+import {AutoComplete, ExpandableAutoComplete} from '../src/index';
 
 import '../src/styles/global.css';
 
@@ -207,6 +207,36 @@ export default function App() {
               onChange={(e) => console.log(e, 'onchange')}
             />
           </div>
+
+          <div className="autocomplete-section">
+            <h2>Expandable Auto Suggestion</h2>
+            <p>
+              As you type, suggestions will appear based on your input, aiding
+              in quicker and potentially more accurate data entry. This mode
+              supports both listed and non-listed input, providing flexibility
+              in user input while still offering assistance.
+            </p>
+          </div>
+          <div style={{ width: 300 }}>
+            <ExpandableAutoComplete
+              label="Auto Suggestion"
+              name="sample"
+              type="auto_suggestion"
+              // async
+              desc="name"
+              isMultiple
+              expandable={true}
+              descId="id"
+              paginationEnabled={false}
+              initialLoad={true}
+              itemCount={5}
+              // nextBlock={nexBlock}
+              placeholder="Auto Suggestion"
+              selectedItems={[{ name: 'test', id: '1' }]}
+              getData={getData}
+              onChange={(e) => console.log(e, 'onchange')}
+            />
+          </div>
         </div>
       </div>
     </React.Fragment>

package/package.json

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