@simplybusiness/mobius 4.2.7 → 4.2.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.2.7",
+  "version": "4.2.8",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/mobius.d.ts",
+  "types": "./src/index.tsx",
   "files": [
     "src/**",
     "dist/cjs/**/*",
@@ -19,7 +19,7 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/mobius.d.ts",
+      "types": "./src/index.tsx",
       "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.js",
       "default": "./dist/esm/index.js"
@@ -28,19 +28,17 @@
   "scripts": {
     "clean": "rm -rf dist",
     "build": "yarn run -T turbo run turbo:build",
-    "build:cjs": "tsc",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "build:extract-api": "api-extractor run",
+    "build:cjs": "yarn swc --config-file ../.swcrc ./src -d ./dist/cjs -C module.type=commonjs",
+    "build:esm": "yarn swc --config-file ../.swcrc ./src -d ./dist/esm -C module.type=es6",
     "lint": "eslint --ext .tsx,.ts,.js,.jsx,.mjs .",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "test:coverage": "NODE_OPTIONS=--experimental-vm-modules jest --collect-coverage",
-    "check-types": "tsc --noEmit --emitDeclarationOnly false --pretty",
+    "check-types": "tsc --noEmit --pretty",
     "size": "turbo run turbo:size --",
     "turbo:size": "yarn workspace @simplybusiness/bundle-checker start"
   },
   "sideEffects": false,
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.39.1",
     "@react-types/button": "^3.9.1",
     "@react-types/dialog": "^3.5.7",
     "@react-types/progress": "^3.5.1",
@@ -84,6 +82,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
     "@simplybusiness/icons": "^4.2.7",
+    "@swc/cli": "^0.1.63",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/Drawer/Content.tsx

@@ -1,7 +1,6 @@
-import classNames from "classnames/dedupe";
 import {
   Children,
-  ReactNode,
+  PropsWithChildren,
   Ref,
   RefAttributes,
   cloneElement,
@@ -12,34 +11,31 @@ import { DOMProps } from "../../types/dom";
 
 export type DivRef = Ref<HTMLDivElement>;
 export type DivElementType = HTMLDivElement;
-export interface ContentProps extends DOMProps, RefAttributes<DivElementType> {
-  children?: ReactNode;
+export interface ContentProps
+  extends DOMProps,
+    RefAttributes<DivElementType>,
+    PropsWithChildren {
   onClose?: () => void;
   closeLabel?: string;
 }
 
 const Content = forwardRef(
   (
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    { children, onClose, closeLabel, ...otherProps }: ContentProps,
+    { children, onClose, closeLabel: _, ...otherProps }: ContentProps,
     ref: DivRef,
-  ) => {
-    const classes = classNames("mobius/DrawerContent");
+  ) => (
+    <div ref={ref} {...otherProps} className="mobius/DrawerContent">
+      {Children.map(children, child => {
+        if (isValidElement(child)) {
+          return cloneElement(child, {
+            onClose,
+          } as any);
+        }
 
-    return (
-      <div ref={ref} {...otherProps} className={classes}>
-        {Children.map(children, child => {
-          if (isValidElement(child)) {
-            return cloneElement(child, {
-              onClose,
-            } as any);
-          }
-
-          return child;
-        })}
-      </div>
-    );
-  },
+        return child;
+      })}
+    </div>
+  ),
 );
 
 Content.displayName = "Content";

package/src/components/Drawer/Drawer.mdx

@@ -34,7 +34,7 @@ You will also need to set some trigger element or event to show the Drawer. Ordi
 import { useState } from "react";
 import { Drawer, DrawerProps } from "@simplybusiness/mobius";
 
-const Demo = ({ direction, closeLabel }: DrawerProps) => {
+const Demo = () => {
   const [open, setOpen] = useState(false);
 
   return (
@@ -43,13 +43,11 @@ const Demo = ({ direction, closeLabel }: DrawerProps) => {
       <Drawer
         isOpen={open}
         onClose={() => setOpen(false)}
-        direction={direction}
-        closeLabel={closeLabel}
+        direction="right"
+        closeLabel="Close"
       >
         <Drawer.Header>Heading</Drawer.Header>
-        <Drawer.Content>
-          Some content in main panel.
-        </Drawer.Content>
+        <Drawer.Content>Some content in main panel.</Drawer.Content>
       </Drawer>
     </>
   );
@@ -68,7 +66,7 @@ You will also need to set some trigger element or event to show the Drawer. Ordi
 import { useState } from "react";
 import { Drawer, DrawerProps } from "@simplybusiness/mobius";
 
-const LogoHeader = ({ direction, closeLabel }: DrawerProps) => {
+const LogoHeader = () => {
   const [open, setOpen] = useState(false);
 
   return (
@@ -78,8 +76,8 @@ const LogoHeader = ({ direction, closeLabel }: DrawerProps) => {
       <Drawer
         isOpen={open}
         onClose={() => setOpen(false)}
-        direction={direction}
-        closeLabel={closeLabel}
+        direction="right"
+        closeLabel="Close"
       >
         <Drawer.Header>
           <img
@@ -87,9 +85,7 @@ const LogoHeader = ({ direction, closeLabel }: DrawerProps) => {
             alt="Provider logo"
           />
         </Drawer.Header>
-        <Drawer.Content>
-          Some content in main panel.
-        </Drawer.Content>
+        <Drawer.Content>Some content in main panel.</Drawer.Content>
       </Drawer>
     </>
   );

package/src/components/Drawer/Drawer.stories.tsx

@@ -15,21 +15,16 @@ const meta: Meta<typeof Drawer> = {
       options: ["top", "bottom", "left", "right"],
       control: { type: "radio" },
     },
-    ...excludeControls("isOpen"),
+    ...excludeControls("isOpen", "closeLabel", "announce"),
   },
 };
 
-const Demo = ({ direction, closeLabel }: DrawerProps) => {
+const Demo = (props: DrawerProps) => {
   const [open, setOpen] = useState(false);
   return (
     <>
       <Button onClick={() => setOpen(true)}>Show Drawer</Button>
-      <Drawer
-        isOpen={open}
-        onClose={() => setOpen(false)}
-        direction={direction}
-        closeLabel={closeLabel}
-      >
+      <Drawer onClose={() => setOpen(false)} {...props} isOpen={open}>
         <Drawer.Header>The Latin Drawer</Drawer.Header>
         <Drawer.Content>
           Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed
@@ -67,12 +62,12 @@ const LogoHeader = ({ direction, closeLabel }: DrawerProps) => {
   );
 };
 
-const WithLongContentDemo = (props: DrawerProps) => {
+const WithLongContentDemo = () => {
   const [open, setOpen] = useState(false);
   return (
     <>
       <Button onClick={() => setOpen(true)}>Show Drawer</Button>
-      <Drawer {...props} isOpen={open} onClose={() => setOpen(false)}>
+      <Drawer direction="right" isOpen={open} onClose={() => setOpen(false)}>
         <Drawer.Header>
           Aliquam fringilla quam vel purus rhoncus isuere. Morbi augue augue,
           venenatis vel consectetur sed, vulputate et lorem. Int
@@ -150,7 +145,6 @@ const WithLongContentDemo = (props: DrawerProps) => {
 export const Normal: StoryType = {
   render: (args: DrawerProps) => <Demo {...args} />,
   args: {
-    isOpen: false,
     direction: "right",
     closeLabel: "Close",
   },
@@ -159,18 +153,14 @@ export const Normal: StoryType = {
 export const WithLogoHeader: StoryType = {
   render: (args: DrawerProps) => <LogoHeader {...args} />,
   args: {
-    isOpen: false,
     direction: "right",
     closeLabel: "Close",
   },
 };
 
 export const WithLongContent: StoryType = {
-  render: (args: DrawerProps) => <WithLongContentDemo {...args} />,
-  args: {
-    isOpen: false,
-    direction: "right",
-  },
+  render: () => <WithLongContentDemo />,
+  args: {},
 };
 
 export default meta;

package/src/components/Drawer/Drawer.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useState } from "react";
 import { Drawer } from ".";
@@ -60,7 +60,7 @@ describe("Drawer", () => {
     render(
       <Drawer
         direction="right"
-        className="my-test-modal"
+        className="my-test-drawer"
         isOpen
         onClose={() => {}}
       >
@@ -72,7 +72,7 @@ describe("Drawer", () => {
     const closeButton = screen.getByLabelText("Close");
 
     expect(dialog).toHaveClass(DRAWER_CLASS_NAME);
-    expect(dialog).toHaveClass("my-test-modal");
+    expect(dialog).toHaveClass("my-test-drawer");
     expect(closeButton).toHaveClass(DRAWER_CLOSE_CLASS_NAME);
   });
 
@@ -115,8 +115,8 @@ describe("Drawer", () => {
     });
   });
 
-  xdescribe("pressing close button", () => {
-    it("should close the modal", async () => {
+  describe("pressing close button", () => {
+    it("should close the drawer", async () => {
       const App = () => {
         const [isOpen, setIsOpen] = useState<boolean>(true);
 
@@ -134,10 +134,16 @@ describe("Drawer", () => {
 
       render(<App />);
 
-      const modalContent = screen.getByText("Sample content");
-      expect(modalContent).toBeInTheDocument();
+      const dialog = screen.getByRole("dialog");
+      const drawerContent = screen.getByText("Sample content");
+
+      expect(dialog).toHaveAttribute("open");
+      expect(drawerContent).toBeInTheDocument();
+
       const closeButton = screen.getByLabelText("Close");
       await userEvent.click(closeButton);
+
+      waitFor(() => expect(dialog).not.toHaveAttribute("open"));
     });
   });
 
@@ -182,12 +188,12 @@ describe("Drawer", () => {
       return (
         <>
           <button
-            aria-label="Show modal"
+            aria-label="Show drawer"
             id="btn"
             type="button"
             onClick={() => setIsOpen(true)}
           >
-            Show modal
+            Show drawer
           </button>
 
           <Drawer
@@ -205,7 +211,7 @@ describe("Drawer", () => {
 
     render(<App />);
 
-    const showBtn = screen.getByText("Show modal");
+    const showBtn = screen.getByText("Show drawer");
 
     expect(showBtn).toBeInTheDocument();
     await userEvent.click(showBtn);

package/src/components/Drawer/Drawer.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,
@@ -17,34 +15,23 @@ import {
 import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
 import { supportsDialog } from "../../utils/polyfill-tests";
 import { VisuallyHidden } from "../VisuallyHidden";
+import { DrawerProps } from "./types";
+import { mergeRefs } from "../../utils";
 
-export interface DrawerProps {
-  isOpen: boolean;
-  /**
-   * Direction that drawer will open from
-   */
-  direction: "top" | "bottom" | "left" | "right";
-  className?: string;
-  closeLabel?: string;
-  /**
-   * Announce text for screen readers when drawer opens
-   */
-  announce?: string;
-  onOpen?: () => void;
-  onClose?: () => void;
-  children?: ReactNode;
-}
+export type DialogElementType = HTMLDialogElement;
+export type DialogRef = Ref<DialogElementType>;
 
-const Drawer = ({
-  isOpen,
-  className,
-  closeLabel,
-  direction,
-  announce = "Drawer opened on screen",
-  onOpen,
-  onClose,
-  children,
-}: DrawerProps) => {
+const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
+  const {
+    isOpen,
+    className,
+    closeLabel,
+    direction,
+    announce = "Drawer opened on screen",
+    onOpen,
+    onClose,
+    children,
+  } = props;
   const hasOpened = useRef<boolean>(false);
   const modalRef = useRef<HTMLDialogElement>(null);
   const dialog = modalRef.current as HTMLDialogElement;
@@ -58,28 +45,28 @@ const Drawer = ({
   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?.();
-        };
-
-        // Delay close to allow exit animation
-        dialog.classList.add("close");
-        dialog.addEventListener(
-          "animationend",
-          () => {
-            dialog.classList.remove("close");
-            doClose();
-          },
-          { once: true },
-        );
       }
+
+      const doClose = () => {
+        dialog.close();
+        onClose?.();
+      };
+
+      // Delay close to allow exit animation
+      dialog?.classList.add("close");
+      dialog?.addEventListener(
+        "animationend",
+        () => {
+          dialog.classList.remove("close");
+          doClose();
+        },
+        { once: true },
+      );
     },
     [onClose, dialog],
   );
@@ -104,16 +91,16 @@ const Drawer = ({
         modalRef.current?.showModal();
         onOpen?.();
       } else if (modalRef.current?.open) {
-        modalRef.current?.close();
+        handleClose();
       }
     }
 
     toggleModal();
-  }, [isOpen, onOpen]);
+  }, [isOpen, onOpen, handleClose]);
 
   return (
     <dialog
-      ref={modalRef}
+      ref={mergeRefs([modalRef, ref])}
       onCancel={handleClose}
       className={modalClasses}
       aria-describedby="screen-reader-announce"
@@ -133,7 +120,7 @@ const Drawer = ({
       })}
     </dialog>
   );
-};
+});
 
 Drawer.displayName = "Drawer";
 export { Drawer };

package/src/components/Drawer/Header.tsx

@@ -1,5 +1,4 @@
-import classNames from "classnames/dedupe";
-import { ReactNode, Ref, RefAttributes, forwardRef } from "react";
+import { PropsWithChildren, Ref, RefAttributes, forwardRef } from "react";
 
 import { cross } from "@simplybusiness/icons";
 import { DOMProps } from "../../types/dom";
@@ -11,8 +10,8 @@ export type HeaderRef = Ref<HTMLElement>;
 
 export interface HeaderProps
   extends DOMProps,
-    RefAttributes<HeaderElementType> {
-  children?: ReactNode;
+    RefAttributes<HeaderElementType>,
+    PropsWithChildren {
   onClose?: () => void;
   closeLabel?: string;
 }
@@ -21,24 +20,19 @@ const Header = forwardRef(
   (
     { children, onClose, closeLabel, ...otherProps }: HeaderProps,
     ref: HeaderRef,
-  ) => {
-    const classes = classNames("mobius/DrawerHeader");
-    const closeClasses = classNames("mobius/DrawerClose");
-
-    return (
-      <header ref={ref} {...otherProps} className={classes}>
-        {children}
-        <Button
-          aria-label="Close"
-          variant="basic"
-          onPress={onClose}
-          className={closeClasses}
-        >
-          <Icon icon={cross} /> {closeLabel}
-        </Button>
-      </header>
-    );
-  },
+  ) => (
+    <header ref={ref} {...otherProps} className="mobius/DrawerHeader">
+      {children}
+      <Button
+        aria-label="Close"
+        variant="basic"
+        onPress={onClose}
+        className="mobius/DrawerClose"
+      >
+        <Icon icon={cross} /> {closeLabel}
+      </Button>
+    </header>
+  ),
 );
 
 Header.displayName = "Header";

package/src/components/Drawer/index.tsx

@@ -3,7 +3,8 @@ import {
   DivElementType as DrawerContentDivElementType,
   ContentProps as DrawerContentProps,
 } from "./Content";
-import { Drawer as DrawerComponent, DrawerProps } from "./Drawer";
+import { Drawer as DrawerComponent } from "./Drawer";
+import { DrawerProps } from "./types";
 import {
   HeaderElementType as DrawerHeaderElementType,
   HeaderProps as DrawerHeaderProps,

package/src/components/Drawer/types.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+export interface DrawerProps {
+  isOpen: boolean;
+  /**
+   * Direction that drawer will open from
+   */
+  direction: "top" | "bottom" | "left" | "right";
+  className?: string;
+  closeLabel?: string;
+  /**
+   * Announce text for screen readers when drawer opens
+   */
+  announce?: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+  children?: ReactNode;
+}

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { chevronDown } from "@simplybusiness/icons";
-import { forwardRef } from "react";
+import { Ref, forwardRef } from "react";
 import classNames from "classnames/dedupe";
 import { DropdownMenu, DropdownMenuProps } from ".";
 import { Icon } from "../Icon";
@@ -31,17 +31,20 @@ type CustomTriggerProps = {
   open?: boolean;
 };
 
-const CustomTrigger = forwardRef((props: CustomTriggerProps) => {
-  const { className, open, ...otherProps } = props;
-  const classes = classNames({
-    "--is-open": open,
-  });
-  return (
-    <button type="button" className={className} {...otherProps}>
-      {open ? "Close" : "Open"} <Icon icon={chevronDown} className={classes} />
-    </button>
-  );
-});
+const CustomTrigger = forwardRef(
+  (props: CustomTriggerProps, ref: Ref<HTMLButtonElement>) => {
+    const { className, open, ...otherProps } = props;
+    const classes = classNames({
+      "--is-open": open,
+    });
+    return (
+      <button ref={ref} type="button" className={className} {...otherProps}>
+        {open ? "Close" : "Open"}{" "}
+        <Icon icon={chevronDown} className={classes} />
+      </button>
+    );
+  },
+);
 
 export const Normal: StoryType = {
   render: (args: DropdownMenuProps) => (

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/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;