ar-design 0.3.39 → 0.3.40

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

@@ -62,6 +62,16 @@
   box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.25);
 }
 
+.ar-notification-popup > .icon.information {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--information);
+  border-radius: var(--border-radius-pill);
+  box-shadow: 0 0 0 5px rgba(var(--information-rgb), 0.25);
+}
+
 .ar-notification-popup > .icon.error {
   position: relative;
   display: flex;

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

@@ -5,5 +5,6 @@ interface IProps {
     status: Status | number;
     isOpen: boolean;
     buttons?: PopupButtonProps | null;
+    onConfirm?: ((confirm: boolean) => void) | null;
 }
 export default IProps;

package/dist/components/feedback/popup/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/feedback/popup/popup.css";
-declare const Popup: ({ title, message, status, isOpen, buttons }: IProps) => false | React.ReactPortal;
+declare const Popup: ({ title, message, status, isOpen, buttons, onConfirm }: IProps) => false | React.ReactPortal;
 export default Popup;

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

@@ -6,7 +6,7 @@ import ReactDOM from "react-dom";
 import { NotificationContext } from "../../../libs/core/application/contexts/Notification";
 import { ARIcon } from "../../icons";
 import Box from "../../data-display/grid-system/box/Box";
-const Popup = ({ title, message, status, isOpen, buttons }) => {
+const Popup = ({ title, message, status, isOpen, buttons, onConfirm }) => {
     // contexts
     const { setIsPopupOpen } = useContext(NotificationContext);
     // refs
@@ -23,7 +23,7 @@ const Popup = ({ title, message, status, isOpen, buttons }) => {
             case "warning":
                 return "orange";
             case "information":
-                return "teal";
+                return "cyan";
             case "error":
                 return "red";
             default:
@@ -37,7 +37,7 @@ const Popup = ({ title, message, status, isOpen, buttons }) => {
             case "warning":
                 return React.createElement(ARIcon, { icon: "ExclamationDiamond-Fill", fill: "var(--white)", size: 48 });
             case "information":
-                return "information";
+                return React.createElement(ARIcon, { icon: "Information-Circle-Fill", fill: "var(--white)", size: 48 });
             case "error":
                 return React.createElement(ARIcon, { icon: "XCircle-Fill", fill: "var(--white)", size: 48 });
             default:
@@ -76,17 +76,15 @@ const Popup = ({ title, message, status, isOpen, buttons }) => {
                         "!"),
                     React.createElement("span", { className: "message" }, message)),
                 React.createElement(Box, null,
-                    React.createElement(Button, { variant: "filled", color: buttonColor(), onClick: () => {
-                            (() => buttons?.okay?.onClick && buttons.okay?.onClick())();
-                            (() => {
-                                setIsPopupOpen && setIsPopupOpen((prev) => !prev);
-                            })();
-                        } }, buttons?.okay?.text ?? "Tamam"),
-                    buttons?.cancel && (React.createElement(Button, { variant: "filled", color: "light", onClick: () => {
-                            (() => buttons?.cancel?.onClick && buttons.cancel?.onClick())();
-                            (() => {
-                                setIsPopupOpen && setIsPopupOpen((prev) => !prev);
-                            })();
-                        } }, buttons?.cancel?.text ?? "İptal"))))), document.body));
+                    React.createElement(Button, { type: "button", color: buttonColor(), onClick: () => {
+                            buttons?.okay?.onClick?.();
+                            onConfirm?.(true);
+                            setIsPopupOpen?.((prev) => !prev);
+                        } }, buttons?.okay?.text ?? "Evet"),
+                    buttons?.cancel && (React.createElement(Button, { type: "button", onClick: () => {
+                            buttons?.cancel?.onClick?.();
+                            onConfirm?.(false);
+                            setIsPopupOpen?.((prev) => !prev);
+                        } }, buttons?.cancel?.text ?? "Hayır"))))), document.body));
 };
 export default Popup;

package/dist/components/icons/Compiler.js

