ar-design 0.2.66 → 0.2.68

package/dist/assets/css/components/feedback/modal/styles.css

@@ -1,6 +1,7 @@
 .ar-modal-wrapper {
   position: fixed;
   inset: 0;
+  z-index: 1050;
 }
 .ar-modal-wrapper > .ar-modal-bg {
   position: fixed;

package/dist/assets/css/components/feedback/popup/popup.css

@@ -1,3 +1,14 @@
+.ar-notification-popup-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+}
+.ar-notification-popup-wrapper > .ar-notification-popup-bg {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(var(--black-rgb), 0.5);
+}
+
 .ar-notification-popup {
   visibility: hidden;
   opacity: 0;
@@ -39,15 +50,15 @@
   border-radius: var(--border-radius-pill);
   box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.25);
 }
-.ar-notification-popup > .icon.success::before {
-  content: "";
-  width: 3rem;
-  height: 1.75rem;
-  transform: rotate(-45deg);
-  border: solid 10.5px transparent;
-  border-radius: var(--border-radius-sm);
-  border-left-color: var(--white);
-  border-bottom-color: var(--white);
+
+.ar-notification-popup > .icon.warning {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--warning);
+  border-radius: var(--border-radius-pill);
+  box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.25);
 }
 
 .ar-notification-popup > .icon.error {
@@ -59,24 +70,6 @@
   border-radius: var(--border-radius-pill);
   box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.25);
 }
-.ar-notification-popup > .icon.error::before {
-  position: absolute;
-  content: "";
-  background-color: var(--white);
-  width: 10.5px;
-  height: 3.5rem;
-  transform: rotate(-45deg);
-  border-radius: var(--border-radius-sm);
-}
-.ar-notification-popup > .icon.error::after {
-  position: absolute;
-  content: "";
-  background-color: var(--white);
-  width: 10.5px;
-  height: 3.5rem;
-  transform: rotate(45deg);
-  border-radius: var(--border-radius-sm);
-}
 
 .ar-notification-popup > .content {
   display: flex;
@@ -88,17 +81,11 @@
   color: var(--gray-700);
 }
 .ar-notification-popup > .content > .title {
+  color: var(--gray-700);
   font-size: 1.75rem;
   text-align: center;
 }
 
-.ar-notification-popup > .content > .title.success {
-  color: var(--success);
-}
-.ar-notification-popup > .content > .title.error {
-  color: var(--danger);
-}
-
 .ar-notification-popup > .content > .message {
   color: var(--gray-600);
   text-align: center;

package/dist/components/feedback/popup/index.js

@@ -1,33 +1,84 @@
 "use client";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/feedback/popup/popup.css";
 import Button from "../../form/button";
 import ReactDOM from "react-dom";
 import { NotificationContext } from "../../../libs/core/application/contexts/Notification";
+import { ARIcon } from "../../icons";
 const Popup = ({ title, message, status, isOpen, buttons }) => {
+    // contexts
     const { setIsPopupOpen } = useContext(NotificationContext);
+    // refs
+    const _arNotificationPopupWrapper = useRef(null);
+    const _arNotificationPopup = useRef(null);
     // states
+    const _notificaitonPopupWrapperClassName = ["ar-notification-popup-wrapper"];
     const [className, setClassName] = useState(["ar-notification-popup", ""]);
+    // methods
+    const buttonStatus = () => {
+        switch (status) {
+            case "success":
+                return "success";
+            case "warning":
+                return "warning";
+            case "information":
+                return "information";
+            case "error":
+                return "danger";
+            default:
+                return "light";
+        }
+    };
+    const buttonIcons = () => {
+        switch (status) {
+            case "success":
+                return React.createElement(ARIcon, { icon: "Success", fill: "transparent", stroke: "var(--white)", size: 48 });
+            case "warning":
+                return React.createElement(ARIcon, { icon: "Warning", fill: "transparent", stroke: "var(--white)", size: 48 });
+            case "information":
+                return "information";
+            case "error":
+                return React.createElement(ARIcon, { icon: "CloseCircle", fill: "transparent", stroke: "var(--white)", size: 48 });
+            default:
+                return "light";
+        }
+    };
     // useEffects
     useEffect(() => {
         setClassName((prev) => {
             const updated = [...prev.slice(0, -1), isOpen ? "open" : ""];
             return updated;
         });
+        if (isOpen)
+            document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.removeProperty("overflow");
+        };
     }, [isOpen]);
     return (isOpen &&
-        ReactDOM.createPortal(React.createElement("div", { className: className.map((c) => c).join(" ") },
-            React.createElement("div", { className: `icon ${status}` }),
-            React.createElement("div", { className: "content" },
-                React.createElement("span", { className: `title ${status}` },
-                    title,
-                    "!"),
-                React.createElement("span", { className: "message" }, message)),
-            React.createElement(Button, { variant: "filled", status: status == "success" ? "success" : "danger", onClick: () => {
-                    (() => buttons?.okay?.onClick && buttons.okay?.onClick())();
-                    (() => {
-                        setIsPopupOpen && setIsPopupOpen((prev) => !prev);
-                    })();
-                } }, buttons?.okay?.text ?? "Tamam")), document.body));
+        ReactDOM.createPortal(React.createElement("div", { ref: _arNotificationPopupWrapper, className: _notificaitonPopupWrapperClassName.map((c) => c).join(" ") },
+            React.createElement("div", { className: "ar-notification-popup-bg", onMouseDown: (event) => {
+                    event.stopPropagation();
+                    const target = event.target;
+                    if (_arNotificationPopup.current && !_arNotificationPopup.current.contains(target)) {
+                        setClassName((prev) => {
+                            const updated = [...prev.slice(0, -1), isOpen ? "open" : ""];
+                            return updated;
+                        });
+                    }
+                } }),
+            React.createElement("div", { ref: _arNotificationPopup, className: className.map((c) => c).join(" ") },
+                React.createElement("div", { className: `icon ${status}` }, buttonIcons()),
+                React.createElement("div", { className: "content" },
+                    React.createElement("span", { className: `title ${status}` },
+                        title,
+                        "!"),
+                    React.createElement("span", { className: "message" }, message)),
+                React.createElement(Button, { variant: "filled", status: buttonStatus(), onClick: () => {
+                        (() => buttons?.okay?.onClick && buttons.okay?.onClick())();
+                        (() => {
+                            setIsPopupOpen && setIsPopupOpen((prev) => !prev);
+                        })();
+                    } }, buttons?.okay?.text ?? "Tamam"))), document.body));
 };
 export default Popup;

