@simplybusiness/mobius 6.9.0 → 6.9.2

package/src/components/Radio/RadioGroup.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import classNames from "classnames/dedupe";
-import type { ReactElement, ReactNode, Ref, RefAttributes } from "react";
+import type { ReactElement, ReactNode, RefAttributes } from "react";
 import {
   Children,
   cloneElement,
-  forwardRef,
   isValidElement,
   useCallback,
   useEffect,
@@ -15,7 +14,6 @@ import {
 } from "react";
 import { useValidationClasses } from "../../hooks";
 import type { Validation } from "../../types";
-import type { ForwardedRefComponent } from "../../types/components";
 import type { DOMProps } from "../../types/dom";
 import type { HTMLElementEvent } from "../../types/events";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
@@ -67,8 +65,6 @@ export interface RadioGroupProps
   name?: string;
 }
 
-export type RadioGroupRef = Ref<RadioGroupElementType>;
-
 const getDefaultVal = (children: ReactNode, defaultValue?: string) => {
   if (Array.isArray(children) && defaultValue) {
     const option = children?.find(item => item.props.value === defaultValue);
@@ -81,10 +77,7 @@ const getDefaultVal = (children: ReactNode, defaultValue?: string) => {
   return "";
 };
 
-const RadioGroup: ForwardedRefComponent<
-  RadioGroupProps,
-  RadioGroupElementType
-> = forwardRef((props: RadioGroupProps, ref: RadioGroupRef) => {
+const RadioGroup = ({ ref, ...props }: RadioGroupProps) => {
   const {
     label,
     isDisabled = false,
@@ -224,7 +217,7 @@ const RadioGroup: ForwardedRefComponent<
       </Stack>
     </div>
   );
-});
+};
 
 RadioGroup.displayName = "RadioGroup";
 export { RadioGroup };

package/src/components/SVG/SVG.tsx

@@ -1,39 +1,33 @@
-import type { Ref, RefAttributes } from "react";
-import { forwardRef, Children } from "react";
+import type { RefAttributes } from "react";
+import { Children } from "react";
 import classNames from "classnames/dedupe";
 import type { DOMProps } from "../../types/dom";
-import type { ForwardedRefComponent } from "../../types/components";
 
 export interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {
   children: React.ReactElement<React.SVGProps<SVGSVGElement>>;
   className?: string;
   style?: React.CSSProperties;
 }
+const SVG = ({ ref, ...props }: SVGProps) => {
+  const { children, className, ...otherProps } = props;
 
-export type SVGRef = Ref<SVGSVGElement>;
+  const classes = classNames("mobius", "mobius-svg", className);
+  const svgNode = Children.only(children);
+  // Remove originalType and mdxType props
+  const { children: svgChildren, viewBox, xmlns } = svgNode.props;
 
-const SVG: ForwardedRefComponent<SVGProps, SVGSVGElement> = forwardRef(
-  (props: SVGProps, ref: SVGRef) => {
-    const { children, className, ...otherProps } = props;
-
-    const classes = classNames("mobius", "mobius-svg", className);
-    const svgNode = Children.only(children);
-    // Remove originalType and mdxType props
-    const { children: svgChildren, viewBox, xmlns } = svgNode.props;
-
-    return (
-      <svg
-        viewBox={viewBox}
-        xmlns={xmlns}
-        ref={ref}
-        {...otherProps}
-        className={classes}
-      >
-        {svgChildren}
-      </svg>
-    );
-  },
-);
+  return (
+    <svg
+      viewBox={viewBox}
+      xmlns={xmlns}
+      ref={ref}
+      {...otherProps}
+      className={classes}
+    >
+      {svgChildren}
+    </svg>
+  );
+};
 
 SVG.displayName = "SVG";
 export { SVG };

package/src/components/Select/Select.tsx

@@ -2,13 +2,12 @@
 
 import { chevronDown } from "@simplybusiness/icons";
 import classNames from "classnames/dedupe";
-import type { ChangeEvent, ReactElement, Ref, RefAttributes } from "react";
-import { forwardRef, useId } from "react";
+import type { ChangeEvent, ReactElement, RefAttributes } from "react";
+import { useId } from "react";
 import { useValidationClasses } from "../../hooks";
 import type { UseLabelProps } from "../../hooks/useLabel";
 import { useLabel } from "../../hooks/useLabel";
 import type { DOMProps, Validation } from "../../types";
-import type { ForwardedRefComponent } from "../../types/components";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
 import { Icon } from "../Icon";
@@ -33,99 +32,96 @@ export interface SelectProps
   isDisabled?: boolean;
 }
 
-export type SelectRef = Ref<SelectElementType>;
+const Select = ({ ref, ...props }: SelectProps) => {
+  const {
+    label,
+    onChange,
+    validationState,
+    isInvalid,
+    errorMessage,
+    isDisabled = false,
+    isRequired,
+    ...otherProps
+  } = props;
 
-const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
-  forwardRef((props: SelectProps, ref: SelectRef) => {
-    const {
-      label,
-      onChange,
-      validationState,
-      isInvalid,
-      errorMessage,
-      isDisabled = false,
-      isRequired,
-      ...otherProps
-    } = props;
-
-    const { labelProps, fieldProps } = useLabel({
-      label,
-      ...otherProps,
-    });
+  const { labelProps, fieldProps } = useLabel({
+    label,
+    ...otherProps,
+  });
 
-    const validationClasses = useValidationClasses({
-      validationState,
-      isInvalid,
-    });
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid,
+  });
 
-    const stateClasses = {
-      "--is-disabled": isDisabled,
-      "--is-required": typeof isRequired === "boolean" && isRequired,
-      "--is-optional": typeof isRequired === "boolean" && !isRequired,
-    };
+  const stateClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+  };
 
-    const sharedClasses = classNames(validationClasses, stateClasses);
+  const sharedClasses = classNames(validationClasses, stateClasses);
 
-    const wrapperClasses = classNames(
-      "mobius-select__wrapper",
-      sharedClasses,
-      otherProps.className,
-    );
-    const selectClasses = classNames(
-      "mobius-select",
-      sharedClasses,
-      otherProps.className,
-    );
-    const labelClasses = classNames(
-      "mobius-label",
-      sharedClasses,
-      otherProps.className,
-    );
-    const iconClasses = classNames("mobius-select__icon", sharedClasses);
-    const errorMessageId = useId();
-    const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
-    const describedBy = spaceDelimitedList([
-      shouldErrorMessageShow,
-      props["aria-describedby"],
-    ]);
+  const wrapperClasses = classNames(
+    "mobius-select__wrapper",
+    sharedClasses,
+    otherProps.className,
+  );
+  const selectClasses = classNames(
+    "mobius-select",
+    sharedClasses,
+    otherProps.className,
+  );
+  const labelClasses = classNames(
+    "mobius-label",
+    sharedClasses,
+    otherProps.className,
+  );
+  const iconClasses = classNames("mobius-select__icon", sharedClasses);
+  const errorMessageId = useId();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"],
+  ]);
 
