oolib 2.220.1 → 2.220.2

package/dist/stories/Oolib/components/Playground.stories.d.ts

@@ -2,5 +2,5 @@ declare namespace _default {
     let title: string;
 }
 export default _default;
-export function Playground(args: any): React.JSX.Element;
+export function Playground(): React.JSX.Element;
 import React from "react";

package/dist/stories/Oolib/components/Playground.stories.js

@@ -1,11 +1,42 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Playground = void 0;
-var react_1 = __importDefault(require("react"));
-var Playground_1 = require("../../../components/Playground");
+var react_1 = __importStar(require("react"));
+var useHandleClickOutside_1 = require("../../../utils/customHooks/useHandleClickOutside");
+var Buttons_1 = require("../../../v2/components/Buttons");
 exports.default = {
     title: "Components/Playground",
     // argTypes:{
@@ -13,8 +44,38 @@ exports.default = {
     // args: {
     // }
 };
-var Playground = function (args) {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("button", { className: "bg-red-100 h-10 w-10" }, "Tag button")));
+var ClickOutsideDemo = function () {
+    var boxRef = (0, react_1.useRef)(null);
+    var _a = (0, react_1.useState)(false), enabled = _a[0], setEnabled = _a[1];
+    var handleClickOutside = function () {
+        setEnabled(false);
+        window.alert("clicked outside");
+    };
+    (0, useHandleClickOutside_1.useHandleClickOutside)(boxRef, null, {
+        callback: function () {
+            if (enabled) {
+                handleClickOutside === null || handleClickOutside === void 0 ? void 0 : handleClickOutside();
+            }
+        }
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { ref: boxRef, style: {
+                width: 240,
+                height: 140,
+                borderRadius: 8,
+                border: "2px solid ".concat(enabled ? "#2684FF" : "#D5D8DC"),
+                backgroundColor: enabled ? "#E6F0FF" : "#F8F9FB",
+                color: enabled ? "#0F1F3D" : "#5C6672",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontWeight: 600,
+                transition: "all 0.2s ease",
+                cursor: "pointer",
+                userSelect: "none",
+            } }, enabled ? "Click outside to reset" : "Click me"),
+        react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setEnabled(!enabled); } }, enabled ? "Disable" : "Enable")));
 };
+var Playground = function () { return (react_1.default.createElement("div", { style: { padding: 24 } },
+    react_1.default.createElement(ClickOutsideDemo, null))); };
 exports.Playground = Playground;

package/dist/utils/customHooks/useHandleClickOutside.js

@@ -27,7 +27,7 @@ var useHandleClickOutside = function (ref, setShowOptions, options) {
         // Use capture: true to listen during capture phase (before stopPropagation) usecase: ActionMenu
         document.addEventListener('mousedown', handleClickOutside, { capture: capture }); //its very important for this to be mousedown. 'click' acts unpredictable
         return function () { return document.removeEventListener('mousedown', handleClickOutside, { capture: capture }); };
-    }, [enabled]);
+    }, [enabled, callback]);
 };
 exports.useHandleClickOutside = useHandleClickOutside;
 //

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.220.1",
+  "version": "2.220.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",