@simplybusiness/mobius 4.4.6 → 4.5.0

package/dist/types/components/Modal/useModal.d.ts

@@ -0,0 +1,4 @@
+export declare const useModal: () => {
+    onClose: (event?: import("react").SyntheticEvent<HTMLElement, Event> | undefined) => void;
+    closeLabel: string | undefined;
+};

package/package.json

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

package/src/components/Drawer/Content.tsx

@@ -1,12 +1,4 @@
-import {
-  Children,
-  PropsWithChildren,
-  Ref,
-  RefAttributes,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-} from "react";
+import { PropsWithChildren, Ref, RefAttributes, forwardRef } from "react";
 import { DOMProps } from "../../types/dom";
 
 export type DivRef = Ref<HTMLDivElement>;
@@ -14,26 +6,12 @@ export type DivElementType = HTMLDivElement;
 export interface ContentProps
   extends DOMProps,
     RefAttributes<DivElementType>,
-    PropsWithChildren {
-  onClose?: () => void;
-  closeLabel?: string;
-}
+    PropsWithChildren {}
 
 const Content = forwardRef(
-  (
-    { children, onClose, closeLabel: _, ...otherProps }: ContentProps,
-    ref: DivRef,
-  ) => (
+  ({ children, ...otherProps }: ContentProps, ref: DivRef) => (
     <div ref={ref} {...otherProps} className="mobius/DrawerContent">
-      {Children.map(children, child => {
-        if (isValidElement(child)) {
-          return cloneElement(child, {
-            onClose,
-          } as any);
-        }
-
-        return child;
-      })}
+      {children}
     </div>
   ),
 );

package/src/components/Drawer/Drawer.mdx

@@ -95,6 +95,68 @@ const LogoHeader = () => {
 
 <Story of={DrawerStories.WithLogoHeader} />
 
+### Closing Drawer from a child component
+
+As of `@simplybusiness/mobius` version 4.5.0 `Drawer` component can be closed from a child component using the `useDrawer()` hook.
+
+The hook provides `onClose` method and `closeLabel` string that can be used to close the drawer.
+
+`onClose` method will ensure that the drawer is closed using its CSS transition, as well as `onClose` prop firing, if provided.
+
+If you previously used `onClose` and/or `closeLabel` props provided by default to all children props, you will need to replace these with `useDrawer()`.
+
+Parent component for both old and new implementations remains the same:
+
+```jsx
+import { Drawer, Button } from "@simplybusiness/mobius";
+
+const ParentComponent = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open</Button>
+
+      <Drawer
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        direction="right"
+        closeLabel="Close"
+      >
+        <Drawer.Header>Title</Drawer.Header>
+        <Drawer.Content>Content</Drawer.Content>
+      </Drawer>
+    </>
+  );
+};
+```
+
+Old implementation for child component:
+
+```jsx
+import { Button } from "@simplybusiness/mobius";
+
+const ChildComponent = ({ onClose, closeLabel }) => (
+  <Button onClick={onClose}>{closeLabel}</Button>
+);
+```
+
+New implementation for child component:
+
+```jsx
+import { useDrawer, Button } from "@simplybusiness/mobius";
+
+const ChildComponent = () => {
+  const { onClose, closeLabel } = useDrawer();
+
+  return <Button onClick={onClose}>{closeLabel}</Button>;
+};
+```
+
+The motivation behind this change is to provide a more consistent and predictable API for the `Drawer` component.
+
+This particularly applies to components that already have props named `onClose` and `closeLabel`, which may lead to unexpected side effects.
+
 <TestingDocs />
 
 ## Props

package/src/components/Drawer/Drawer.tsx

@@ -2,14 +2,12 @@
 
 import classNames from "classnames/dedupe";
 import {
-  Children,
   Ref,
   SyntheticEvent,
-  cloneElement,
   forwardRef,
-  isValidElement,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
 } from "react";
 import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
@@ -17,6 +15,7 @@ import { supportsDialog } from "../../utils/polyfill-tests";
 import { VisuallyHidden } from "../VisuallyHidden";
 import { DrawerProps } from "./types";
 import { mergeRefs } from "../../utils";
+import { DrawerContext } from "./DrawerContext";
 
 export type DialogElementType = HTMLDialogElement;
 export type DialogRef = Ref<DialogElementType>;
@@ -49,10 +48,6 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
   // Add close handler, to enable closing transitions
   const handleClose = useCallback(
     (event?: SyntheticEvent<HTMLElement, Event>) => {
-      // `transitionend` may be called from another component but `event` may be undefined.
-      // This fixes an issue where closing `<Accordion>` inside `<Drawer>` will close both
-      if (!event) return;
-
       if (event) {
         event.preventDefault();
         event.stopPropagation();
@@ -130,6 +125,14 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
     toggleModal();
   }, [isOpen, onOpen, handleClose, hasDialogSupport]);
 
+  const contextValue = useMemo(
+    () => ({
+      onClose: handleClose,
+      closeLabel,
+    }),
+    [handleClose, closeLabel],
+  );
+
   return (
     <dialog
       ref={mergeRefs([modalRef, ref])}
@@ -140,16 +143,9 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
       <VisuallyHidden>
         <div id="screen-reader-announce">{announce}</div>
       </VisuallyHidden>
-      {Children.map(children, child => {
-        if (isValidElement(child)) {
-          return cloneElement(child, {
-            onClose: handleClose,
-            closeLabel,
-          } as any);
-        }
-
-        return child;
-      })}
+      <DrawerContext.Provider value={contextValue}>
+        {children}
+      </DrawerContext.Provider>
     </dialog>
   );
 });

package/src/components/Drawer/DrawerContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import { DrawerContextProps } from "./types";
+
+export const DrawerContext = createContext<DrawerContextProps>({
+  onClose: () => {},
+  closeLabel: undefined,
+});

package/src/components/Drawer/Header.tsx

@@ -4,6 +4,7 @@ import { cross } from "@simplybusiness/icons";
 import { DOMProps } from "../../types/dom";
 import { Button } from "../Button";
 import { Icon } from "../Icon";
+import { useDrawer } from "./useDrawer";
 
 export type HeaderElementType = HTMLDivElement;
 export type HeaderRef = Ref<HTMLElement>;
@@ -11,28 +12,26 @@ export type HeaderRef = Ref<HTMLElement>;
 export interface HeaderProps
   extends DOMProps,
     RefAttributes<HeaderElementType>,
-    PropsWithChildren {
-  onClose?: () => void;
-  closeLabel?: string;
-}
+    PropsWithChildren {}
 
 const Header = forwardRef(
-  (
-    { children, onClose, closeLabel, ...otherProps }: HeaderProps,
-    ref: HeaderRef,
-  ) => (
-    <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>
-  ),
+  ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {
+    const { onClose, closeLabel } = useDrawer();
+
+    return (
+      <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

@@ -4,7 +4,8 @@ import {
   ContentProps as DrawerContentProps,
 } from "./Content";
 import { Drawer as DrawerComponent } from "./Drawer";
-import { DrawerProps } from "./types";
+import { DrawerProps, DrawerContextProps } from "./types";
+import { useDrawer } from "./useDrawer";
 import {
   HeaderElementType as DrawerHeaderElementType,
   HeaderProps as DrawerHeaderProps,
@@ -17,9 +18,10 @@ const Drawer = Object.assign(DrawerComponent, {
 });
 
 Drawer.displayName = "Drawer";
-export { Drawer };
+export { Drawer, useDrawer };
 
 export type {
+  DrawerContextProps,
   DrawerContentDivElementType,
   DrawerContentProps,
   DrawerHeaderElementType,

package/src/components/Drawer/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, SyntheticEvent } from "react";
 
 export interface DrawerProps {
   isOpen: boolean;
@@ -16,3 +16,8 @@ export interface DrawerProps {
   onClose?: () => void;
   children?: ReactNode;
 }
+
+export type DrawerContextProps = {
+  onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;
+  closeLabel: string | undefined;
+};

package/src/components/Drawer/useDrawer.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { DrawerContext } from "./DrawerContext";
+
+export const useDrawer = () => {
+  const { onClose, closeLabel } = useContext(DrawerContext);
+
+  return { onClose, closeLabel };
+};

package/src/components/Modal/Content.tsx

@@ -1,12 +1,4 @@
-import {
-  Children,
-  PropsWithChildren,
-  Ref,
-  RefAttributes,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-} from "react";
+import { PropsWithChildren, Ref, RefAttributes, forwardRef } from "react";
 import { DOMProps } from "../../types/dom";
 
 export type DivRef = Ref<HTMLDivElement>;
@@ -14,26 +6,12 @@ export type DivElementType = HTMLDivElement;
 export interface ContentProps
   extends DOMProps,
     RefAttributes<DivElementType>,
-    PropsWithChildren {
-  onClose?: () => void;
-  closeLabel?: string;
-}
+    PropsWithChildren {}
 
 const Content = forwardRef(
-  (
-    { children, onClose, closeLabel: _, ...otherProps }: ContentProps,
-    ref: DivRef,
-  ) => (
+  ({ children, ...otherProps }: ContentProps, ref: DivRef) => (
     <div ref={ref} {...otherProps} className="mobius/ModalContent">
-      {Children.map(children, child => {
-        if (isValidElement(child)) {
-          return cloneElement(child, {
-            onClose,
-          } as any);
-        }
-
-        return child;
-      })}
+      {children}
     </div>
   ),
 );

package/src/components/Modal/Header.tsx

@@ -4,6 +4,7 @@ import { cross } from "@simplybusiness/icons";
 import { DOMProps } from "../../types/dom";
 import { Button } from "../Button";
 import { Icon } from "../Icon";
+import { useModal } from "./useModal";
 
 export type HeaderElementType = HTMLDivElement;
 export type HeaderRef = Ref<HTMLElement>;
@@ -11,28 +12,26 @@ export type HeaderRef = Ref<HTMLElement>;
 export interface HeaderProps
   extends DOMProps,
     RefAttributes<HeaderElementType>,
-    PropsWithChildren {
-  onClose?: () => void;
-  closeLabel?: string;
-}
+    PropsWithChildren {}
 
 const Header = forwardRef(
-  (
-    { children, onClose, closeLabel, ...otherProps }: HeaderProps,
-    ref: HeaderRef,
-  ) => (
-    <header ref={ref} {...otherProps} className="mobius/ModalHeader">
-      {children}
-      <Button
-        aria-label="Close"
-        variant="basic"
-        onPress={onClose}
-        className="mobius/ModalClose"
-      >
-        <Icon icon={cross} /> {closeLabel}
-      </Button>
-    </header>
-  ),
+  ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {
+    const { onClose, closeLabel } = useModal();
+
+    return (
+      <header ref={ref} {...otherProps} className="mobius/ModalHeader">
+        {children}
+        <Button
+          aria-label="Close"
+          variant="basic"
+          onPress={onClose}
+          className="mobius/ModalClose"
+        >
+          <Icon icon={cross} /> {closeLabel}
+        </Button>
+      </header>
+    );
+  },
 );
 
 Header.displayName = "Header";

package/src/components/Modal/Modal.mdx

@@ -116,6 +116,63 @@ const WithAnimationDemo = () => {
 };
 ```
 
+### Closing Modal from a child component
+
+As of `@simplybusiness/mobius` version 4.5.0 `Modal` component can be closed from a child component using the `useModal()` hook.
+
+The hook provides `onClose` method and `closeLabel` string that can be used to close the modal.
+
+`onClose` method will ensure that the modal is closed using its CSS transition, as well as `onClose` prop firing, if provided.
+
+If you previously used `onClose` and/or `closeLabel` props provided by default to all children props, you will need to replace these with `useModal()`.
+
+Parent component for both old and new implementations remains the same:
+
+```jsx
+import { Modal, Button } from "@simplybusiness/mobius";
+
+const ParentComponent = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open</Button>
+
+      <Modal isOpen={open} onClose={() => setOpen(false)} animation="slideUp">
+        <Modal.Header>Title</Modal.Header>
+        <Modal.Content>Content</Modal.Content>
+      </Modal>
+    </>
+  );
+};
+```
+
+Old implementation for child component:
+
+```jsx
+import { Button } from "@simplybusiness/mobius";
+
+const ChildComponent = ({ onClose, closeLabel }) => (
+  <Button onClick={onClose}>{closeLabel}</Button>
+);
+```
+
+New implementation for child component:
+
+```jsx
+import { useModal, Button } from "@simplybusiness/mobius";
+
+const ChildComponent = () => {
+  const { onClose, closeLabel } = useModal();
+
+  return <Button onClick={onClose}>{closeLabel}</Button>;
+};
+```
+
+The motivation behind this change is to provide a more consistent and predictable API for the `Modal` component.
+
+This particularly applies to components that already have props named `onClose` and `closeLabel`, which may lead to unexpected side effects.
+
 ### Nested Modals
 
 <Story of={ModalStories.WithNested} />

package/src/components/Modal/Modal.tsx

@@ -2,20 +2,19 @@
 
 import classNames from "classnames/dedupe";
 import {
-  Children,
   Ref,
   SyntheticEvent,
-  cloneElement,
   forwardRef,
-  isValidElement,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
 } from "react";
 import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
 import { supportsDialog } from "../../utils/polyfill-tests";
 import { ModalProps } from "./types";
 import { mergeRefs } from "../../utils";
+import { ModalContext } from "./ModalContext";
 
 export type ModalElementType = HTMLDialogElement;
 export type ModalRef = Ref<ModalElementType>;
@@ -71,10 +70,6 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
   // Add close handler, to enable closing animations
   const handleClose = useCallback(
     (event?: SyntheticEvent<HTMLElement, Event>) => {
-      // `transitionend` may be called from another component but `event` may be undefined.
-      // This fixes an issue where closing `<Accordion>` inside `<Modal>` will close both
-      if (!event) return;
-
       if (event) {
         event.preventDefault();
         event.stopPropagation();
@@ -156,22 +151,23 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
     toggleModal();
   }, [isOpen, onOpen, handleClose, hasDialogSupport]);
 
+  const contextValue = useMemo(
+    () => ({
+      onClose: handleClose,
+      closeLabel,
+    }),
+    [handleClose, closeLabel],
+  );
+
   return (
     <dialog
       ref={mergeRefs([modalRef, ref])}
       onCancel={handleClose}
       className={modalClasses}
     >
-      {Children.map(children, child => {
-        if (isValidElement(child)) {
-          return cloneElement(child, {
-            onClose: handleClose,
-            closeLabel,
-          } as any);
-        }
-
-        return child;
-      })}
+      <ModalContext.Provider value={contextValue}>
+        {children}
+      </ModalContext.Provider>
     </dialog>
   );
 });

package/src/components/Modal/ModalContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import { ModalContextProps } from "./types";
+
+export const ModalContext = createContext<ModalContextProps>({
+  onClose: () => {},
+  closeLabel: undefined,
+});

package/src/components/Modal/index.tsx

@@ -9,7 +9,8 @@ import {
   HeaderProps as ModalHeaderProps,
 } from "./Header";
 import { Modal as ModalComponent } from "./Modal";
-import { ModalProps } from "./types";
+import { ModalProps, ModalContextProps } from "./types";
+import { useModal } from "./useModal";
 
 const Modal = Object.assign(ModalComponent, {
   Header,
@@ -17,9 +18,10 @@ const Modal = Object.assign(ModalComponent, {
 });
 
 Modal.displayName = "Modal";
-export { Modal };
+export { Modal, useModal };
 
 export type {
+  ModalContextProps,
   ModalContentDivElementType,
   ModalContentProps,
   ModalHeaderElementType,

package/src/components/Modal/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, SyntheticEvent } from "react";
 
 export interface ModalProps {
   isOpen: boolean;
@@ -30,3 +30,8 @@ export interface ModalProps {
    */
   parentSelector?: () => HTMLElement;
 }
+
+export type ModalContextProps = {
+  onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;
+  closeLabel: string | undefined;
+};

package/src/components/Modal/useModal.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ModalContext } from "./ModalContext";
+
+export const useModal = () => {
+  const { onClose, closeLabel } = useContext(ModalContext);
+
+  return { onClose, closeLabel };
+};

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;