@react95/core 9.1.1 → 9.2.0

package/cjs/Modal/Modal.cjs

@@ -13,6 +13,25 @@ const events = require("../shared/events.cjs");
 const ModalContent = Frame.fixedForwardRef(
   (rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: cn(Modal_css.content, rest.className) })
 );
+const ModalMinimize = Frame.fixedForwardRef(
+  (props, ref) => {
+    const [id, setId] = React.useState("");
+    React.useEffect(() => {
+      const handleVisibilityChange = ({ id: activeId }) => {
+        setId(activeId);
+      };
+      events.modals.on(events.ModalEvents.ModalVisibilityChanged, handleVisibilityChange);
+      return () => {
+        events.modals.off(events.ModalEvents.ModalVisibilityChanged, handleVisibilityChange);
+      };
+    }, []);
+    const handleMinimize = () => {
+      events.modals.emit(events.ModalEvents.MinimizeModal, { id });
+      events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id: "no id" });
+    };
+    return /* @__PURE__ */ React.createElement(TitleBar.TitleBar.Minimize, { ...props, ref, onClick: handleMinimize });
+  }
+);
 const ModalRenderer = ({
   hasWindowButton: hasButton = true,
   buttons = [],
@@ -29,6 +48,7 @@ const ModalRenderer = ({
   const [id] = React.useState(nanoid.nanoid());
   const [menuOpened, setMenuOpened] = React.useState("");
   const [isActive, setIsActive] = React.useState(false);
+  const [isModalMinimized, setIsModalMinimized] = React.useState(false);
   const draggableRef = React.useRef(null);
   react.useDraggable(draggableRef, {
     ...dragOptions,
@@ -53,6 +73,24 @@ const ModalRenderer = ({
       events.modals.emit(events.ModalEvents.RemoveModal, { id });
     };
   }, []);
+  React.useEffect(() => {
+    events.modals.on(events.ModalEvents.MinimizeModal, ({ id: activeId }) => {
+      if (activeId === id) {
+        setIsModalMinimized(true);
+      }
+    });
+    events.modals.on(events.ModalEvents.RestoreModal, ({ id: activeId }) => {
+      if (activeId === id) {
+        setIsModalMinimized(false);
+      }
+    });
+    return () => {
+      events.modals.off(events.ModalEvents.MinimizeModal, () => {
+      });
+      events.modals.off(events.ModalEvents.RestoreModal, () => {
+      });
+    };
+  }, [id]);
   React.useImperativeHandle(ref, () => {
     return draggableRef.current;
   });
@@ -60,7 +98,12 @@ const ModalRenderer = ({
     Frame.Frame,
     {
       ...rest,
-      className: cn(Modal_css.modalWrapper({ active: isActive }), className),
+      className: cn(
+        Modal_css.modalWrapper({ active: isActive, minimized: isModalMinimized }),
+        className
+      ),
+      role: "dialog",
+      "aria-hidden": isModalMinimized,
       ref: draggableRef,
       onMouseDown: () => {
         events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
@@ -111,7 +154,8 @@ const ModalRenderer = ({
 const Modal = Object.assign(
   Frame.fixedForwardRef(ModalRenderer),
   {
-    Content: ModalContent
+    Content: ModalContent,
+    Minimize: ModalMinimize
   }
 );
 exports.Modal = Modal;

package/cjs/Modal/Modal.css.cjs

@@ -2,11 +2,11 @@ require('./Modal.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 /* empty css                             */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var modalWrapper = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_1txblt60", variantClassNames: { active: { true: "r95_1txblt61" } }, defaultVariants: {}, compoundVariants: [] });
-var buttonWrapper = "r95_1txblt62";
-var content = "r95_1txblt63";
-var menuWrapper = "r95_1txblt64";
-var menuItem = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_1txblt65", variantClassNames: { active: { true: "r95_1txblt66" } }, defaultVariants: {}, compoundVariants: [] });
+var modalWrapper = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_1txblt60", variantClassNames: { active: { true: "r95_1txblt61" }, minimized: { true: "r95_1txblt62", false: "r95_1txblt63" } }, defaultVariants: {}, compoundVariants: [] });
+var buttonWrapper = "r95_1txblt64";
+var content = "r95_1txblt65";
+var menuWrapper = "r95_1txblt66";
+var menuItem = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_1txblt67", variantClassNames: { active: { true: "r95_1txblt68" } }, defaultVariants: {}, compoundVariants: [] });
 exports.buttonWrapper = buttonWrapper;
 exports.content = content;
 exports.menuItem = menuItem;

package/cjs/Modal/Modal.css.ts.vanilla.css

@@ -11,15 +11,21 @@
   z-index: var(--r95-zIndex-modal);
 }
 .r95_1txblt62 {
+  display: none;
+}
+.r95_1txblt63 {
+  display: flex;
+}
+.r95_1txblt64 {
   display: flex;
   gap: var(--r95-space-6);
   flex-direction: row;
   padding: var(--r95-space-6);
 }
-.r95_1txblt62 button {
+.r95_1txblt64 button {
   min-width: 70px;
 }
-.r95_1txblt63 {
+.r95_1txblt65 {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
@@ -27,7 +33,7 @@
   margin-block-start: var(--r95-space-4);
   margin-inline-end: var(--r95-space-1);
 }
-.r95_1txblt64 {
+.r95_1txblt66 {
   display: flex;
   flex-direction: row;
   list-style: none;
@@ -40,17 +46,17 @@
   border-bottom-color: var(--r95-color-borderDark);
   box-shadow: 0 1px 0 0 var(--r95-color-borderLighter);
 }
-.r95_1txblt65 {
+.r95_1txblt67 {
   position: relative;
   padding-left: 6px;
   padding-right: 6px;
   user-select: none;
 }
-.r95_1txblt66 {
+.r95_1txblt68 {
   background-color: var(--r95-color-material);
   color: var(--r95-color-materialTextInvert);
 }
-.r95_1txblt65 ul {
+.r95_1txblt67 ul {
   position: absolute;
   left: 0;
   color: var(--r95-color-materialText);

package/cjs/TaskBar/TaskBar.cjs

@@ -93,7 +93,13 @@ const TaskBar = React.forwardRef(
             icon,
             active: id === activeWindow,
             onClick: () => {
-              events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
+              if (id === activeWindow) {
+                events.modals.emit(events.ModalEvents.MinimizeModal, { id });
+                setActiveWindow("Minimize");
+              } else {
+                events.modals.emit(events.ModalEvents.RestoreModal, { id });
+                events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
+              }
             },
             small: false
           },

package/cjs/shared/events.cjs

@@ -27,6 +27,8 @@ var ModalEvents = /* @__PURE__ */ ((ModalEvents2) => {
   ModalEvents2["AddModal"] = "add-modal";
   ModalEvents2["RemoveModal"] = "remove-modal";
   ModalEvents2["ModalVisibilityChanged"] = "modal-visibility-changed";
+  ModalEvents2["MinimizeModal"] = "minimize-modal";
+  ModalEvents2["RestoreModal"] = "restore-modal";
   return ModalEvents2;
 })(ModalEvents || {});
 const modals = new Emitter();

package/cjs/themes/azureOrange.css.cjs

@@ -1,3 +1,4 @@
 require('./azureOrange.css.ts.vanilla.css');
 "use strict";
+require("./contract.css.ts.vanilla.css.cjs");
 /* empty css                                   */

package/cjs/themes/bee.css.cjs

@@ -1,4 +1,3 @@
 require('./bee.css.ts.vanilla.css');
 "use strict";
-require("./contract.css.ts.vanilla.css.cjs");
 /* empty css                           */

package/esm/Modal/Modal.css.mjs

@@ -1,10 +1,10 @@
 import './Modal.css.ts.vanilla.css';
 /* empty css                           */import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var modalWrapper = createRuntimeFn({ defaultClassName: "r95_1txblt60", variantClassNames: { active: { true: "r95_1txblt61" } }, defaultVariants: {}, compoundVariants: [] });
-var buttonWrapper = "r95_1txblt62";
-var content = "r95_1txblt63";
-var menuWrapper = "r95_1txblt64";
-var menuItem = createRuntimeFn({ defaultClassName: "r95_1txblt65", variantClassNames: { active: { true: "r95_1txblt66" } }, defaultVariants: {}, compoundVariants: [] });
+var modalWrapper = createRuntimeFn({ defaultClassName: "r95_1txblt60", variantClassNames: { active: { true: "r95_1txblt61" }, minimized: { true: "r95_1txblt62", false: "r95_1txblt63" } }, defaultVariants: {}, compoundVariants: [] });
+var buttonWrapper = "r95_1txblt64";
+var content = "r95_1txblt65";
+var menuWrapper = "r95_1txblt66";
+var menuItem = createRuntimeFn({ defaultClassName: "r95_1txblt67", variantClassNames: { active: { true: "r95_1txblt68" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   buttonWrapper,
   content,

package/esm/Modal/Modal.css.ts.vanilla.css

@@ -11,15 +11,21 @@
   z-index: var(--r95-zIndex-modal);
 }
 .r95_1txblt62 {
+  display: none;
+}
+.r95_1txblt63 {
+  display: flex;
+}
+.r95_1txblt64 {
   display: flex;
   gap: var(--r95-space-6);
   flex-direction: row;
   padding: var(--r95-space-6);
 }
-.r95_1txblt62 button {
+.r95_1txblt64 button {
   min-width: 70px;
 }
-.r95_1txblt63 {
+.r95_1txblt65 {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
@@ -27,7 +33,7 @@
   margin-block-start: var(--r95-space-4);
   margin-inline-end: var(--r95-space-1);
 }
-.r95_1txblt64 {
+.r95_1txblt66 {
   display: flex;
   flex-direction: row;
   list-style: none;
@@ -40,17 +46,17 @@
   border-bottom-color: var(--r95-color-borderDark);
   box-shadow: 0 1px 0 0 var(--r95-color-borderLighter);
 }
-.r95_1txblt65 {
+.r95_1txblt67 {
   position: relative;
   padding-left: 6px;
   padding-right: 6px;
   user-select: none;
 }
-.r95_1txblt66 {
+.r95_1txblt68 {
   background-color: var(--r95-color-material);
   color: var(--r95-color-materialTextInvert);
 }
-.r95_1txblt65 ul {
+.r95_1txblt67 ul {
   position: absolute;
   left: 0;
   color: var(--r95-color-materialText);

package/esm/Modal/Modal.mjs

@@ -1,5 +1,5 @@
 import { nanoid } from "nanoid";
-import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
+import React, { useState, useEffect, useRef, useImperativeHandle } from "react";
 import { useDraggable } from "@neodrag/react";
 import { Button } from "../Button/Button.mjs";
 import { fixedForwardRef, Frame } from "../Frame/Frame.mjs";
@@ -11,6 +11,25 @@ import { modals, ModalEvents } from "../shared/events.mjs";
 const ModalContent = fixedForwardRef(
   (rest, ref) => /* @__PURE__ */ React.createElement(Frame, { ...rest, ref, className: cn(content, rest.className) })
 );
+const ModalMinimize = fixedForwardRef(
+  (props, ref) => {
+    const [id, setId] = useState("");
+    useEffect(() => {
+      const handleVisibilityChange = ({ id: activeId }) => {
+        setId(activeId);
+      };
+      modals.on(ModalEvents.ModalVisibilityChanged, handleVisibilityChange);
+      return () => {
+        modals.off(ModalEvents.ModalVisibilityChanged, handleVisibilityChange);
+      };
+    }, []);
+    const handleMinimize = () => {
+      modals.emit(ModalEvents.MinimizeModal, { id });
+      modals.emit(ModalEvents.ModalVisibilityChanged, { id: "no id" });
+    };
+    return /* @__PURE__ */ React.createElement(TitleBar.Minimize, { ...props, ref, onClick: handleMinimize });
+  }
+);
 const ModalRenderer = ({
   hasWindowButton: hasButton = true,
   buttons = [],
@@ -27,6 +46,7 @@ const ModalRenderer = ({
   const [id] = useState(nanoid());
   const [menuOpened, setMenuOpened] = useState("");
   const [isActive, setIsActive] = useState(false);
+  const [isModalMinimized, setIsModalMinimized] = useState(false);
   const draggableRef = useRef(null);
   useDraggable(draggableRef, {
     ...dragOptions,
@@ -51,6 +71,24 @@ const ModalRenderer = ({
       modals.emit(ModalEvents.RemoveModal, { id });
     };
   }, []);
+  useEffect(() => {
+    modals.on(ModalEvents.MinimizeModal, ({ id: activeId }) => {
+      if (activeId === id) {
+        setIsModalMinimized(true);
+      }
+    });
+    modals.on(ModalEvents.RestoreModal, ({ id: activeId }) => {
+      if (activeId === id) {
+        setIsModalMinimized(false);
+      }
+    });
+    return () => {
+      modals.off(ModalEvents.MinimizeModal, () => {
+      });
+      modals.off(ModalEvents.RestoreModal, () => {
+      });
+    };
+  }, [id]);
   useImperativeHandle(ref, () => {
     return draggableRef.current;
   });
@@ -58,7 +96,12 @@ const ModalRenderer = ({
     Frame,
     {
       ...rest,
-      className: cn(modalWrapper({ active: isActive }), className),
+      className: cn(
+        modalWrapper({ active: isActive, minimized: isModalMinimized }),
+        className
+      ),
+      role: "dialog",
+      "aria-hidden": isModalMinimized,
       ref: draggableRef,
       onMouseDown: () => {
         modals.emit(ModalEvents.ModalVisibilityChanged, { id });
@@ -109,7 +152,8 @@ const ModalRenderer = ({
 const Modal = Object.assign(
   fixedForwardRef(ModalRenderer),
   {
-    Content: ModalContent
+    Content: ModalContent,
+    Minimize: ModalMinimize
   }
 );
 export {

package/esm/TaskBar/TaskBar.mjs

@@ -91,7 +91,13 @@ const TaskBar = forwardRef(
             icon,
             active: id === activeWindow,
             onClick: () => {
-              modals.emit(ModalEvents.ModalVisibilityChanged, { id });
+              if (id === activeWindow) {
+                modals.emit(ModalEvents.MinimizeModal, { id });
+                setActiveWindow("Minimize");
+              } else {
+                modals.emit(ModalEvents.RestoreModal, { id });
+                modals.emit(ModalEvents.ModalVisibilityChanged, { id });
+              }
             },
             small: false
           },

package/esm/shared/events.mjs

@@ -25,6 +25,8 @@ var ModalEvents = /* @__PURE__ */ ((ModalEvents2) => {
   ModalEvents2["AddModal"] = "add-modal";
   ModalEvents2["RemoveModal"] = "remove-modal";
   ModalEvents2["ModalVisibilityChanged"] = "modal-visibility-changed";
+  ModalEvents2["MinimizeModal"] = "minimize-modal";
+  ModalEvents2["RestoreModal"] = "restore-modal";
   return ModalEvents2;
 })(ModalEvents || {});
 const modals = new Emitter();

package/esm/themes/azureOrange.css.mjs

@@ -1,2 +1,3 @@
 import './azureOrange.css.ts.vanilla.css';
+import "./contract.css.ts.vanilla.css.mjs";
 /* empty css                                 */

package/esm/themes/bee.css.mjs

@@ -1,3 +1,2 @@
 import './bee.css.ts.vanilla.css';
-import "./contract.css.ts.vanilla.css.mjs";
 /* empty css                         */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react95/core",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "description": "Windows 95 styleguide",
   "main": "cjs/index.cjs",
   "type": "module",
@@ -180,7 +180,7 @@
     "url": "https://github.com/React95/React95/issues"
   },
   "homepage": "https://github.com/React95/React95#readme",
-  "gitHead": "b9d4b9a7622744827e7dccc1909a763db5f15731",
+  "gitHead": "3ba802ad17cea4901388c828d4a7e51b39fc1fe3",
   "module": "esm/index.mjs",
   "private": false,
   "types": "types/index.d.ts"

package/types/Modal/Modal.css.d.ts

@@ -4,6 +4,14 @@ export declare const modalWrapper: import("@vanilla-extract/recipes").RuntimeFn<
             zIndex: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         };
     };
+    minimized: {
+        true: {
+            display: "none";
+        };
+        false: {
+            display: "flex";
+        };
+    };
 }>;
 export declare const buttonWrapper: string;
 export declare const content: string;

package/types/Modal/Modal.d.ts

@@ -2,7 +2,7 @@ import React, { HTMLAttributes, MouseEvent, ReactElement, Ref } from 'react';
 import { DragOptions } from '@neodrag/react';
 import { FrameProps } from '../Frame/Frame';
 import { List } from '../List/List';
-import { TitleBar, TitleBarBackgroundProps } from '../TitleBar/TitleBar';
+import { TitleBar, TitleBarBackgroundProps, OptionReturnType } from '../TitleBar/TitleBar';
 export type ModalButtons = {
     value: string;
     onClick(event: MouseEvent): void;
@@ -2270,8 +2270,10 @@ declare const ModalContent: (props: {
         };
     };
 }> & React.RefAttributes<HTMLDivElement>) => React.ReactNode;
+declare const ModalMinimize: OptionReturnType;
 declare const ModalRenderer: ({ hasWindowButton: hasButton, buttons, buttonsAlignment, children, icon, menu, title, dragOptions, titleBarOptions, className, ...rest }: ModalProps, ref: Ref<HTMLDivElement | null>) => React.JSX.Element;
 export declare const Modal: ModalProps & typeof ModalRenderer & {
     Content: typeof ModalContent;
+    Minimize: typeof ModalMinimize;
 };
 export {};

package/types/TitleBar/TitleBar.d.ts

@@ -2248,24 +2248,17 @@ declare const OptionsBox: (props: {
     };
 }> & React.RefAttributes<HTMLDivElement>) => React.ReactNode;
 export type OptionProps<TAs extends ElementType> = ButtonHTMLAttributes<HTMLButtonElement> & FrameProps<TAs>;
-declare const Option: <TAs extends ElementType = "button">(props: OptionProps<TAs> & {
-    ref?: ForwardedRef<ElementRef<TAs>>;
-}) => ReactElement;
-declare const Help: <TAs extends ElementType = "button">(props: OptionProps<TAs> & {
-    ref?: ForwardedRef<ElementRef<TAs>>;
-}) => ReactElement;
-declare const Close: <TAs extends ElementType = "button">(props: OptionProps<TAs> & {
+export type OptionReturnType = <TAs extends ElementType = 'button'>(props: OptionProps<TAs> & {
     ref?: ForwardedRef<ElementRef<TAs>>;
 }) => ReactElement;
-declare const Maximize: <TAs extends ElementType = "button">(props: OptionProps<TAs> & {
-    ref?: ForwardedRef<ElementRef<TAs>>;
-}) => ReactElement;
-declare const Minimize: <TAs extends ElementType = "button">(props: OptionProps<TAs> & {
-    ref?: ForwardedRef<ElementRef<TAs>>;
-}) => ReactElement;
-declare const Restore: <TAs extends ElementType = "button">(props: OptionProps<TAs> & {
+declare const Option: <TAs extends ElementType = "button">(props: OptionProps<TAs> & {
     ref?: ForwardedRef<ElementRef<TAs>>;
 }) => ReactElement;
+declare const Help: OptionReturnType;
+declare const Close: OptionReturnType;
+declare const Maximize: OptionReturnType;
+declare const Minimize: OptionReturnType;
+declare const Restore: OptionReturnType;
 export interface TitleBarBackgroundProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, FrameProps<'div'> {
     active?: boolean;
     icon?: ReactElement;

package/types/shared/events.d.ts

@@ -8,7 +8,9 @@ export declare class Emitter<U extends string, T> {
 export declare enum ModalEvents {
     AddModal = "add-modal",
     RemoveModal = "remove-modal",
-    ModalVisibilityChanged = "modal-visibility-changed"
+    ModalVisibilityChanged = "modal-visibility-changed",
+    MinimizeModal = "minimize-modal",
+    RestoreModal = "restore-modal"
 }
 export interface ModalWindow {
     icon?: ReactElement;