@simplybusiness/mobius 3.6.2 → 3.8.0

package/dist/mobius.d.ts

@@ -2,10 +2,10 @@
 
 import { AriaBreadcrumbItemProps } from '@react-types/breadcrumbs';
 import { AriaBreadcrumbsProps } from '@react-types/breadcrumbs';
-import type { AriaButtonProps } from '@react-types/button';
 import type { AriaCheckboxGroupProps } from '@react-types/checkbox';
 import { AriaCheckboxProps } from '@react-types/checkbox';
 import { AriaDatePickerProps } from '@react-aria/datepicker';
+import { AriaFocusRingProps } from '@react-aria/focus';
 import { AriaLinkProps } from '@react-types/link';
 import { AriaNumberFieldProps } from '@react-aria/numberfield';
 import type { AriaProgressBarProps } from '@react-types/progress';
@@ -27,6 +27,7 @@ import { HoverProps } from '@react-aria/interactions';
 import { HTMLAttributeAnchorTarget } from 'react';
 import { HTMLInputTypeAttribute } from 'react';
 import { IconName } from '@simplybusiness/icons';
+import { JSXElementConstructor } from 'react';
 import { LabelableProps } from '@react-types/shared';
 import { Link as Link_2 } from 'react-router-dom';
 import { parseDate } from '@internationalized/date';
@@ -171,7 +172,7 @@ export declare const Button: ForwardedRefComponent<ButtonProps, ButtonElementTyp
 
 export declare type ButtonElementType = HTMLButtonElement;
 