@@ -92,6 +92,8 @@ class Icon {
                     React.createElement("path", { d: "M12 3V16M12 16L16 11.625M12 16L8 11.625", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
             case "Inbox-Fill":
                 return (React.createElement("path", { d: "M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4zm-1.17-.437A1.5 1.5 0 0 1 4.98 3h6.04a1.5 1.5 0 0 1 1.17.563l3.7 4.625a.5.5 0 0 1 .106.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374z" }));
+            case "Information-Circle-Fill":
+                return (React.createElement("path", { d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2" }));
             case "Italic":
                 return (React.createElement("path", { d: "M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z" }));
             case "NumberList":

package/dist/components/navigation/steps/IProps.d.ts

@@ -1,6 +1,7 @@
 import { StepProps, ValidationProperties } from "../../../libs/types";
 import { IChildren } from "../../../libs/types/IGlobalProps";
 interface IProps<TData extends object> extends IChildren {
+    name: string;
     steps: StepProps[];
     onChange: (currentStep: number) => void;
     validation?: {

package/dist/components/navigation/steps/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/navigation/steps/styles.css";
-declare const Steps: <T extends object>({ children, steps, onChange, validation }: IProps<T>) => React.JSX.Element;
+declare const Steps: <T extends object>({ children, name, steps, onChange, validation }: IProps<T>) => React.JSX.Element;
 export default Steps;

package/dist/components/navigation/steps/index.js

@@ -5,18 +5,11 @@ import Typography from "../../data-display/typography";
 import Button from "../../form/button";
 import { useValidation } from "../../../libs/core/application/hooks";
 const { Title } = Typography;
-const Steps = function ({ children, steps = [], onChange, validation }) {
+const Steps = function ({ children, name, steps = [], onChange, validation }) {
     // states
     const [currentStep, setCurrentStep] = useState(0);
-    let _errors;
-    let _onSubmit;
-    let _setSubmit;
-    if (validation) {
-        const { errors, onSubmit, setSubmit } = useValidation(validation.data, validation.rules, currentStep + 1);
-        _errors = errors;
-        _onSubmit = onSubmit;
-        _setSubmit = setSubmit;
-    }
+    // hooks
+    const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules, currentStep + 1);
     // methods
     const getStepIconStatus = (currentStep, index) => {
         if (currentStep < index)
@@ -26,7 +19,12 @@ const Steps = function ({ children, steps = [], onChange, validation }) {
         return "completed";
     };
     // useEffects
-    useEffect(() => onChange(0), []);
+    useEffect(() => {
+        const key = `${window.location.pathname}::${name}`;
+        const stored = sessionStorage.getItem(key);
+        setCurrentStep(stored !== null ? Number(stored) : 0);
+        onChange?.(stored !== null ? Number(stored) : 0);
+    }, []);
     return (React.createElement("div", { className: "ar-steps" },
         React.createElement("div", { className: "steps" }, steps.length > 0 &&
             steps.map((step, index) => {
@@ -34,18 +32,20 @@ const Steps = function ({ children, steps = [], onChange, validation }) {
                 itemIcon.push(getStepIconStatus(currentStep, index));
                 return (React.createElement("div", { key: step.title || index, className: "item", onClick: () => {
                         if (validation) {
-                            _onSubmit((result) => {
+                            onSubmit((result) => {
                                 if (!result)
                                     return;
                                 setCurrentStep(index);
                                 onChange(index);
-                                _setSubmit(false);
+                                setSubmit(false);
                             });
                         }
                         else {
                             setCurrentStep(index);
                             onChange(index);
                         }
+                        const key = `${window.location.pathname}::${name}`;
+                        sessionStorage.setItem(key, String(index));
                     } },
                     React.createElement("div", { className: itemIcon.map((c) => c).join(" ") },
                         React.createElement("span", { className: getStepIconStatus(currentStep, index) })),
@@ -61,7 +61,7 @@ const Steps = function ({ children, steps = [], onChange, validation }) {
                     if (React.isValidElement(child) && stepIndex === currentStep) {
                         return validation
                             ? React.cloneElement(child, {
-                                errors: _errors,
+                                errors: errors,
                             })
                             : child;
                     }
@@ -76,18 +76,20 @@ const Steps = function ({ children, steps = [], onChange, validation }) {
                 children && children,
                 currentStep < steps.length - 1 && (React.createElement(Button, { color: "blue", onClick: () => {
                         if (validation) {
-                            _onSubmit((result) => {
+                            onSubmit((result) => {
                                 if (!result)
                                     return;
                                 setCurrentStep((prev) => prev + 1);
                                 onChange(currentStep + 1);
-                                _setSubmit(false);
+                                setSubmit(false);
                             });
                         }
                         else {
                             setCurrentStep((prev) => prev + 1);
                             onChange(currentStep + 1);
                         }
+                        const key = `${window.location.pathname}::${name}`;
+                        sessionStorage.setItem(key, String(currentStep + 1));
                     } }, "\u0130leri"))))));
 };
 export default Steps;

package/dist/libs/core/application/contexts/Notification.d.ts

@@ -22,6 +22,7 @@ type NotificationContextProps = {
     setTrigger: React.Dispatch<React.SetStateAction<boolean>>;
     setIsPopupOpen: React.Dispatch<React.SetStateAction<boolean>>;
     setPopupButtons: React.Dispatch<React.SetStateAction<PopupButtonProps | null>>;
+    setOnConfirm: React.Dispatch<React.SetStateAction<((confirm: boolean) => void) | null>>;
 };
 declare const NotificationContext: React.Context<Partial<NotificationContextProps>>;
 declare const NotificationProvider: ({ children, direction }: Props) => React.JSX.Element;

package/dist/libs/core/application/contexts/Notification.js

@@ -10,6 +10,7 @@ const NotificationProvider = ({ children, direction }) => {
     const [trigger, setTrigger] = useState(false);
     const [isPopupOpen, setIsPopupOpen] = useState(false);
     const [popupButtons, setPopupButtons] = useState(null);
+    const [onConfirm, setOnConfirm] = useState(null);
     return (React.createElement(NotificationContext.Provider, { value: {
             setTitle,
             setMessage,
@@ -17,9 +18,10 @@ const NotificationProvider = ({ children, direction }) => {
             setTrigger,
             setIsPopupOpen,
             setPopupButtons,
+            setOnConfirm,
         } },
         children,
         React.createElement(Notification, { title: title, message: message, status: status, direction: direction, trigger: trigger }),
-        React.createElement(Popup, { title: title, message: message, status: status, isOpen: isPopupOpen, buttons: popupButtons })));
+        React.createElement(Popup, { title: title, message: message, status: status, isOpen: isPopupOpen, buttons: popupButtons, onConfirm: onConfirm })));
 };
 export { NotificationContext, NotificationProvider };

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

@@ -54,7 +54,7 @@ export declare const useNotification: () => {
         title: string;
         message?: string;
         status: Status | number;
-    }, buttons?: PopupButtonProps | null) => void;
+    }, buttons?: PopupButtonProps | null, onConfirm?: (confirm: boolean) => void) => 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

@@ -26,20 +26,21 @@ export const useTranslation = function (currentLanguage, translations) {
 };
 export const useNotification = () => {
     // contexts
-    const { setTitle, setMessage, setStatus, setTrigger, setIsPopupOpen, setPopupButtons } = useContext(NotificationContext);
+    const { setTitle, setMessage, setStatus, setTrigger, setIsPopupOpen, setPopupButtons, setOnConfirm } = useContext(NotificationContext);
     // methods
     const notification = ({ title, message, status }) => {
-        setTitle && setTitle(title);
-        setMessage && setMessage(message ?? "");
-        setStatus && setStatus(status);
-        setTrigger && setTrigger((trigger) => !trigger);
+        setTitle?.(title);
+        setMessage?.(message ?? "");
+        setStatus?.(status);
+        setTrigger?.((trigger) => !trigger);
     };
-    const popup = ({ title, message, status, }, buttons) => {
-        setTitle && setTitle(title);
-        setMessage && setMessage(message ?? "");
-        setStatus && setStatus(status);
-        setIsPopupOpen && setIsPopupOpen((trigger) => !trigger);
-        setPopupButtons && setPopupButtons(buttons ?? null);
+    const popup = ({ title, message, status, }, buttons, onConfirm) => {
+        setTitle?.(title);
+        setMessage?.(message ?? "");
+        setStatus?.(status);
+        setIsPopupOpen?.((trigger) => !trigger);
+        setPopupButtons?.(buttons ?? null);
+        setOnConfirm?.(() => onConfirm);
     };
     return { notification, popup };
 };

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

@@ -83,7 +83,7 @@ export type Errors<TData> = Partial<{
 }>;
 export type MimeTypes = "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 FileCategory = "image" | "document" | "spreadsheet" | "presentation" | "archive" | "text" | "video" | "audio" | "json" | "xml" | "binary" | "other";
-export type Icons = "Add" | "ArrowLeft" | "ArrowRight" | "Bold" | "BulletList" | "CameraReels" | "CheckAll" | "CloseCircle" | "CloseSquare" | "CloudUpload-Fill" | "Dash" | "Document" | "Download" | "ExclamationCircle" | "ExclamationDiamond-Fill" | "Eye-Fill" | "File" | "FileEarmark-Fill" | "FileTypeCsv" | "FileTypeDoc" | "FileTypeDocx" | "FileTypeHtml" | "FileTypeJson" | "FileTypePdf" | "FileTypePptx" | "FileTypeTxt" | "FileTypeXls" | "FileTypeXlsx" | "FileTypeXml" | "FileTypeZip" | "Filter" | "Folder" | "Front" | "GripVertical" | "Import" | "Inbox-Fill" | "Italic" | "NumberList" | "Strikethrough" | "TextAlingCenter" | "TextAlingLeft" | "TextAlingRight" | "TickCircle" | "Trash-Fill" | "Underline" | "Upload" | "Warning" | "XCircle-Fill";
+export type Icons = "Add" | "ArrowLeft" | "ArrowRight" | "Bold" | "BulletList" | "CameraReels" | "CheckAll" | "CloseCircle" | "CloseSquare" | "CloudUpload-Fill" | "Dash" | "Document" | "Download" | "ExclamationCircle" | "ExclamationDiamond-Fill" | "Eye-Fill" | "File" | "FileEarmark-Fill" | "FileTypeCsv" | "FileTypeDoc" | "FileTypeDocx" | "FileTypeHtml" | "FileTypeJson" | "FileTypePdf" | "FileTypePptx" | "FileTypeTxt" | "FileTypeXls" | "FileTypeXlsx" | "FileTypeXml" | "FileTypeZip" | "Filter" | "Folder" | "Front" | "GripVertical" | "Import" | "Inbox-Fill" | "Information-Circle-Fill" | "Italic" | "NumberList" | "Strikethrough" | "TextAlingCenter" | "TextAlingLeft" | "TextAlingRight" | "TickCircle" | "Trash-Fill" | "Underline" | "Upload" | "Warning" | "XCircle-Fill";
 export type PieChartDataType = {
     value: number;
     text: string;

package/package.json

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