@simplybusiness/mobius 4.2.8 → 4.3.0

package/src/components/Modal/Modal.tsx

@@ -1,14 +1,12 @@
-/* eslint-disable no-console */
-
 "use client";
 
-// eslint-disable-next-line import/no-extraneous-dependencies
 import classNames from "classnames/dedupe";
 import {
   Children,
-  ReactEventHandler,
-  ReactNode,
+  Ref,
+  SyntheticEvent,
   cloneElement,
+  forwardRef,
   isValidElement,
   useCallback,
   useEffect,
@@ -16,52 +14,29 @@ import {
 } from "react";
 import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
 import { supportsDialog } from "../../utils/polyfill-tests";
-
-export interface ModalProps {
-  isOpen: boolean;
-  onClose?: () => void;
-  children?: ReactNode;
-  className?: string;
-  closeLabel?: string;
-  animation?: "slideUp" | "fade";
-  isFullScreen?: boolean;
-  /**
-   * **Deprecated:** No longer needed
-   */
-  size?: string;
-  /**
-   * **Deprecated:** No longer needed
-   */
-  appElement?: string;
-  /**
-   * **Deprecated:** No longer needed
-   */
-  preventCloseOnEsc?: boolean;
-  /**
-   * **Deprecated:** No longer needed
-   */
-  shouldFocusAfterRender?: boolean;
-  /**
-   * **Deprecated:** No longer needed
-   */
-  parentSelector?: () => HTMLElement;
-}
-
-const Modal = ({
-  isOpen,
-  onClose,
-  children,
-  className,
-  closeLabel,
-  isFullScreen,
-  animation,
-  // Deprecated props below
-  size,
-  appElement,
-  preventCloseOnEsc,
-  shouldFocusAfterRender,
-  parentSelector,
-}: ModalProps) => {
+import { ModalProps } from "./types";
+import { mergeRefs } from "../../utils";
+
+export type ModalElementType = HTMLDialogElement;
+export type ModalRef = Ref<ModalElementType>;
+
+const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
+  const {
+    isOpen,
+    onClose,
+    onOpen,
+    children,
+    className,
+    closeLabel,
+    isFullScreen,
+    animation,
+    // Deprecated props below
+    size,
+    appElement,
+    preventCloseOnEsc,
+    shouldFocusAfterRender,
+    parentSelector,
+  } = props;
   const hasWarnedAboutMissingLabels = useRef<boolean>(false);
   // Handle deprecated props
   if (!hasWarnedAboutMissingLabels.current) {
@@ -79,39 +54,46 @@ const Modal = ({
     }
   }
 
+  const hasOpened = useRef<boolean>(false);
   const modalRef = useRef<HTMLDialogElement>(null);
   const dialog = modalRef.current as HTMLDialogElement;
   const noPreference = window?.matchMedia(
     "(prefers-reduced-motion: no-preference)",
   );
 
+  // Fire onOpen once
+  if (onOpen && !hasOpened.current) {
+    onOpen();
+    hasOpened.current = true;
+  }
+
   useBodyScrollLock({ enabled: isOpen });
 
   // Add close handler, to enable closing animations
-  const handleClose: ReactEventHandler<HTMLDialogElement> = useCallback(
-    event => {
+  const handleClose = useCallback(
+    (event?: SyntheticEvent<HTMLElement, Event>) => {
       if (event) {
         event.preventDefault();
         event.stopPropagation();
+      }
 
-        const doClose = () => {
-          dialog.close();
-          onClose?.();
-        };
-
-        if (animation) {
-          dialog.classList.add("close");
-          dialog.addEventListener(
-            "animationend",
-            () => {
-              dialog.classList.remove("close");
-              doClose();
-            },
-            { once: true },
-          );
-        } else {
-          doClose();
-        }
+      const doClose = () => {
+        dialog?.close();
+        onClose?.();
+      };
+
+      if (animation) {
+        dialog?.classList.add("close");
+        dialog?.addEventListener(
+          "animationend",
+          () => {
+            dialog.classList.remove("close");
+            doClose();
+          },
+          { once: true },
+        );
+      } else {
+        doClose();
       }
     },
     [animation, dialog, onClose],
@@ -141,16 +123,21 @@ const Modal = ({
 
       if (isOpen) {
         modalRef.current?.showModal();
+        onOpen?.();
       } else if (modalRef.current?.open) {
-        modalRef.current?.close();
+        handleClose();
       }
     }
 
     toggleModal();
-  }, [isOpen]);
+  }, [isOpen, onOpen, handleClose]);
 
   return (
-    <dialog ref={modalRef} onCancel={handleClose} className={modalClasses}>
+    <dialog
+      ref={mergeRefs([modalRef, ref])}
+      onCancel={handleClose}
+      className={modalClasses}
+    >
       {Children.map(children, child => {
         if (isValidElement(child)) {
           return cloneElement(child, {
@@ -163,7 +150,7 @@ const Modal = ({
       })}
     </dialog>
   );
-};
+});
 
 Modal.displayName = "Modal";
 export { Modal };

package/src/components/Modal/index.tsx

@@ -8,7 +8,8 @@ import {
   HeaderElementType as ModalHeaderElementType,
   HeaderProps as ModalHeaderProps,
 } from "./Header";
-import { Modal as ModalComponent, ModalProps } from "./Modal";
+import { Modal as ModalComponent } from "./Modal";
+import { ModalProps } from "./types";
 
 const Modal = Object.assign(ModalComponent, {
   Header,

package/src/components/Modal/types.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+
+export interface ModalProps {
+  isOpen: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  children?: ReactNode;
+  className?: string;
+  closeLabel?: string;
+  animation?: "slideUp" | "fade";
+  isFullScreen?: boolean;
+  /**
+   * **Deprecated:** No longer needed
+   */
+  size?: string;
+  /**
+   * **Deprecated:** No longer needed
+   */
+  appElement?: string;
+  /**
+   * **Deprecated:** No longer needed
+   */
+  preventCloseOnEsc?: boolean;
+  /**
+   * **Deprecated:** No longer needed
+   */
+  shouldFocusAfterRender?: boolean;
+  /**
+   * **Deprecated:** No longer needed
+   */
+  parentSelector?: () => HTMLElement;
+}

package/src/components/NumberField/NumberField.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
 import { NumberField, NumberFieldProps } from "./NumberField";
-import { StoryContainer, excludeControls } from "../../utils";
 
 type StoryType = StoryObj<typeof NumberField>;
 

package/src/components/PasswordField/PasswordField.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
 import { PasswordField, PasswordFieldProps } from "./PasswordField";
-import { StoryContainer, excludeControls } from "../../utils";
 
 type StoryType = StoryObj<typeof PasswordField>;
 

package/src/components/Progress/Progress.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
 import { Progress, ProgressProps } from "./Progress";
-import { StoryContainer, excludeControls } from "../../utils";
 
 type StoryType = StoryObj<typeof Progress>;
 

package/src/components/Radio/Radio.stories.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
+import { Divider } from "../Divider";
+import { Flex } from "../Flex";
 import { Radio } from "./Radio";
 import { RadioGroup, RadioGroupProps } from "./RadioGroup";
-import { Flex } from "../Flex";
-import { Divider } from "../Divider";
-import { StoryContainer, excludeControls } from "../../utils";
 
 type StoryType = StoryObj<typeof RadioGroup>;
 

package/src/components/Radio/RadioButton.stories.tsx

@@ -1,9 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/react";
 import { menu, star, user } from "@simplybusiness/icons";
+import type { Meta, StoryObj } from "@storybook/react";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
+import { Icon } from "../Icon";
 import { RadioButton } from "./RadioButton";
 import { RadioGroup, RadioGroupProps } from "./RadioGroup";
-import { Icon } from "../Icon";
-import { StoryContainer, excludeControls } from "../../utils";
 
 type StoryType = StoryObj<typeof RadioGroup>;
 

package/src/components/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Select, SelectProps } from "./Select";
+import { StoryContainer } from "../../utils/StoryContainer";
 import { Option } from "../Option";
-import { StoryContainer } from "../../utils";
+import { Select, SelectProps } from "./Select";
 
 type StoryType = StoryObj<typeof Select>;
 

package/src/components/Slider/Slider.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { StoryContainer, excludeControls } from "../../utils";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
 import { Slider, SliderProps } from "./Slider";
 
 type StoryType = StoryObj<typeof Slider>;

package/src/components/TextArea/TextArea.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
 import { TextArea, TextAreaProps } from "./TextArea";
-import { StoryContainer, excludeControls } from "../../utils";
 
 type StoryType = StoryObj<typeof TextArea>;
 

package/src/components/TextField/TextField.stories.tsx

@@ -1,12 +1,13 @@
+import { search } from "@simplybusiness/icons";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useRef } from "react";
-import { search } from "@simplybusiness/icons";
-import { TextField, TextFieldProps } from "./TextField";
-import { StoryContainer, excludeControls } from "../../utils";
-import { Segment, SegmentGroup } from "../Segment";
-import { Icon } from "../Icon";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
 import { Button } from "../Button";
+import { Icon } from "../Icon";
+import { Segment, SegmentGroup } from "../Segment";
 import { Text } from "../Text/Text";
+import { TextField, TextFieldProps } from "./TextField";
 
 type StoryType = StoryObj<typeof TextField>;
 

package/src/hooks/useTextField/useTextField.tsx

@@ -1,7 +1,7 @@
 import { useId } from "react";
+import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { useLabel } from "../useLabel/useLabel";
 import { UseTextFieldProps, UseTextFieldReturn } from "./types";
-import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 
 export function useTextField(props: UseTextFieldProps): UseTextFieldReturn {
   const {
@@ -39,8 +39,8 @@ export function useTextField(props: UseTextFieldProps): UseTextFieldReturn {
         props.validationState === "invalid"
           ? true
           : props.validationState === "valid"
-          ? false
-          : undefined,
+            ? false
+            : undefined,
       "aria-describedby": ariaDescribedBy,
       "aria-errormessage": props["aria-errormessage"],
 

package/src/utils/index.ts

@@ -5,4 +5,3 @@ export * from "./mergeRefs";
 export * from "./polyfill-tests";
 export * from "./sizeClasses";
 export * from "./spaceDelimitedList";
-export * from "./StoryContainer";

package/src/utils/jestMockMatchMedia.ts

@@ -0,0 +1,16 @@
+export const jestMockMatchMedia = (matches: boolean) => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    configurable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+};

package/dist/cjs/utils/StoryContainer.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "StoryContainer", {
-    enumerable: true,
-    get: function() {
-        return StoryContainer;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const css = `
-  :root {
-    --story-container-width: auto;
-  }
-
-  @media (min-width: 641px) {
-    :root {
-      --story-container-width: var(--size-inner-container);
-    }
-  }
-
-  .story-container {
-    width: var(--story-container-width);
-  }
-`;
-const StoryContainer = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
-                children: css
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "story-container",
-                ...props
-            })
-        ]
-    });
-
-//# sourceMappingURL=StoryContainer.js.map

package/dist/cjs/utils/StoryContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/utils/StoryContainer.tsx"],"sourcesContent":["const css = `\n  :root {\n    --story-container-width: auto;\n  }\n\n  @media (min-width: 641px) {\n    :root {\n      --story-container-width: var(--size-inner-container);\n    }\n  }\n\n  .story-container {\n    width: var(--story-container-width);\n  }\n`;\n\nexport const StoryContainer = (props: Record<string, unknown>) => (\n  <>\n    <style>{css}</style>\n    <div className=\"story-container\" {...props} />\n  </>\n);\n"],"names":["StoryContainer","css","props","style","div","className"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;AAhBb,MAAMC,MAAM,CAAC;;;;;;;;;;;;;;AAcb,CAAC;AAEM,MAAMD,iBAAiB,CAACE,sBAC7B;;0BACE,qBAACC;0BAAOF;;0BACR,qBAACG;gBAAIC,WAAU;gBAAmB,GAAGH,KAAK"}

package/dist/esm/utils/StoryContainer.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const css = `
-  :root {
-    --story-container-width: auto;
-  }
-
-  @media (min-width: 641px) {
-    :root {
-      --story-container-width: var(--size-inner-container);
-    }
-  }
-
-  .story-container {
-    width: var(--story-container-width);
-  }
-`;
-export const StoryContainer = (props)=>/*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx("style", {
-                children: css
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "story-container",
-                ...props
-            })
-        ]
-    });
-
-//# sourceMappingURL=StoryContainer.js.map

package/dist/esm/utils/StoryContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/utils/StoryContainer.tsx"],"sourcesContent":["const css = `\n  :root {\n    --story-container-width: auto;\n  }\n\n  @media (min-width: 641px) {\n    :root {\n      --story-container-width: var(--size-inner-container);\n    }\n  }\n\n  .story-container {\n    width: var(--story-container-width);\n  }\n`;\n\nexport const StoryContainer = (props: Record<string, unknown>) => (\n  <>\n    <style>{css}</style>\n    <div className=\"story-container\" {...props} />\n  </>\n);\n"],"names":["css","StoryContainer","props","style","div","className"],"mappings":";AAAA,MAAMA,MAAM,CAAC;;;;;;;;;;;;;;AAcb,CAAC;AAED,OAAO,MAAMC,iBAAiB,CAACC,sBAC7B;;0BACE,KAACC;0BAAOH;;0BACR,KAACI;gBAAIC,WAAU;gBAAmB,GAAGH,KAAK;;;OAE5C"}