@simplybusiness/mobius 4.2.7 → 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/StoryContainer.tsx

@@ -1,5 +1,22 @@
-import styles from "./StoryContainer.module.css";
+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: Record<string, unknown>) => (
-  <div className={styles.storyContainer} {...props} />
+  <>
+    <style>{css}</style>
+    <div className="story-container" {...props} />
+  </>
 );

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/components/Accordion/Accordion.d.ts

@@ -1,34 +0,0 @@
-import { ReactNode, Ref, RefAttributes } from "react";
-import { ForwardedRefComponent } from "../../types/components";
-import { DOMProps } from "../../types/dom";
-export type AccordionElementType = HTMLDivElement;
-export type AccordionRef = Ref<AccordionElementType>;
-export interface AccordionLinkProps extends DOMProps {
-    /** Link text to show accordion content */
-    text?: string;
-    onClick?: () => void;
-    toggle: () => void;
-    headerChildren?: ReactNode;
-    ariaExpanded: boolean | undefined;
-}
-export interface AccordionProps extends DOMProps, RefAttributes<AccordionElementType> {
-    /** Custom class name for setting specific CSS */
-    className?: string;
-    /** Link text to show accordion content */
-    showText?: string;
-    /** Link text to hide accordion content */
-    hideText?: string;
-    /** Whether header is above or below content */
-    headerPosition?: "top" | "bottom";
-    /** Whether to expand the accordion initially */
-    startOpen?: boolean | undefined;
-    /** Callback that fires each time the accordion is opened */
-    onOpen?: () => void;
-    /** Callback that fires each time the accordion is closed */
-    onClose?: () => void;
-    /** Callback that fires each time the accordion state changes */
-    onChange?: (state: boolean) => void;
-    children?: ReactNode;
-    headerChildren?: ReactNode;
-}
-export declare const Accordion: ForwardedRefComponent<AccordionProps, AccordionElementType>;

package/dist/cjs/components/Accordion/Accordion.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Accordion } from "..";
-type StoryType = StoryObj<typeof Accordion>;
-declare const meta: Meta<typeof Accordion>;
-export declare const Normal: StoryType;
-export declare const StartExpanded: StoryType;
-export declare const BottomHeader: StoryType;
-export declare const WithChildren: StoryType;
-export declare const ComplexContent: StoryType;
-export default meta;

package/dist/cjs/components/Accordion/Accordion.stories.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComplexContent = exports.WithChildren = exports.BottomHeader = exports.StartExpanded = exports.Normal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const __1 = require("..");
-const utils_1 = require("../../utils");
-const meta = {
-    title: "Components/Accordion",
-    component: __1.Accordion,
-    argTypes: (0, utils_1.excludeControls)("headerChildren"),
-    decorators: [
-        Story => ((0, jsx_runtime_1.jsx)("div", { style: { minHeight: 150 }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
-    ],
-};
-exports.Normal = {
-    render: (args) => ((0, jsx_runtime_1.jsxs)(__1.Accordion, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus deleniti architecto" }), (0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus deleniti architecto" })] }))),
-    args: {
-        showText: "See more",
-        hideText: "See less",
-        headerPosition: "top",
-        startOpen: false,
-    },
-};
-exports.StartExpanded = {
-    render: (args) => ((0, jsx_runtime_1.jsx)(__1.Accordion, Object.assign({}, args, { children: (0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus deleniti architecto" }) }))),
-    args: {
-        showText: "See more",
-        hideText: "See less",
-        headerPosition: "top",
-        startOpen: true,
-    },
-};
-exports.BottomHeader = {
-    render: (args) => ((0, jsx_runtime_1.jsx)(__1.Accordion, Object.assign({}, args, { children: (0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus deleniti architecto" }) }))),
-    args: {
-        showText: "See more",
-        hideText: "See less",
-        headerPosition: "bottom",
-        startOpen: false,
-    },
-};
-exports.WithChildren = {
-    render: (args) => ((0, jsx_runtime_1.jsx)(__1.Accordion, Object.assign({}, args, { children: (0, jsx_runtime_1.jsx)("p", { children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus deleniti architecto" }) }))),
-    args: {
-        showText: "See more",
-        hideText: "See less",
-        headerPosition: "top",
-        headerChildren: (0, jsx_runtime_1.jsx)(__1.Button, { children: "Go" }),
-        startOpen: false,
-    },
-};
-exports.ComplexContent = {
-    render: (args) => ((0, jsx_runtime_1.jsx)(__1.Accordion, Object.assign({}, args, { children: (0, jsx_runtime_1.jsxs)(__1.SegmentGroup, { children: [(0, jsx_runtime_1.jsx)(__1.Segment, { children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus deleniti architecto" }), (0, jsx_runtime_1.jsx)(__1.Segment, { children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi repellendus deleniti architecto" })] }) }))),
-    args: {
-        showText: "See more",
-        hideText: "See less",
-        headerPosition: "top",
-        startOpen: false,
-    },
-};
-exports.default = meta;
-//# sourceMappingURL=Accordion.stories.js.map

package/dist/cjs/components/Accordion/Accordion.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.stories.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":";;;;AACA,0BAA8E;AAC9E,uCAA8C;AAI9C,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,aAAS;IACpB,QAAQ,EAAE,IAAA,uBAAe,EAAC,gBAAgB,CAAC;IAC3C,UAAU,EAAE;QACV,KAAK,CAAC,EAAE,CAAC,CACP,gCAAK,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,YAC5B,uBAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEW,QAAA,MAAM,GAAc;IAC/B,MAAM,EAAE,CAAC,IAAoB,EAAE,EAAE,CAAC,CAChC,wBAAC,aAAS,oBAAK,IAAI,eACjB,4IAGI,EACJ,4IAGI,KACM,CACb;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,KAAK;QACrB,SAAS,EAAE,KAAK;KACjB;CACF,CAAC;AAEW,QAAA,aAAa,GAAc;IACtC,MAAM,EAAE,CAAC,IAAoB,EAAE,EAAE,CAAC,CAChC,uBAAC,aAAS,oBAAK,IAAI,cACjB,4IAGI,IACM,CACb;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,KAAK;QACrB,SAAS,EAAE,IAAI;KAChB;CACF,CAAC;AAEW,QAAA,YAAY,GAAc;IACrC,MAAM,EAAE,CAAC,IAAoB,EAAE,EAAE,CAAC,CAChC,uBAAC,aAAS,oBAAK,IAAI,cACjB,4IAGI,IACM,CACb;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,KAAK;KACjB;CACF,CAAC;AAEW,QAAA,YAAY,GAAc;IACrC,MAAM,EAAE,CAAC,IAAoB,EAAE,EAAE,CAAC,CAChC,uBAAC,aAAS,oBAAK,IAAI,cACjB,4IAGI,IACM,CACb;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,KAAK;QACrB,cAAc,EAAE,uBAAC,UAAM,qBAAY;QACnC,SAAS,EAAE,KAAK;KACjB;CACF,CAAC;AAEW,QAAA,cAAc,GAAc;IACvC,MAAM,EAAE,CAAC,IAAoB,EAAE,EAAE,CAAC,CAChC,uBAAC,aAAS,oBAAK,IAAI,cACjB,wBAAC,gBAAY,eACX,uBAAC,WAAO,kHAGE,EACV,uBAAC,WAAO,kHAGE,IACG,IACL,CACb;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,KAAK;QACrB,SAAS,EAAE,KAAK;KACjB;CACF,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/cjs/components/Accordion/Accordion.test.d.ts

@@ -1 +0,0 @@
-export {};