30 add experimentell stateless modal logic for dd enviroments

.editorconfig

@@ -0,0 +1,21 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
+
+[*.mk]
+indent_style = tab
+indent_size = 2
+
+[makefile]
+indent_style = tab
+indent_size = 2

makefile

@@ -28,4 +28,12 @@ endef
 
 define echo_purple
     echo -e ${PURPLE}$1${NC}
-endef
+endef
+
+git-sync-prod:
+	@echo "Syncing with prod branch"
+	git fetch origin production:production
+
+git-sync-dev:
+	@echo "Syncing with dev branch"
+	git fetch origin development:development

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-helpers",
-  "version": "0.2.2",
+  "version": "0.3.2",
   "description": "Helper library for microsofts fluentui react library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

src/index.ts

@@ -1,3 +1,4 @@
 export { EThemeSpacing, EThemeIconSizes, EThemeDimensions } from "@theme";
 export { useFuiProviderNode } from "@hooks";
 export { Flex, ButtonGroup } from "@components";
+export { useModalContext, ModalAnchor, ModalContextProvider } from "@preview";

src/preview/elevated-modal/ModalAnchor/anchor.css

@@ -0,0 +1,7 @@
+#modal-anchor-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

src/preview/elevated-modal/ModalAnchor/branches/Trapped.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable consistent-return */
+import { useEffect, useRef } from "react";
+import { useModalContext } from "@preview/elevated-modal/provider";
+import constants from "@preview/elevated-modal/constants";
+
+export default function Trapped() {
+  const { Modal, isActivated } = useModalContext();
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isActivated || !modalRef.current) return;
+
+    const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
+      'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])',
+    );
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    const trapFocus = (e: KeyboardEvent) => {
+      if (e.key !== "Tab") return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          lastElement.focus();
+          e.preventDefault();
+        }
+      } else if (document.activeElement === lastElement) {
+        firstElement.focus();
+        e.preventDefault();
+      }
+    };
+
+    modalRef.current.addEventListener("keydown", trapFocus);
+
+    // Focus the first element when the modal is activated
+    firstElement.focus();
+
+    return () => {
+      modalRef.current?.removeEventListener("keydown", trapFocus);
+    };
+  }, [isActivated]);
+
+  return (
+    isActivated && (
+      <div
+        id={constants.modalAnchorContainerId}
+        tabIndex={-1}
+        role="dialog"
+        ref={modalRef}
+      >
+        {Modal}
+      </div>
+    )
+  );
+}

src/preview/elevated-modal/ModalAnchor/branches/Untrapped.tsx

@@ -0,0 +1,20 @@
+import { useModalContext } from "@preview/elevated-modal/provider";
+
+import constants from "@preview/elevated-modal/constants";
+
+export default function Untrapped() {
+  const { Modal, isActivated } = useModalContext();
+
+  return (
+    isActivated && (
+      <div
+        id={constants.modalAnchorContainerId}
+        tabIndex={-1}
+        role="dialog"
+        aria-modal="true"
+      >
+        {Modal}
+      </div>
+    )
+  );
+}

src/preview/elevated-modal/ModalAnchor/branches/index.ts

@@ -0,0 +1,2 @@
+export { default as UntrappedBranch } from "@previewelevated-modal/ModalAnchor/branches/Untrapped";
+export { default as TrappedBranch } from "@previewelevated-modal/ModalAnchor/branches/Trapped";

src/preview/elevated-modal/ModalAnchor/func.tsx

@@ -0,0 +1,14 @@
+import "./anchor.css";
+
+import {
+  TrappedBranch,
+  UntrappedBranch,
+} from "@previewelevated-modal/ModalAnchor/branches";
+
+type TProps = {
+  disableTrapping?: boolean;
+};
+
+export default function ModalAnchor({ disableTrapping = false }: TProps) {
+  return disableTrapping ? <UntrappedBranch /> : <TrappedBranch />;
+}

src/preview/elevated-modal/ModalAnchor/index.ts

@@ -0,0 +1,3 @@
+import ModalAnchor from "@previewelevated-modal/ModalAnchor/func";
+
+export default ModalAnchor;

src/preview/elevated-modal/StrippedDialogSurface/func.tsx