-    const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
-      if (onChange) {
-        onChange(e);
-      }
-    };
+  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
 
-    return (
-      <Stack className="mobius mobius-select__outer" gap="xs">
-        {label && (
-          <Label {...labelProps} className={labelClasses}>
-            {label}
-          </Label>
-        )}
-        <div className={wrapperClasses}>
-          <select
-            {...otherProps}
-            {...fieldProps}
-            ref={ref}
-            multiple={false}
-            className={selectClasses}
-            disabled={isDisabled}
-            aria-invalid={!!errorMessage}
-            aria-describedby={describedBy}
-            aria-required={isRequired}
-            required={isRequired}
-            onChange={handleChange}
-          />
-          <span className={iconClasses}>
-            <Icon icon={chevronDown} />
-          </span>
-        </div>
-        {errorMessage && (
-          <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
-        )}
-      </Stack>
-    );
-  });
+  return (
+    <Stack className="mobius mobius-select__outer" gap="xs">
+      {label && (
+        <Label {...labelProps} className={labelClasses}>
+          {label}
+        </Label>
+      )}
+      <div className={wrapperClasses}>
+        <select
+          {...otherProps}
+          {...fieldProps}
+          ref={ref}
+          multiple={false}
+          className={selectClasses}
+          disabled={isDisabled}
+          aria-invalid={!!errorMessage}
+          aria-describedby={describedBy}
+          aria-required={isRequired}
+          required={isRequired}
+          onChange={handleChange}
+        />
+        <span className={iconClasses}>
+          <Icon icon={chevronDown} />
+        </span>
+      </div>
+      {errorMessage && (
+        <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
+      )}
+    </Stack>
+  );
+};
 
 Select.displayName = "Select";
 export { Select };

