@react95/core 8.1.3 → 9.0.0

package/esm/Modal/Modal.mjs

@@ -1,132 +1,117 @@
-import React, { forwardRef, useContext, useState, useEffect } from "react";
-import Draggable from "react-draggable";
+import { nanoid } from "nanoid";
+import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
+import { useDraggable } from "@neodrag/react";
 import { Button } from "../Button/Button.mjs";
+import { fixedForwardRef, Frame } from "../Frame/Frame.mjs";
 import { TitleBar } from "../TitleBar/TitleBar.mjs";
-import { ModalContext } from "./ModalContext.mjs";
-import { modalWrapper, menuWrapper, menuItem, content, buttonWrapper } from "./Modal.css.mjs";
-import { Frame } from "../Frame/Frame.mjs";
-import close from "./close.svg.mjs";
-import help from "./help.svg.mjs";
+import { content, modalWrapper, menuWrapper, menuItem, buttonWrapper } from "./Modal.css.mjs";
+import cn from "classnames";
+import { useOnClickOutside } from "usehooks-ts";
+import { modals, ModalEvents } from "../shared/events.mjs";
+const ModalContent = fixedForwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(Frame, { ...rest, ref, className: cn(content, rest.className) })
+);
 const ModalRenderer = ({
   hasWindowButton: hasButton = true,
   buttons = [],
   buttonsAlignment = "flex-end",
   children,
-  onClose = () => {
-  },
-  onHelp,
-  defaultPosition = { x: 0, y: 0 },
-  positionOffset,
-  height,
   icon,
   menu = [],
   title,
-  width,
+  dragOptions,
+  titleBarOptions,
+  className,
   ...rest
 }, ref) => {
-  const {
-    addWindows,
-    removeWindow,
-    updateWindow,
-    setActiveWindow,
-    activeWindow
-  } = useContext(ModalContext);
-  const [id, setId] = useState(null);
+  const [id] = useState(nanoid());
   const [menuOpened, setMenuOpened] = useState("");
   const [isActive, setIsActive] = useState(false);
+  const draggableRef = useRef(null);
+  useDraggable(draggableRef, {
+    ...dragOptions,
+    handle: ".draggable"
+  });
+  const menuRef = useRef(null);
+  useOnClickOutside(menuRef, () => {
+    setMenuOpened("");
+  });
   useEffect(() => {
-    if (!id) {
-      const newId = addWindows({ icon, title, hasButton });
-      if (newId) {
-        setId(newId);
-        setActiveWindow(newId);
-      }
-    } else {
-      updateWindow(id, { icon, title, hasButton });
-    }
-  }, [id, icon, title, hasButton]);
-  useEffect(() => {
+    modals.emit(ModalEvents.AddModal, {
+      icon,
+      title,
+      id,
+      hasButton
+    });
+    modals.on(ModalEvents.ModalVisibilityChanged, ({ id: activeId }) => {
+      setIsActive(activeId === id);
+    });
+    modals.emit(ModalEvents.ModalVisibilityChanged, { id });
     return () => {
-      if (id) {
-        removeWindow(id);
-      }
+      modals.emit(ModalEvents.RemoveModal, { id });
     };
-  }, [id]);
-  useEffect(() => setIsActive(id === activeWindow), [id, activeWindow]);
+  }, []);
+  useImperativeHandle(ref, () => {
+    return draggableRef.current;
+  });
   return /* @__PURE__ */ React.createElement(
-    Draggable,
+    Frame,
     {
-      handle: ".draggable",
-      defaultPosition,
-      positionOffset,
-      onMouseDown: id ? () => setActiveWindow(id) : void 0
+      ...rest,
+      className: cn(modalWrapper({ active: isActive }), className),
+      ref: draggableRef,
+      onMouseDown: () => {
+        modals.emit(ModalEvents.ModalVisibilityChanged, { id });
+      }
     },
     /* @__PURE__ */ React.createElement(
-      Frame,
+      TitleBar,
       {
-        ...rest,
-        width,
-        height,
-        className: modalWrapper({ active: isActive }),
-        ref
+        active: isActive,
+        icon,
+        title,
+        className: "draggable"
       },
-      /* @__PURE__ */ React.createElement(
-        TitleBar,
+      titleBarOptions && /* @__PURE__ */ React.createElement(TitleBar.OptionsBox, null, titleBarOptions)
+    ),
+    menu && menu.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: menuWrapper, ref: menuRef }, menu.map(({ name, list }) => {
+      const active = menuOpened === name;
+      return /* @__PURE__ */ React.createElement(
+        "li",
         {
-          active: isActive,
-          icon,
-          title,
-          className: "draggable"
+          key: name,
+          onMouseDown: () => setMenuOpened(name),
+          className: menuItem({ active })
         },
-        /* @__PURE__ */ React.createElement(TitleBar.OptionsBox, null, onHelp && /* @__PURE__ */ React.createElement(TitleBar.Option, null, /* @__PURE__ */ React.createElement("img", { src: help, alt: "help", onClick: onHelp })), /* @__PURE__ */ React.createElement(TitleBar.Option, { onClick: onClose }, /* @__PURE__ */ React.createElement("img", { src: close, alt: "close" })))
-      ),
-      menu && menu.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: menuWrapper }, menu.map(({ name, list }) => {
-        const active = menuOpened === name;
-        return /* @__PURE__ */ React.createElement(
-          "li",
-          {
-            key: name,
-            onMouseDown: () => setMenuOpened(name),
-            className: menuItem({ active })
-          },
-          name,
-          active && list
-        );
-      })),
-      /* @__PURE__ */ React.createElement("div", { className: content, onClick: () => setMenuOpened("") }, children),
-      buttons && buttons.length > 0 && /* @__PURE__ */ React.createElement(
-        Frame,
+        name,
+        active && list
+      );
+    })),
+    children,
+    buttons && buttons.length > 0 && /* @__PURE__ */ React.createElement(
+      Frame,
+      {
+        className: buttonWrapper,
+        justifyContent: buttonsAlignment
+      },
+      buttons.map((button) => /* @__PURE__ */ React.createElement(
+        Button,
         {
-          className: buttonWrapper,
-          justifyContent: buttonsAlignment
+          key: button.value,
+          onClick: button.onClick,
+          value: button.value
         },
-        buttons.map((button) => /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            key: button.value,
-            onClick: button.onClick,
-            value: button.value
-          },
-          button.value
-        ))
-      )
+        button.value
+      ))
     )
   );
 };
