oolib 2.220.1 → 2.221.0

package/dist/icons/custom/index.d.ts

@@ -79,3 +79,15 @@ export declare const FolderSolid: ({ fill, ...props }: {
     [x: string]: any;
     fill?: string;
 }) => React.JSX.Element;
+export declare const Comma: ({ size, props }: {
+    size?: number;
+    props: any;
+}) => React.JSX.Element;
+export declare const Semicolon: ({ size, props }: {
+    size?: number;
+    props: any;
+}) => React.JSX.Element;
+export declare const Slash: ({ size, props }: {
+    size?: number;
+    props: any;
+}) => React.JSX.Element;

package/dist/icons/custom/index.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UKFlag = exports.MalaysiaFlag = exports.ColombiaFlag = exports.BrazilFlag = exports.AudioEmbedIcon = exports.VideoEmbedIcon = exports.Attachment2 = exports.PDFIcon = exports.RichFormatToolOrderedList = exports.RichFormatToolUnorderedList = exports.RichFormatToolH2 = exports.RichFormatToolBlockquote = exports.LinkIcon = exports.UnderlineBtn = exports.ItalicBtn = exports.BoldBtn = exports.SettingsSM = exports.Close_S = exports.UploadImage = exports.KebabMenu = exports.Website_solid_SM = exports.Phone_solid_SM = exports.Mail_solid_SM = exports.Youtube_solid_SM = exports.Instagram_solid_SM = exports.Twitter_solid_SM = exports.Linkedin_solid_SM = exports.Facebook_solid_SM = exports.EditSM = exports.AddXS = exports.UploadSM = exports.Download = exports.Download__nofill = exports.Index = exports.Person14 = exports.Location14 = exports.ModalBulbIcon = exports.SenegalFlag = exports.KenyaFlag = exports.NigeriaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.MultipleImages = exports.IndexIcon = void 0;
-exports.FolderSolid = exports.TagsSolid = exports.WarningDiamond = exports.Reactions = exports.Like = exports.Learning = exports.Inspiring = exports.Celebrate = exports.ArgentinaFlag = exports.Stars = exports.SpainFlag = exports.PakistanFlag = exports.ChileFlag = exports.IndonesiaFlag = exports.USAFlag = void 0;
+exports.Slash = exports.Semicolon = exports.Comma = exports.FolderSolid = exports.TagsSolid = exports.WarningDiamond = exports.Reactions = exports.Like = exports.Learning = exports.Inspiring = exports.Celebrate = exports.ArgentinaFlag = exports.Stars = exports.SpainFlag = exports.PakistanFlag = exports.ChileFlag = exports.IndonesiaFlag = exports.USAFlag = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../themes");
 var DisplayIcon_1 = require("../../utils/comps/DisplayIcon");
@@ -529,3 +529,21 @@ var FolderSolid = function (_a) {
         react_1.default.createElement("path", { fill: "#000000CC", fillOpacity: "0.8", d: "M16.875 5.625h-6.666L8.04 4a1.26 1.26 0 0 0-.75-.25H3.125A1.25 1.25 0 0 0 1.875 5v10.625a1.25 1.25 0 0 0 1.25 1.25h13.82a1.18 1.18 0 0 0 1.18-1.18v-8.82a1.25 1.25 0 0 0-1.25-1.25m0 10H3.125V5h4.166l2.334 1.75c.108.081.24.125.375.125h6.875z" })));
 };
 exports.FolderSolid = FolderSolid;
+var Comma = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 16 : _b, props = _a.props;
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("path", { d: "M7.62988 2C10.1874 2 12.2607 4.07334 12.2607 6.63086C12.2607 7.6731 11.9161 8.63435 11.335 9.4082L11.3359 9.40918L7.61816 15L5.85742 14.707L7.45508 11.2568C4.97882 11.1647 3.00003 9.12964 3 6.63086C3 4.0735 5.07258 2.00025 7.62988 2Z", fill: "black", fillOpacity: 0.8 })));
+};
+exports.Comma = Comma;
+var Semicolon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 16 : _b, props = _a.props;
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("path", { d: "M7.50977 7C8.89595 7 10.0203 8.12363 10.0205 9.50977C10.0205 10.1514 9.77696 10.7349 9.38086 11.1787L6.70703 14.8418L5.57031 14.5664L6.93555 11.9512C5.82648 11.6911 5 10.6981 5 9.50977C5.0002 8.12375 6.12375 7.0002 7.50977 7ZM7.5 1C8.88071 1 10 2.11929 10 3.5C10 4.88071 8.88071 6 7.5 6C6.11929 6 5 4.88071 5 3.5C5 2.11929 6.11929 1 7.5 1Z", fill: "black", fillOpacity: 0.8 })));
+};
+exports.Semicolon = Semicolon;
+var Slash = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 16 : _b, props = _a.props;
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("path", { d: "M9.33333 2H12L6.66667 14H4L9.33333 2Z", fill: "black", fillOpacity: 0.8 })));
+};
+exports.Slash = Slash;

package/dist/icons/index.d.ts

@@ -1,6 +1,7 @@
 export namespace icons {
     export { PencilSimple };
     export { PencilLine };
+    export { PencilSimpleLine };
     export { Plus };
     export { Lightbulb };
     export { Tag };
@@ -214,9 +215,13 @@ export namespace icons {
     export { WarningDiamond };
     export { TagsSolid };
     export { FolderSolid };
+    export { Comma };
+    export { Semicolon };
+    export { Slash };
 }
 import { PencilSimpleIcon as PencilSimple } from '@phosphor-icons/react';
 import { PencilLineIcon as PencilLine } from '@phosphor-icons/react';
+import { PencilSimpleLineIcon as PencilSimpleLine } from '@phosphor-icons/react';
 import { PlusIcon as Plus } from '@phosphor-icons/react';
 import { LightbulbIcon as Lightbulb } from '@phosphor-icons/react';
 import { TagIcon as Tag } from '@phosphor-icons/react';
@@ -430,3 +435,6 @@ import { Reactions } from "./custom";
 import { WarningDiamond } from "./custom";
 import { TagsSolid } from "./custom";
 import { FolderSolid } from "./custom";
+import { Comma } from "./custom";
+import { Semicolon } from "./custom";
+import { Slash } from "./custom";

package/dist/icons/index.js

@@ -6,6 +6,7 @@ var custom_1 = require("./custom");
 exports.icons = {
     PencilSimple: react_1.PencilSimpleIcon,
     PencilLine: react_1.PencilLineIcon,
+    PencilSimpleLine: react_1.PencilSimpleLineIcon,
     Plus: react_1.PlusIcon,
     Lightbulb: react_1.LightbulbIcon,
     Tag: react_1.TagIcon,
@@ -219,5 +220,8 @@ exports.icons = {
     Reactions: custom_1.Reactions,
     WarningDiamond: custom_1.WarningDiamond,
     TagsSolid: custom_1.TagsSolid,
-    FolderSolid: custom_1.FolderSolid
+    FolderSolid: custom_1.FolderSolid,
+    Comma: custom_1.Comma,
+    Semicolon: custom_1.Semicolon,
+    Slash: custom_1.Slash,
 };

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.221.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",