@@ -0,0 +1,62 @@
+import type { JSX } from "react";
+
+import { mergeClasses } from "@fluentui/react-components";
+
+import { Flex } from "@components/layout";
+
+import useStrippedDialogSurfaceClasses from "@previewelevated-modal/StrippedDialogSurface/styles";
+
+type TProps = {
+  enhancementOptions?: {
+    rootSurfaceStyles?: boolean;
+    defaultDimensions?: boolean;
+    parentCentering?: boolean;
+    parentDimming?: boolean;
+  };
+  children: JSX.Element;
+  className?: string;
+};
+
+export default function StrippedDialogSurface({
+  enhancementOptions = {
+    rootSurfaceStyles: true,
+    defaultDimensions: true,
+    parentCentering: true,
+    parentDimming: true,
+  },
+  children,
+  className = undefined,
+}: TProps): JSX.Element {
+  const classes = useStrippedDialogSurfaceClasses();
+  const bareSurface = (
+    <div
+      aria-modal="true"
+      role="dialog"
+      aria-labelledby="fui-DialogTitle"
+      className={mergeClasses(
+        classes.root,
+        enhancementOptions.defaultDimensions
+          ? classes.defaultDimensions
+          : undefined,
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+  return enhancementOptions.parentCentering ? (
+    <Flex
+      className={
+        enhancementOptions.parentDimming ? classes.centerRoot : undefined
+      }
+      justifyContent="center"
+      alignItems="center"
+      shHeight="100%"
+      shWidth="100%"
+    >
+      {bareSurface}
+    </Flex>
+  ) : (
+    bareSurface
+  );
+}

src/preview/elevated-modal/StrippedDialogSurface/index.ts

@@ -0,0 +1,3 @@
+import StrippedDialogSurface from "@preview/elevated-modal/StrippedDialogSurface/func";
+
+export default StrippedDialogSurface;

src/preview/elevated-modal/StrippedDialogSurface/styles.ts

@@ -0,0 +1,29 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+import { EThemeSpacing } from "@theme/tokens";
+
+const useElevatedModalClasses = makeStyles({
+  root: {
+    padding: EThemeSpacing.XXL,
+    border: `1px solid ${tokens.colorTransparentStroke}`,
+    borderRadius: tokens.borderRadiusXLarge,
+    boxShadow: tokens.shadow64,
+    backgroundColor: tokens.colorNeutralBackground1,
+  },
+  defaultDimensions: {
+    maxWidth: "600px",
+    height: "fit-content",
+  },
+  centerRoot: {
+    // fade in animation for the modal
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    // animationName: {
+    //   to: {
+    //     backgroundColor: "rgba(0, 0, 0, 0.4)",
+    //   },
+    // },
+    // animationDuration: "0.5s",
+    // animationFillMode: "forwards",
+  },
+});
+
+export default useElevatedModalClasses;

src/preview/elevated-modal/constants.ts

@@ -0,0 +1,3 @@
+export default {
+  modalAnchorContainerId: "modal-anchor-container",
+};

src/preview/elevated-modal/index.ts

@@ -0,0 +1,18 @@
+import {
+  useModalContext,
+  ModalContextProvider,
+} from "@preview/elevated-modal/provider";
+
+import ModalAnchor from "@preview/elevated-modal/ModalAnchor";
+
+import constants from "@preview/elevated-modal/constants";
+
+import StrippedDialogSurface from "@previewelevated-modal/StrippedDialogSurface";
+
+export {
+  useModalContext,
+  ModalContextProvider,
+  ModalAnchor,
+  constants,
+  StrippedDialogSurface as EXP_StrippedDialogSurface,
+};

src/preview/elevated-modal/provider.tsx

@@ -0,0 +1,44 @@
+import { createContext, useState, useContext, useMemo } from "react";
+import type { ReactNode, JSX, Dispatch, SetStateAction } from "react";
+
+type TProps = {
+  isActivated: boolean;
+  setIsActivated: Dispatch<SetStateAction<boolean>>;
+  Modal: JSX.Element | null;
+  setModal: Dispatch<SetStateAction<JSX.Element | null>>;
+};
+
+const ModalContext = createContext<TProps | undefined>(undefined);
+
+function ModalContextProvider({ children }: { children: ReactNode }) {
+  const [Modal, setModal] = useState<JSX.Element | null>(null);
+  const [isActivated, setIsActivated] = useState(false);
+
+  const contextValue = useMemo(
+    () => ({
+      Modal,
+      setModal,
+      isActivated,
+      setIsActivated,
+    }),
+    [Modal, setModal, isActivated, setIsActivated],
+  );
+
+  return (
+    <ModalContext.Provider value={contextValue}>
+      {children}
+    </ModalContext.Provider>
+  );
+}
+
+function useModalContext() {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error(
+      "useModalContext must be used within a ModalContextProvider",
+    );
+  }
+  return context;
+}
+
+export { useModalContext, ModalContextProvider };