package/src/components/Stack/Stack.tsx

@@ -1,9 +1,7 @@
 import type { Ref, RefAttributes, ReactNode } from "react";
 import type React from "react";
-import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 import type { DOMProps } from "../../types/dom";
-import type { ForwardedRefComponent } from "../../types/components";
 import type { SpacingType } from "../../types";
 
 export type StackElementType = HTMLDivElement;
@@ -19,20 +17,19 @@ export interface StackProps extends DOMProps, RefAttributes<StackElementType> {
 
 export type StackRef = Ref<StackElementType>;
 
-export const Stack: ForwardedRefComponent<StackProps, StackElementType> =
-  forwardRef((props: StackProps, ref: StackRef) => {
-    const { elementType: Element = "div", gap, ...otherProps } = props;
+export const Stack = ({ ref, ...props }: StackProps) => {
+  const { elementType: Element = "div", gap, ...otherProps } = props;
 
-    const classes = classNames(
-      "mobius",
-      "mobius-stack",
-      {
-        [`--gap-${gap}`]: gap,
-      },
-      otherProps.className,
-    );
+  const classes = classNames(
+    "mobius",
+    "mobius-stack",
+    {
+      [`--gap-${gap}`]: gap,
+    },
+    otherProps.className,
+  );
 
-    return <Element ref={ref} {...otherProps} className={classes} />;
-  });
+  return <Element ref={ref} {...otherProps} className={classes} />;
+};
 
 Stack.displayName = "Stack";

package/src/components/Switch/Switch.tsx

@@ -2,9 +2,7 @@
 
 import {
   type ChangeEvent,
-  type Ref,
   type RefAttributes,
-  forwardRef,
   useState,
   useEffect,
 } from "react";
@@ -24,9 +22,7 @@ export interface SwitchProps
   isDisabled?: boolean;
 }
 