-export declare interface ButtonProps extends Omit<AriaButtonProps<"button" | "a" | "span">, "aria-haspopup" | "aria-expanded">, DOMProps, RefAttributes<ButtonElementType> {
+export declare interface ButtonProps extends UseButtonProps, AriaFocusRingProps, DOMProps, RefAttributes<ButtonElementType> {
     /** Custom class name for setting specific CSS */
     className?: string;
     /** Shortlist of styles */
@@ -1224,8 +1225,48 @@ declare type UrlProps = {
     allOccupations: string;
 };
 
+export declare function useBodyScrollLock({ enabled, }?: {
+    enabled?: boolean;
+}): void;
+
 export declare const useBreakpoint: () => BreakpointType;
 
+export declare function useButton({ elementType, type, isDisabled, href, target, rel, role, onClick, onPress, }: UseButtonProps): {
+    buttonProps: {
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        type: "button" | "reset" | "submit";
+        role?: undefined;
+        href: string | undefined;
+        target: string | undefined;
+        rel: string | undefined;
+        tabIndex: number;
+        disabled: true | undefined;
+        "aria-disabled": true | undefined;
+    } | {
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        role: string | undefined;
+        type?: undefined;
+        href: string | undefined;
+        target: string | undefined;
+        rel: string | undefined;
+        tabIndex: number;
+        disabled: true | undefined;
+        "aria-disabled": true | undefined;
+    };
+};
+
+export declare interface UseButtonProps {
+    elementType?: "button" | "a" | "span" | "input" | JSXElementConstructor<any> | undefined;
+    type?: "button" | "submit" | "reset";
+    isDisabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    href?: string;
+    target?: string;
+    rel?: string;
+    role?: string;
+}
+
 export declare const useHideColumns: {
     (setHiddenColumns: (cols: string[]) => void, collapseData?: CollapseDataType): void;
     displayName: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "3.6.2",
+  "version": "3.8.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Button/Button.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import { Ref, forwardRef, RefAttributes, useRef, ReactNode } from "react";
-import { useButton } from "@react-aria/button";
+import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
 import { useHover } from "@react-aria/interactions";
-import type { AriaButtonProps } from "@react-types/button";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
-import { useFocusRing } from "@react-aria/focus";
+import { AriaFocusRingProps, useFocusRing } from "@react-aria/focus";
 import type { IconName } from "@simplybusiness/icons";
 import { ForwardedRefComponent } from "../../types/components";
 import { Loading } from "./Loading";
 import { Icon } from "../Icon";
+import { UseButtonProps, useButton } from "../../hooks/useButton";
 
 export type ButtonElementType = HTMLButtonElement;
 
@@ -25,10 +24,8 @@ export type Variant =
 export type Size = "small" | "medium" | "large";
 
 export interface ButtonProps
-  extends Omit<
-      AriaButtonProps<"button" | "a" | "span">,
-      "aria-haspopup" | "aria-expanded"
-    >,
+  extends UseButtonProps,
+    AriaFocusRingProps,
     DOMProps,
     RefAttributes<ButtonElementType> {
   /** Custom class name for setting specific CSS */
@@ -60,35 +57,14 @@ const Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =
       size = "medium",
       icon,
       iconPosition = "left",
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onPress,
-      onPressChange,
-      onPressEnd,
-      onPressStart,
-      onPressUp,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onClick,
       ...otherProps
     } = props;
-    const refObj = useRef(null);
-    const { hoverProps, isHovered } = useHover({
-      ...props,
-      isDisabled,
-    });
-    const { buttonProps } = useButton(
-      {
-        onPress,
-        onPressChange,
-        onPressEnd,
-        onPressStart,
-        onPressUp,
-        isDisabled,
-      },
-      refObj,
-    );
-    const mergedButtonProps = {
-      ...buttonProps,
-      onClick: (event: React.MouseEvent<HTMLButtonElement>) =>
-        onClick?.(event) || buttonProps.onClick?.(event),
-    };
+    const { hoverProps, isHovered } = useHover(props);
+    const { buttonProps } = useButton(props);
 
     const { focusProps, isFocusVisible } = useFocusRing(props);
 
@@ -118,7 +94,7 @@ const Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =
     return (
       <Component
         ref={ref}
-        {...mergedButtonProps}
+        {...buttonProps}
         {...hoverProps}
         {...focusProps}
         {...otherProps}

package/src/components/DatePicker/DatePicker.tsx

@@ -77,6 +77,7 @@ export function DatePicker(props: DatePickerProps) {
           className={dateFieldGroupClasses}
         >
           <DateField {...fieldProps} className={dateFieldClasses} />
+          {/* @ts-expect-error wrong type for onPress */}
           <Button
             variant="secondary"
             {...buttonProps}

package/src/components/Modal/Modal.tsx

@@ -11,6 +11,7 @@ import ReactModal from "react-modal";
 import clsx from "clsx";
 import { SizeType } from "../../types/size";
 import { sizeClasses } from "../../utils/sizeClasses";
+import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
 
 export type ModalSizeType = SizeType | "fullscreen";
 export interface ModalProps {
@@ -46,6 +47,7 @@ const Modal = ({
     "(prefers-reduced-motion: no-preference)",
   );
   const shouldAnimate = noPreference.matches && !!animation;
+  useBodyScrollLock({ enabled: isOpen });
 
   const modalClasses = clsx(
     "mobius",

package/src/hooks/index.tsx

@@ -1,2 +1,4 @@
 export * from "./useBreakpoint";
 export * from "./useHideColumns";
+export * from "./useButton";
+export * from "./useBodyScrollLock";

package/src/hooks/useBodyScrollLock/index.ts

@@ -0,0 +1 @@
+export * from "./useBodyScrollLock";

package/src/hooks/useBodyScrollLock/useBodyScrollLock.test.ts

@@ -0,0 +1,34 @@
+import { renderHook } from "@testing-library/react";
+import { useBodyScrollLock } from "./useBodyScrollLock";
+
+describe("useBodyScrollLock", () => {
+  it("should be defined", () => {
+    expect(useBodyScrollLock).toBeDefined();
+  });
+
+  it("should not throw", () => {
+    expect(() => renderHook(() => useBodyScrollLock())).not.toThrow();
+  });
+
+  it("should disable scroll by default", () => {
+    renderHook(() => useBodyScrollLock());
+    expect(document.body.style.overflow).toBe("hidden");
+  });
+
+  it("should disable scroll when enabled is true", () => {
+    renderHook(() => useBodyScrollLock({ enabled: true }));
+    expect(document.body.style.overflow).toBe("hidden");
+  });
+
+  it("should enable scroll when enabled is false", () => {
+    renderHook(() => useBodyScrollLock({ enabled: false }));
+    expect(document.body.style.overflow).toBe("");
+  });
+
+  it("should enable scroll on unmount", () => {
+    const { unmount } = renderHook(() => useBodyScrollLock());
+    expect(document.body.style.overflow).toBe("hidden");
+    unmount();
+    expect(document.body.style.overflow).toBe("");
+  });
+});

package/src/hooks/useBodyScrollLock/useBodyScrollLock.ts

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+export function useBodyScrollLock({
+  enabled = true,
+}: { enabled?: boolean } = {}) {
+  function disableScrollLock() {
+    document.body.style.removeProperty("overflow");
+  }
+
+  function enableScrollLock() {
+    document.body.style.overflow = "hidden";
+  }
+
+  useEffect(() => {
+    if (enabled) {
+      enableScrollLock();
+    } else {
+      disableScrollLock();
+    }
+
+    return () => {
+      disableScrollLock();
+    };
+  }, [enabled]);
+}

package/src/hooks/useButton/index.tsx

@@ -0,0 +1 @@
+export * from "./useButton";

package/src/hooks/useButton/useButton.test.tsx

@@ -0,0 +1,183 @@
+import { renderHook } from "@testing-library/react";
+import { useButton } from "./useButton";
+
+describe("useButton", () => {
+  it("should return an object", () => {
+    const { result } = renderHook(() => useButton({}));
+    expect(result.current).toBeInstanceOf(Object);
+  });
+
+  it("should return an object with buttonProps", () => {
+    const { result } = renderHook(() => useButton({}));
+    expect(result.current).toHaveProperty("buttonProps");
+  });
+
+  describe("type", () => {
+    it("should return an object with buttonProps with type property", () => {
+      const { result } = renderHook(() => useButton({}));
+      expect(result.current.buttonProps).toHaveProperty("type");
+    });
+
+    it("should return an object with buttonProps with type set to button when elementType is button", () => {
+      const { result } = renderHook(() => useButton({ elementType: "button" }));
+      expect(result.current.buttonProps).toHaveProperty("type", "button");
+    });
+
+    it("should return an object with buttonProps with type set to passed in type when elementType is button", () => {
+      const { result } = renderHook(() => useButton({ type: "submit" }));
+      expect(result.current.buttonProps).toHaveProperty("type", "submit");
+    });
+
+    it("should return an object without buttonProps with type property when elementType is not button", () => {
+      const { result } = renderHook(() => useButton({ elementType: "a" }));
+      expect(result.current.buttonProps).not.toHaveProperty("type");
+    });
+  });
+
+  describe("isDisabled", () => {
+    it("should return an object with buttonProps with disabled property set to undefined", () => {
+      const { result } = renderHook(() => useButton({}));
+      expect(result.current.buttonProps).toHaveProperty("disabled", undefined);
+    });
+
+    it("should return an object with buttonProps with disabled set to true when isDisabled is set to true", () => {
+      const { result } = renderHook(() => useButton({ isDisabled: true }));
+      expect(result.current.buttonProps).toHaveProperty("disabled", true);
+    });
+
+    it("should return an object with buttonProps with aria-disabled property set to undefined", () => {
+      const { result } = renderHook(() => useButton({}));
+      expect(result.current.buttonProps).toHaveProperty(
+        "aria-disabled",
+        undefined,
+      );
+    });
+
+    it("should return an object with buttonProps with aria-disabled property set to true when isDisabled is set to true", () => {
+      const { result } = renderHook(() => useButton({ isDisabled: true }));
+      expect(result.current.buttonProps).toHaveProperty("aria-disabled", true);
+    });
+  });
+
+  describe("href", () => {
+    describe("when elementType is a", () => {
+      it("should return an object with buttonProps with href property set to undefined", () => {
+        const { result } = renderHook(() => useButton({}));
+        expect(result.current.buttonProps).toHaveProperty("href", undefined);
+      });
+
+      it("should return an object with buttonProps with href property set to passed in href", () => {
+        const { result } = renderHook(() =>
+          useButton({ elementType: "a", href: "test" }),
+        );
+        expect(result.current.buttonProps).toHaveProperty("href", "test");
+      });
+    });
+
+    describe("when elementType is not a", () => {
+      it("should return an object with buttonProps with href property set to undefined", () => {
+        const { result } = renderHook(() =>
+          useButton({ elementType: "button" }),
+        );
+        expect(result.current.buttonProps).toHaveProperty("href", undefined);
+      });
+    });
+  });
+
+  describe("target", () => {
+    describe("when elementType is a", () => {
+      it("should return an object with buttonProps with target property set to undefined", () => {
+        const { result } = renderHook(() => useButton({}));
+        expect(result.current.buttonProps).toHaveProperty("target", undefined);
+      });
+
+      it("should return an object with buttonProps with target property set to passed in target", () => {
+        const { result } = renderHook(() =>
+          useButton({ elementType: "a", target: "test" }),
+        );
+        expect(result.current.buttonProps).toHaveProperty("target", "test");
+      });
+    });
+
+    describe("when elementType is not a", () => {
+      it("should return an object with buttonProps with target property set to undefined", () => {
+        const { result } = renderHook(() =>
+          useButton({ elementType: "button" }),
+        );
+        expect(result.current.buttonProps).toHaveProperty("target", undefined);
+      });
+    });
+  });
+
+  describe("rel", () => {
+    describe("when elementType is a", () => {
+      it("should return an object with buttonProps with rel property set to undefined", () => {
+        const { result } = renderHook(() => useButton({}));
+        expect(result.current.buttonProps).toHaveProperty("rel", undefined);
+      });
+
+      it("should return an object with buttonProps with rel property set to passed in rel", () => {
+        const { result } = renderHook(() =>
+          useButton({ elementType: "a", rel: "test" }),
+        );
+        expect(result.current.buttonProps).toHaveProperty("rel", "test");
+      });
+    });
+
+    describe("when elementType is not a", () => {
+      it("should return an object with buttonProps with rel property set to undefined", () => {
+        const { result } = renderHook(() =>
+          useButton({ elementType: "button" }),
+        );
+        expect(result.current.buttonProps).toHaveProperty("rel", undefined);
+      });
+    });
+  });
+
+  describe("events", () => {
+    it("should return an object with buttonProps with onClick property", () => {
+      const { result } = renderHook(() => useButton({}));
+      expect(result.current.buttonProps).toHaveProperty("onClick");
+    });
+
+    describe("onClick", () => {
+      it("should call onClick when buttonProps onClick is called", () => {
+        const onClick = jest.fn();
+        const { result } = renderHook(() => useButton({ onClick }));
+        // @ts-expect-error - We don't care about the event argument
+        result.current.buttonProps.onClick();
+        expect(onClick).toHaveBeenCalled();
+      });
+
+      it("should not call onClick when buttonProps onClick is called and isDisabled is true", () => {
+        const onClick = jest.fn();
+        const { result } = renderHook(() =>
+          useButton({ onClick, isDisabled: true }),
+        );
+        // @ts-expect-error - We don't care about the event argument
+        result.current.buttonProps.onClick();
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("onPress", () => {
+      it("should call onPress when buttonProps onClick is called", () => {
+        const onPress = jest.fn();
+        const { result } = renderHook(() => useButton({ onPress }));
+        // @ts-expect-error - We don't care about the event argument
+        result.current.buttonProps.onClick();
+        expect(onPress).toHaveBeenCalled();
+      });
+
+      it("should not call onPress when buttonProps onClick is called and isDisabled is true", () => {
+        const onPress = jest.fn();
+        const { result } = renderHook(() =>
+          useButton({ onPress, isDisabled: true }),
+        );
+        // @ts-expect-error - We don't care about the event argument
+        result.current.buttonProps.onClick();
+        expect(onPress).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/hooks/useButton/useButton.tsx

@@ -0,0 +1,75 @@
+import { JSXElementConstructor, useCallback } from "react";
+
+export interface UseButtonProps {
+  elementType?:
+    | "button"
+    | "a"
+    | "span"
+    | "input"
+    | JSXElementConstructor<any>
+    | undefined;
+  type?: "button" | "submit" | "reset";
+  isDisabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  href?: string;
+  target?: string;
+  rel?: string;
+  role?: string;
+}
+
+export function useButton({
+  elementType = "button",
+  type = "button",
+  isDisabled = false,
+  href,
+  target,
+  rel,
+  role,
+  onClick,
+  onPress,
+}: UseButtonProps) {
+  const realOnClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (isDisabled) {
+        return;
+      }
+
+      onClick?.(event);
+      onPress?.(event);
+    },
+    [isDisabled, onClick, onPress],
+  );
+
+  function getRole() {
+    if (role) {
+      return role;
+    }
+
+    if (elementType === "a") {
+      return undefined;
+    }
+
+    return "button";
+  }
+
+  const extraProps =
+    elementType === "button"
+      ? { type }
+      : {
+          role: getRole(),
+        };
+
+  return {
+    buttonProps: {
+      href: elementType === "a" ? href : undefined,
+      target: elementType === "a" ? target : undefined,
+      rel: elementType === "a" ? rel : undefined,
+      tabIndex: isDisabled ? -1 : 0,
+      disabled: isDisabled || undefined,
+      "aria-disabled": isDisabled || undefined,
+      ...extraProps,
+      onClick: realOnClick,
+    },
+  };
+}