ar-design 0.3.23 → 0.3.25

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

@@ -14,7 +14,7 @@
   overflow: hidden;
 }
 
-.ar-modal-wrapper > .ar-modal > .header > .close {
+.ar-modal-wrapper > .ar-modal > .header .close {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,8 +27,8 @@
   user-select: none;
   transition: background 250ms, border 250ms ease-in-out;
 }
-.ar-modal-wrapper > .ar-modal > .header > .close::before,
-.ar-modal-wrapper > .ar-modal > .header > .close::after {
+.ar-modal-wrapper > .ar-modal > .header .close::before,
+.ar-modal-wrapper > .ar-modal > .header .close::after {
   position: absolute;
   content: "";
   width: 2px;
@@ -38,19 +38,19 @@
   transform: rotate(-45deg);
   transition: transform 250ms ease-in-out;
 }
-.ar-modal-wrapper > .ar-modal > .header > .close::after {
+.ar-modal-wrapper > .ar-modal > .header .close::after {
   transform: rotate(45deg);
 }
-.ar-modal-wrapper > .ar-modal > .header > .close:hover {
+.ar-modal-wrapper > .ar-modal > .header .close:hover {
   background-color: rgba(var(--danger-rgb), 0.1);
   border: solid 1px var(--danger);
   color: rgba(var(--danger-rgb), 0.75);
 }
-.ar-modal-wrapper > .ar-modal > .header > .close:hover::before,
-.ar-modal-wrapper > .ar-modal > .header > .close:hover::after {
+.ar-modal-wrapper > .ar-modal > .header .close:hover::before,
+.ar-modal-wrapper > .ar-modal > .header .close:hover::after {
   background-color: var(--danger);
   transform: rotate(45deg);
 }
-.ar-modal-wrapper > .ar-modal > .header > .close:hover::after {
+.ar-modal-wrapper > .ar-modal > .header .close:hover::after {
   transform: rotate(-45deg);
 }

package/dist/components/feedback/modal/IProps.d.ts

@@ -1,4 +1,5 @@
 import { IChildren, ISize } from "../../../libs/types/IGlobalProps";
+import IPopoverProps from "../../feedback/popover/IProps";
 interface IProps extends IChildren, ISize, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Modal'ın açık olup olmadığını kontrol eden ve değiştiren değerler.
@@ -18,6 +19,7 @@ interface IProps extends IChildren, ISize, React.HTMLAttributes<HTMLDivElement>
         get: boolean;
         set: React.Dispatch<React.SetStateAction<boolean>>;
     };
+    closePopover?: IPopoverProps;
     /**
      * Modal başlığı.
      *

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

@@ -2,8 +2,9 @@
 import React, { useEffect, useRef } from "react";
 import "../../../assets/css/components/feedback/modal/styles.css";
 import Typography from "../../data-display/typography";
+import Popover from "../popover";
 const { Title } = Typography;
-const Modal = ({ children, open, title, size = "normal", footer, ...attributes }) => {
+const Modal = ({ children, open, closePopover, title, size = "normal", footer, ...attributes }) => {
     // refs
     const _arModal = useRef(null);
     const _modalWrapperClassName = ["ar-modal-wrapper"];
@@ -78,7 +79,8 @@ const Modal = ({ children, open, title, size = "normal", footer, ...attributes }
         React.createElement("div", { ref: _arModal, ...attributes, className: _modalClassName.map((c) => c).join(" "), role: "dialog" },
             title && (React.createElement("div", { className: "header" },
                 React.createElement(Title, { Level: "h3" }, title),
-                React.createElement("div", { className: "close", onClick: () => open.set((prev) => !prev) }))),
+                closePopover ? (React.createElement(Popover, { ...closePopover },
+                    React.createElement("div", { className: "close" }))) : (React.createElement("div", { className: "close", onClick: () => open.set((prev) => !prev) })))),
             React.createElement("div", { className: "content" }, children),
             footer && React.createElement("div", { className: "footer" }, footer))));
 };

package/dist/components/form/button-action/IProps.d.ts

@@ -1,9 +1,10 @@
 import { Color } from "../../../libs/types";
+import { IIcon } from "../../../libs/types/IGlobalProps";
 interface IProps {
-    buttons: {
+    buttons: ({
         text: string;
         onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
         color?: Color;
-    }[];
+    } & IIcon)[];
 }
 export default IProps;

package/dist/components/form/button-action/index.js

@@ -44,13 +44,13 @@ const ButtonAction = ({ buttons }) => {
     const handleResizeEvent = () => setOpen(false);
     // useEffects
     useEffect(() => {
-        if (open) {
-            setTimeout(() => handlePosition(), 0);
-            window.addEventListener("blur", () => setOpen(false));
-            window.addEventListener("resize", handleResizeEvent);
-            document.addEventListener("click", handleClickOutSide);
-            document.addEventListener("keydown", handleKeys);
-        }
+        if (!open)
+            return;
+        setTimeout(() => handlePosition(), 0);
+        window.addEventListener("blur", () => setOpen(false));
+        window.addEventListener("resize", handleResizeEvent);
+        document.addEventListener("click", handleClickOutSide);
+        document.addEventListener("keydown", handleKeys);
         return () => {
             window.removeEventListener("blur", () => setOpen(false));
             window.removeEventListener("resize", handleResizeEvent);
@@ -60,9 +60,9 @@ const ButtonAction = ({ buttons }) => {
     }, [open]);
     return (React.createElement("div", { ref: _wrapper, className: "ar-button-action" },
         React.createElement("span", { ref: _button },
-            React.createElement(Button, { variant: "surface", color: "gray", icon: { element: React.createElement("span", { className: "dotted" }) }, onClick: () => setOpen((prev) => !prev) })),
+            React.createElement(Button, { variant: "borderless", color: "light", icon: { element: React.createElement("span", { className: "dotted" }) }, onClick: () => setOpen((prev) => !prev) })),
         open &&
-            ReactDOM.createPortal(React.createElement("span", { ref: _list, className: "ar-action-buttons" }, buttons.map((button) => (React.createElement(Button, { variant: "borderless", color: button.color ?? "blue", onClick: button.onClick }, button.text)))), document.body)));
+            ReactDOM.createPortal(React.createElement("span", { ref: _list, className: "ar-action-buttons" }, buttons.map((button) => (React.createElement(Button, { style: { display: "flex", justifyContent: "flex-start" }, variant: "borderless", color: button.color ?? "blue", size: "small", icon: button.icon, onClick: button.onClick }, button.text)))), document.body)));
 };
 ButtonAction.displayName = "ButtonAction";
 export default ButtonAction;

package/package.json

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