package/dist/components/form/text-editor/index.js

@@ -29,8 +29,8 @@ validation, }) => {
     // variables
     const toolbarButtons = [
         { command: "bold", icon: "Bold", tooltip: `Bold (${Utils.GetOSShortCutIcons()} + B)` },
-        { command: "italic", icon: "Italic", tooltip: `Bold (${Utils.GetOSShortCutIcons()} + I)` },
-        { command: "underline", icon: "Underline", tooltip: `Bold (${Utils.GetOSShortCutIcons()} + U)` },
+        { command: "italic", icon: "Italic", tooltip: `Italic (${Utils.GetOSShortCutIcons()} + I)` },
+        { command: "underline", icon: "Underline", tooltip: `Underline (${Utils.GetOSShortCutIcons()} + U)` },
         { command: "insertUnorderedList", icon: "BulletList", tooltip: "Bulleted List" },
         { command: "insertOrderedList", icon: "NumberList", tooltip: "Numbered List" },
         { command: "justifyLeft", icon: "TextAlingLeft", tooltip: "Align Left" },
@@ -212,7 +212,7 @@ validation, }) => {
     }, []);
     return (React.createElement("div", { ref: _container, className: "ar-text-editor" },
         React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" "), height: height }),
-        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Button, { key: command, type: "button", variant: "borderless", status: "secondary", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon, size: 18, fill: "var(--gray-700)" }) }, tooltip: {
+        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Button, { key: command, type: "button", variant: "borderless", status: "secondary", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon, size: 18, fill: "transparent" }) }, tooltip: {
                 text: tooltip,
             }, onClick: () => execCommand(command) })))),
         React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),

package/dist/components/icons/Compiler.js