-const Modal = forwardRef(ModalRenderer);
-Modal.displayName = "Modal";
-Modal.defaultProps = {
-  icon: void 0,
-  title: "Modal",
-  children: null,
-  defaultPosition: { x: 0, y: 0 },
-  buttons: [],
-  menu: [],
-  width: void 0,
-  height: void 0,
-  onClose: () => {
+const Modal = Object.assign(
+  fixedForwardRef(ModalRenderer),
+  {
+    Content: ModalContent
   }
-};
+);
 export {
   Modal
 };

package/esm/TaskBar/TaskBar.mjs

@@ -1,15 +1,46 @@
-import React, { forwardRef, useState, useContext } from "react";
-import { ModalContext } from "../Modal/ModalContext.mjs";
+import React, { forwardRef, useState, useEffect } from "react";
 import { Frame } from "../Frame/Frame.mjs";
 import { Clock } from "./Clock.mjs";
 import { WindowButton } from "./WindowButton.mjs";
 import { Logo } from "@react95/icons";
 import { truncate } from "./TaskBar.css.mjs";
+import { modals, ModalEvents } from "../shared/events.mjs";
 const TaskBar = forwardRef(
   ({ list }, ref) => {
     const [showList, toggleShowList] = useState(false);
     const [activeStart, toggleActiveStart] = useState(false);
-    const { windows, activeWindow, setActiveWindow } = useContext(ModalContext);
+    const [modalWindows, setModalWindows] = React.useState([]);
+    const [activeWindow, setActiveWindow] = useState();
+    useEffect(() => {
+      const addModal = (window) => {
+        setModalWindows((prevModals) => [...prevModals, window]);
+      };
+      const removeModal = (data) => {
+        setModalWindows((prevModals) => {
+          const filteredModals = prevModals.filter(
+            (modal) => modal.id !== data.id
+          );
+          const lastModal = filteredModals.at(-1);
+          if (!activeWindow && lastModal) {
+            modals.emit(ModalEvents.ModalVisibilityChanged, {
+              id: lastModal == null ? void 0 : lastModal.id
+            });
+          }
+          return filteredModals;
+        });
+      };
+      const updateVisibleModal = ({ id }) => {
+        setActiveWindow(id);
+      };
+      modals.on(ModalEvents.AddModal, addModal);
+      modals.on(ModalEvents.RemoveModal, removeModal);
+      modals.on(ModalEvents.ModalVisibilityChanged, updateVisibleModal);
+      return () => {
+        modals.off(ModalEvents.AddModal, addModal);
+        modals.off(ModalEvents.RemoveModal, removeModal);
+        modals.off(ModalEvents.ModalVisibilityChanged, updateVisibleModal);
+      };
+    }, []);
     return /* @__PURE__ */ React.createElement(
       Frame,
       {
@@ -52,14 +83,16 @@ const TaskBar = forwardRef(
         },
         "Start"
       ),
-      /* @__PURE__ */ React.createElement(Frame, { w: "100%", paddingLeft: "$0", ml: "$2", display: "flex" }, Object.entries(windows).map(
-        ([windowId, { icon, title, hasButton }]) => hasButton && /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(Frame, { w: "100%", paddingLeft: "$0", ml: "$2", display: "flex" }, modalWindows.map(
+        ({ icon, title, hasButton, id }) => hasButton && /* @__PURE__ */ React.createElement(
           WindowButton,
           {
-            key: windowId,
+            key: id,
             icon,
-            active: windowId === activeWindow,
-            onClick: () => setActiveWindow(windowId),
+            active: id === activeWindow,
+            onClick: () => {
+              modals.emit(ModalEvents.ModalVisibilityChanged, { id });
+            },
             small: false
           },
           /* @__PURE__ */ React.createElement("div", { className: truncate }, title)

package/esm/TitleBar/TitleBar.css.ts.vanilla.css

@@ -49,10 +49,17 @@
 .r95_1kpzw682 svg {
   width: var(--r95-space-16);
   height: var(--r95-space-16);
-  margin-right: var(--r95-space-4);
+  margin-inline-end: var(--r95-space-4);
+  flex-shrink: 0;
+}
+.r95_1kpzw681 svg {
+  width: var(--r95-space-14);
+  height: var(--r95-space-14);
+  margin-inline-end: unset;
 }
 .r95_1kpzw685 {
   flex-grow: 1;
+  flex-shrink: 0;
   line-height: 1.4em;
   margin: 0;
   font-size: 1em;

package/esm/TitleBar/TitleBar.mjs

@@ -1,9 +1,36 @@
-import React, { forwardRef } from "react";
-import { Frame } from "../Frame/Frame.mjs";
-import { optionsBox, option, titleBarBackground, title } from "./TitleBar.css.mjs";
-import { button } from "../Button/Button.css.mjs";
 import cn from "classnames";
-const OptionsBox = forwardRef(
+import React from "react";
+import close from "./close.svg.mjs";
+import help from "./help.svg.mjs";
+import maximize from "./maximize.svg.mjs";
+import minimize from "./minimize.svg.mjs";
+import restore from "./restore.svg.mjs";
+import { fixedForwardRef, Frame } from "../Frame/Frame.mjs";
+import { button } from "../Button/Button.css.mjs";
+import { optionsBox, option, titleBarBackground, title } from "./TitleBar.css.mjs";
+const defaultOptions = {
+  help: {
+    alt: "help",
+    src: help
+  },
+  close: {
+    alt: "close",
+    src: close
+  },
+  maximize: {
+    alt: "maximize",
+    src: maximize
+  },
+  minimize: {
+    alt: "minimize",
+    src: minimize
+  },
+  restore: {
+    alt: "restore",
+    src: restore
+  }
+};
+const OptionsBox = fixedForwardRef(
   (rest, ref) => /* @__PURE__ */ React.createElement(
     Frame,
     {
@@ -13,17 +40,49 @@ const OptionsBox = forwardRef(
     }
   )
 );
-const Option = forwardRef(
+const Option = fixedForwardRef(
   (rest, ref) => /* @__PURE__ */ React.createElement(
     Frame,
     {
+      as: "button",
       ...rest,
       ref,
-      as: "button",
       className: cn(button, option, rest.className)
     }
   )
 );
+const DefaultOption = fixedForwardRef(
+  (props, ref) => {
+    const { kind, ...rest } = props;
+    const optionType = defaultOptions[kind] || defaultOptions.help;
+    return /* @__PURE__ */ React.createElement(Option, { ...rest, ref }, /* @__PURE__ */ React.createElement("img", { src: optionType.src, alt: optionType.alt }));
+  }
+);
+const Help = fixedForwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "help", ref });
+  }
+);
+const Close = fixedForwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "close", ref });
+  }
+);
+const Maximize = fixedForwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "maximize", ref });
+  }
+);
+const Minimize = fixedForwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "minimize", ref });
+  }
+);
+const Restore = fixedForwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "restore", ref });
+  }
+);
 const TitleBarRenderer = ({ children, title: title$1 = "UNKNOWN.EXE", icon, active = true, ...rest }, ref) => /* @__PURE__ */ React.createElement(
   Frame,
   {
@@ -36,10 +95,15 @@ const TitleBarRenderer = ({ children, title: title$1 = "UNKNOWN.EXE", icon, acti
   children
 );
 const TitleBar = Object.assign(
-  forwardRef(TitleBarRenderer),
+  fixedForwardRef(TitleBarRenderer),
   {
     Option,
-    OptionsBox
+    OptionsBox,
+    Help,
+    Close,
+    Maximize,
+    Minimize,
+    Restore
   }
 );
 export {

package/esm/TitleBar/maximize.svg.mjs

@@ -0,0 +1,4 @@
+const maximize = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nOScgaGVpZ2h0PSc5JyBmaWxsPSdjdXJyZW50Q29sb3InIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J005IDBIMHY5aDlWMHpNOCAySDF2Nmg3VjJ6JyAvPjwvc3ZnPg==";
+export {
+  maximize as default
+};

package/esm/TitleBar/minimize.svg.mjs

@@ -0,0 +1,4 @@
+const minimize = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiPjxnIGNsYXNzPSJsYXllciI+PHBhdGggZD0iTTAgNi45NWg5djIuMDRIMFY2Ljk1eiIvPjwvZz48L3N2Zz4=";
+export {
+  minimize as default
+};

package/esm/TitleBar/restore.svg.mjs

@@ -0,0 +1,4 @@
+const restore = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nOCcgaGVpZ2h0PSc5JyBmaWxsPSdjdXJyZW50Q29sb3InIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTIgMGg2djJIMnpNNyAyaDF2NEg3ek0yIDJoMXYxSDJ6TTYgNWgxdjFINnpNMCAzaDZ2Mkgwek01IDVoMXY0SDV6TTAgNWgxdjRIMHpNMSA4aDR2MUgxeicvPjwvc3ZnPg==";
+export {
+  restore as default
+};

package/esm/index.mjs

@@ -1,6 +1,4 @@
 import { Modal } from "./Modal/Modal.mjs";
-import { ModalContext } from "./Modal/ModalContext.mjs";
-import { ModalProvider } from "./Modal/ModalProvider.mjs";
 import { Tabs } from "./Tabs/Tabs.mjs";
 import { Tab } from "./Tabs/Tab.mjs";
 import { Alert } from "./Alert/Alert.mjs";
@@ -34,8 +32,6 @@ export {
   Input,
   List,
   Modal,
-  ModalContext,
-  ModalProvider,
   ProgressBar,
   RadioButton,
   Range,

package/esm/shared/events.mjs

@@ -0,0 +1,35 @@
+class Emitter {
+  constructor() {
+    this.listeners = {};
+  }
+  on(eventName, callback) {
+    if (!this.listeners[eventName]) {
+      this.listeners[eventName] = [];
+    }
+    this.listeners[eventName].push(callback);
+  }
+  off(eventName, callback) {
+    if (this.listeners[eventName]) {
+      this.listeners[eventName] = this.listeners[eventName].filter(
+        (cb) => cb !== callback
+      );
+    }
+  }
+  emit(eventName, data) {
+    if (this.listeners[eventName]) {
+      this.listeners[eventName].forEach((callback) => callback(data));
+    }
+  }
+}
+var ModalEvents = /* @__PURE__ */ ((ModalEvents2) => {
+  ModalEvents2["AddModal"] = "add-modal";
+  ModalEvents2["RemoveModal"] = "remove-modal";
+  ModalEvents2["ModalVisibilityChanged"] = "modal-visibility-changed";
+  return ModalEvents2;
+})(ModalEvents || {});
+const modals = new Emitter();
+export {
+  Emitter,
+  ModalEvents,
+  modals
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react95/core",
-  "version": "8.1.3",
+  "version": "9.0.0",
   "description": "Windows 95 styleguide",
   "main": "cjs/index.cjs",
   "type": "module",
@@ -84,11 +84,6 @@
       "import": "./esm/Modal/Modal.mjs",
       "require": "./cjs/Modal/Modal.cjs"
     },
-    "./ModalProvider": {
-      "types": "./types/Modal/ModalProvider.d.ts",
-      "import": "./esm/Modal/ModalProvider.mjs",
-      "require": "./cjs/Modal/ModalProvider.cjs"
-    },
     "./ProgressBar": {
       "types": "./types/ProgressBar/ProgressBar.d.ts",
       "import": "./esm/ProgressBar/ProgressBar.mjs",
@@ -153,13 +148,14 @@
   "author": "ggdaltoso <ggdaltoso@gmail.com>",
   "license": "MIT",
   "dependencies": {
+    "@neodrag/react": "^2.0.4",
     "@react95/icons": "^2.1.1",
     "@vanilla-extract/dynamic": "^2.1.0",
     "@vanilla-extract/recipes": "^0.5.1",
     "classnames": "^2.5.1",
     "nanoid": "^3.3.1",
     "rainbow-sprinkles": "^0.17.1",
-    "react-draggable": "^4.4.4"
+    "usehooks-ts": "^3.1.0"
   },
   "peerDependencies": {
     "react": ">= 16.8.0",
@@ -184,7 +180,7 @@
     "url": "https://github.com/React95/React95/issues"
   },
   "homepage": "https://github.com/React95/React95#readme",
-  "gitHead": "da0264dc2c5993fffc716765517e6277bdf89ac3",
+  "gitHead": "2da7c026d76ad6d43a9a1a734245125e84d2bbbc",
   "module": "esm/index.mjs",
   "private": false,
   "types": "types/index.d.ts"

package/types/Cursor/Cursor.css.d.ts

@@ -1 +1 @@
-export declare const Cursor: Record<"Auto" | "Text" | "VerticalText" | "Help" | "Crosshair" | "Pointer" | "Progress" | "Wait" | "Alias" | "Copy" | "Move" | "None" | "NoDrop" | "NotAllowed" | "Grab" | "Grabbing" | "ColResize" | "RowResize" | "NResize" | "EResize" | "SResize" | "WResize" | "NsResize" | "EwResize" | "NeResize" | "NwResize" | "SeResize" | "SwResize" | "NeswResize" | "NwseResize" | "ZoomIn" | "ZoomOut", string>;
+export declare const Cursor: Record<"Help" | "Auto" | "Text" | "VerticalText" | "Crosshair" | "Pointer" | "Progress" | "Wait" | "Alias" | "Copy" | "Move" | "None" | "NoDrop" | "NotAllowed" | "Grab" | "Grabbing" | "ColResize" | "RowResize" | "NResize" | "EResize" | "SResize" | "WResize" | "NsResize" | "EwResize" | "NeResize" | "NwResize" | "SeResize" | "SwResize" | "NeswResize" | "NwseResize" | "ZoomIn" | "ZoomOut", string>;