-export type SwitchRef = Ref<SwitchElementType>;
-
-const Switch = forwardRef<HTMLLabelElement, SwitchProps>((props, ref) => {
+const Switch = ({ ref, ...props }: SwitchProps) => {
   const {
     checked = false,
     className,
@@ -73,7 +69,7 @@ const Switch = forwardRef<HTMLLabelElement, SwitchProps>((props, ref) => {
       <span className="mobius-switch__slider"></span>
     </label>
   );
-});
+};
 
 Switch.displayName = "Switch";
 export { Switch };

package/src/components/Table/Body.tsx

@@ -1,7 +1,5 @@
 import type { Ref, RefAttributes, ReactNode } from "react";
-import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
-import type { ForwardedRefComponent } from "../../types/components";
 
 export interface BodyProps extends RefAttributes<HTMLTableSectionElement> {
   children?: ReactNode;
@@ -10,12 +8,11 @@ export interface BodyProps extends RefAttributes<HTMLTableSectionElement> {
 
 export type BodyRef = Ref<HTMLTableSectionElement>;
 
-const Body: ForwardedRefComponent<BodyProps, HTMLTableSectionElement> =
-  forwardRef((props: BodyProps, ref: BodyRef) => {
-    const classes = classNames("mobius", "mobius-table__body", props.className);
+const Body = ({ ref, ...props }: BodyProps) => {
+  const classes = classNames("mobius", "mobius-table__body", props.className);
 
-    return <tbody ref={ref} {...props} className={classes} />;
-  });
+  return <tbody ref={ref} {...props} className={classes} />;
+};
 
 Body.displayName = "Table.Body";
 export { Body };

package/src/components/Table/Cell.tsx

@@ -1,7 +1,5 @@
 import type { Ref, RefAttributes, ReactNode } from "react";
-import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
-import type { ForwardedRefComponent } from "../../types/components";
 
 export interface CellProps extends RefAttributes<HTMLTableCellElement> {
   children?: ReactNode;
@@ -12,17 +10,15 @@ export interface CellProps extends RefAttributes<HTMLTableCellElement> {
 
 export type CellRef = Ref<HTMLTableCellElement>;
 
-const Cell: ForwardedRefComponent<CellProps, HTMLTableCellElement> = forwardRef(
-  (props: CellProps, ref: CellRef) => {
-    const classes = classNames(
-      "mobius",
-      "mobius-table__body-cell",
-      props.className,
-    );
+const Cell = ({ ref, ...props }: CellProps) => {
+  const classes = classNames(
+    "mobius",
+    "mobius-table__body-cell",
+    props.className,
+  );
 
-    return <td ref={ref} {...props} className={classes} />;
-  },
-);
+  return <td ref={ref} {...props} className={classes} />;
+};
 
 Cell.displayName = "Table.Cell";
 export { Cell };

package/src/components/Table/Foot.tsx

@@ -1,7 +1,5 @@
 import type { Ref, RefAttributes, ReactNode } from "react";
-import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
-import type { ForwardedRefComponent } from "../../types/components";
 
 export interface FootProps extends RefAttributes<HTMLTableSectionElement> {
   children?: ReactNode;
@@ -10,12 +8,11 @@ export interface FootProps extends RefAttributes<HTMLTableSectionElement> {
 
 export type FootRef = Ref<HTMLTableSectionElement>;
 
-const Foot: ForwardedRefComponent<FootProps, HTMLTableSectionElement> =
-  forwardRef((props: FootProps, ref: FootRef) => {
-    const classes = classNames("mobius", "mobius-table__foot", props.className);
+const Foot = ({ ref, ...props }: FootProps) => {
+  const classes = classNames("mobius", "mobius-table__foot", props.className);
 
-    return <tfoot ref={ref} {...props} className={classes} />;
-  });
+  return <tfoot ref={ref} {...props} className={classes} />;
+};
 
 Foot.displayName = "Table.Foot";
 export { Foot };

package/src/components/Table/Head.tsx

@@ -1,7 +1,5 @@
 import type { Ref, RefAttributes, ReactNode } from "react";
-import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
-import type { ForwardedRefComponent } from "../../types/components";
 
 export interface HeadProps extends RefAttributes<HTMLTableSectionElement> {
   children?: ReactNode;
@@ -10,12 +8,11 @@ export interface HeadProps extends RefAttributes<HTMLTableSectionElement> {
 
 export type HeadRef = Ref<HTMLTableSectionElement>;
 
-const Head: ForwardedRefComponent<HeadProps, HTMLTableSectionElement> =
-  forwardRef((props: HeadProps, ref: HeadRef) => {
-    const classes = classNames("mobius", "mobius-table__head", props.className);
+const Head = ({ ref, ...props }: HeadProps) => {
+  const classes = classNames("mobius", "mobius-table__head", props.className);
 
-    return <thead ref={ref} {...props} className={classes} />;
-  });
+  return <thead ref={ref} {...props} className={classes} />;
+};
 
 Head.displayName = "Table.Head";
 export { Head };

package/src/components/Table/HeaderCell.tsx

@@ -1,7 +1,5 @@
 import type { Ref, RefAttributes, ReactNode } from "react";
-import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
-import type { ForwardedRefComponent } from "../../types/components";
 
 export interface HeaderCellProps extends RefAttributes<HTMLTableCellElement> {
   children?: ReactNode;
@@ -12,16 +10,15 @@ export interface HeaderCellProps extends RefAttributes<HTMLTableCellElement> {
 
 export type HeaderCellRef = Ref<HTMLTableCellElement>;
 
-const HeaderCell: ForwardedRefComponent<HeaderCellProps, HTMLTableCellElement> =
-  forwardRef((props: HeaderCellProps, ref: HeaderCellRef) => {
-    const classes = classNames(
-      "mobius",
-      "mobius-table__head-cell",
-      props.className,
-    );
+const HeaderCell = ({ ref, ...props }: HeaderCellProps) => {
+  const classes = classNames(
+    "mobius",
+    "mobius-table__head-cell",
+    props.className,
+  );
 
-    return <th {...props} ref={ref} className={classes} />;
-  });
+  return <th {...props} ref={ref} className={classes} />;
+};
 
 HeaderCell.displayName = "Table.HeaderCell";
 export { HeaderCell };

package/src/components/Table/Row.tsx

@@ -1,7 +1,5 @@
 import type { Ref, RefAttributes, ReactNode } from "react";
-import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
-import type { ForwardedRefComponent } from "../../types/components";
 
 export interface RowProps extends RefAttributes<HTMLTableRowElement> {
   children?: ReactNode;
@@ -10,13 +8,11 @@ export interface RowProps extends RefAttributes<HTMLTableRowElement> {
 
 export type RowRef = Ref<HTMLTableRowElement>;
 
-const Row: ForwardedRefComponent<RowProps, HTMLTableRowElement> = forwardRef(
-  (props: RowProps, ref: RowRef) => {
-    const classes = classNames("mobius", "mobius-table__row", props.className);
+const Row = ({ ref, ...props }: RowProps) => {
+  const classes = classNames("mobius", "mobius-table__row", props.className);
 
-    return <tr ref={ref} {...props} className={classes} />;
-  },
-);
+  return <tr ref={ref} {...props} className={classes} />;
+};
 
 Row.displayName = "Table.Row";
 export { Row };

package/src/components/Table/Table.tsx

@@ -1,8 +1,6 @@
 import type { Ref, RefAttributes, ReactNode } from "react";
-import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
 import type { DOMProps } from "../../types/dom";
-import type { ForwardedRefComponent } from "../../types/components";
 
 export type TableElementType = HTMLTableElement;
 
@@ -13,13 +11,11 @@ export interface TableProps extends DOMProps, RefAttributes<TableElementType> {
 
 export type TableRef = Ref<TableElementType>;
 
-const Table: ForwardedRefComponent<TableProps, TableElementType> = forwardRef(
-  (props: TableProps, ref: TableRef) => {
-    const classes = classNames("mobius", "mobius-table", props.className);
+const Table = ({ ref, ...props }: TableProps) => {
+  const classes = classNames("mobius", "mobius-table", props.className);
 
-    return <table ref={ref} {...props} className={classes} />;
-  },
-);
+  return <table ref={ref} {...props} className={classes} />;
+};
 
 Table.displayName = "Table";
 export { Table };

package/src/components/Table/index.tsx

@@ -1,4 +1,3 @@
-import type { ForwardedRefComponent } from "../../types/components";
 import { Table as TableComponent } from "./Table";
 import { Head } from "./Head";
 import { Body } from "./Body";
@@ -30,14 +29,13 @@ import type {
   CellRef as TableCellRef,
 } from "./Cell";
 
-export interface TableCompound
-  extends ForwardedRefComponent<TableProps, HTMLTableElement> {
-  Head: ForwardedRefComponent<TableHeadProps, HTMLTableSectionElement>;
-  Body: ForwardedRefComponent<TableBodyProps, HTMLTableSectionElement>;
-  Foot: ForwardedRefComponent<TableFootProps, HTMLTableSectionElement>;
-  Row: ForwardedRefComponent<TableRowProps, HTMLTableRowElement>;
-  HeaderCell: ForwardedRefComponent<TableHeaderCellProps, HTMLTableCellElement>;
-  Cell: ForwardedRefComponent<TableCellProps, HTMLTableCellElement>;
+export interface TableCompound extends React.FC<TableProps> {
+  Head: React.FC<TableHeadProps>;
+  Body: React.FC<TableBodyProps>;
+  Foot: React.FC<TableFootProps>;
+  Row: React.FC<TableRowProps>;
+  HeaderCell: React.FC<TableHeaderCellProps>;
+  Cell: React.FC<TableCellProps>;
 }
 
 const Table: TableCompound = Object.assign(TableComponent, {