@@ -53,6 +53,11 @@ class Icon {
                             React.createElement("line", { x1: "4", y1: "12", x2: "20", y2: "12", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
                             React.createElement("path", { d: "M6 4h12", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
                             React.createElement("path", { d: "M6 20h12", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+                    case "Success":
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement("path", { d: "M22 11.1V6.9C22 3.4 20.6 2 17.1 2h-4.2C9.4 2 8 3.4 8 6.9V8h3.1c3.5 0 4.9 1.4 4.9 4.9V16h1.1c3.5 0 4.9-1.4 4.9-4.9z", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+                            React.createElement("path", { d: "M16 17.1v-4.2C16 9.4 14.6 8 11.1 8H6.9C3.4 8 2 9.4 2 12.9v4.2C2 20.6 3.4 22 6.9 22h4.2c3.5 0 4.9-1.4 4.9-4.9z", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+                            React.createElement("path", { d: "M6.08 15l1.95 1.95 3.89-3.9", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
                     case "BulletList":
                         return (React.createElement(React.Fragment, null,
                             React.createElement("circle", { cx: 3, cy: this._startIndex, r: 2, fill: "currentColor" }),
@@ -91,6 +96,10 @@ class Icon {
                         return (React.createElement(React.Fragment, null,
                             React.createElement("path", { d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
                             React.createElement("path", { d: "m7.75 12 2.83 2.83 5.67-5.66", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+                    case "Warning":
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement("path", { d: "M12 7.75V13M2.92 8.58c0-1.12.6-2.16 1.57-2.73l5.94-3.43c.97-.56 2.17-.56 3.15 0l5.94 3.43c.97.56 1.57 1.6 1.57 2.73v6.84c0 1.12-.6 2.16-1.57 2.73l-5.94 3.43c-.97.56-2.17.56-3.15 0l-5.94-3.43a3.15 3.15 0 0 1-1.57-2.73v-2.76", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
+                            React.createElement("path", { d: "M12 16.2v.1", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
                     default:
                         return null;
                 }

package/dist/libs/core/application/hooks/index.d.ts

@@ -50,12 +50,11 @@ export declare const useNotification: () => {
         message?: string;
         status: Status | number;
     }) => void;
-    popup: ({ title, message, status, buttons, }: {
+    popup: ({ title, message, status, }: {
         title: string;
         message?: string;
         status: Status | number;
-        buttons?: PopupButtonProps | null;
-    }) => void;
+    }, buttons?: PopupButtonProps | null) => void;
 };
 export declare const useValidation: <TData extends object>(data: TData, params: ValidationProperties<TData>[], step?: number) => {
     onSubmit: (callback: (result: boolean) => void) => void;

package/dist/libs/core/application/hooks/index.js

@@ -33,7 +33,7 @@ export const useNotification = () => {
         setStatus && setStatus(status);
         setTrigger && setTrigger((trigger) => !trigger);
     };
-    const popup = ({ title, message, status, buttons, }) => {
+    const popup = ({ title, message, status, }, buttons) => {
         setTitle && setTitle(title);
         setMessage && setMessage(message ?? "");
         setStatus && setStatus(status);

package/dist/libs/types/index.d.ts

@@ -69,7 +69,7 @@ export type Errors<TData> = Partial<{
 }>;
 export type AllowedTypes = "image/jpeg" | "image/png" | "image/gif" | "image/webp" | "image/svg+xml" | "image/bmp" | "image/tiff" | "application/pdf" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/vnd.openxmlformats-officedocument.presentationml.presentation" | "application/zip" | "application/x-rar-compressed" | "application/x-7z-compressed" | "application/gzip" | "application/json" | "application/xml" | "text/plain" | "text/csv" | "text/html" | "video/mp4" | "video/quicktime" | "video/x-msvideo" | "video/x-matroska" | "video/webm" | "video/x-flv" | "audio/mpeg" | "audio/wav" | "audio/ogg" | "audio/aac" | "audio/flac" | "application/octet-stream";
 export type IconVariants = "linear" | "bulk";
-export type Icons = "Add" | "ArrowLeft" | "ArrowRight" | "CloseCircle" | "CloseSquare" | "Drive" | "Document" | "Folder" | "Trash" | "Upload" | "Image" | "Import" | "Bold" | "Italic" | "Underline" | "Strikethrough" | "BulletList" | "NumberList" | "TextAlingLeft" | "TextAlingCenter" | "TextAlingRight" | "Filter" | "TickCircle" | "File";
+export type Icons = "Add" | "ArrowLeft" | "ArrowRight" | "CloseCircle" | "CloseSquare" | "Drive" | "Document" | "Folder" | "Trash" | "Upload" | "Image" | "Import" | "Bold" | "Italic" | "Underline" | "Success" | "Strikethrough" | "BulletList" | "NumberList" | "TextAlingLeft" | "TextAlingCenter" | "TextAlingRight" | "Filter" | "TickCircle" | "File" | "Warning";
 export type PieChartDataType = {
     value: number;
     text: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.66",
+  "version": "0.2.68",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",