@simplybusiness/mobius 3.4.5 → 3.5.1

package/dist/mobius.d.ts

@@ -27,7 +27,6 @@ import { HoverProps } from '@react-aria/interactions';
 import { HTMLAttributeAnchorTarget } from 'react';
 import { HTMLInputTypeAttribute } from 'react';
 import { IconName } from '@simplybusiness/icons';
-import { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 import { LabelableProps } from '@react-types/shared';
 import { Link as Link_2 } from 'react-router-dom';
 import { parseDate } from '@internationalized/date';
@@ -318,7 +317,7 @@ export declare interface DataTableProps extends DOMProps, RefAttributes<DataTabl
 
 export declare type DataTableRef = Ref<DataTableElementType>;
 
-export declare function DatePicker(props: DatePickerProps): JSX_2.Element;
+export declare function DatePicker(props: DatePickerProps): JSX.Element;
 
 export declare interface DatePickerProps extends AriaDatePickerProps<DateValue>, DatePickerStateOptions<DateValue> {
     label: string;
@@ -329,7 +328,7 @@ export declare const DEFAULT_BREAKPOINT: Breakpoint;
 declare type DialogRef = HTMLDialogElement;
 
 export declare const Divider: {
-    (props: DividerProps): JSX_2.Element;
+    (props: DividerProps): JSX.Element;
     displayName: string;
 };
 
@@ -374,7 +373,7 @@ export declare type ElementType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"
 declare const ERROR_MESSAGE_SERVICE_UNAVAILABLE = "The service is currently unavailable. Please try again later";
 
 export declare const ErrorMessage: {
-    ({ id, errorMessage, className, }: ErrorMessageProps): JSX_2.Element | null;
+    ({ id, errorMessage, className, }: ErrorMessageProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -596,7 +595,7 @@ export declare type LegendProps = {
 
 export declare const Link: ForwardedRefComponent<LinkProps, LinkElementType>;
 
-export declare function LinkButton({ href, children, className, elementType, ...rest }: LinkButtonProps): JSX_2.Element;
+export declare function LinkButton({ href, children, className, elementType, ...rest }: LinkButtonProps): JSX.Element;
 
 export declare interface LinkButtonProps extends Omit<ButtonProps, "elementType"> {
     href: string;
@@ -681,8 +680,18 @@ export declare type LoadingIndicatorRef = Ref<SVGSVGElement>;
 
 declare const LOGO_LINK = "https://www.simplybusiness.co.uk/";
 
+export declare const MaskedField: ForwardedRefComponent<MaskedFieldProps, TextFieldElementType>;
+
+export declare type MaskedFieldElementType = HTMLInputElement;
+
+export declare interface MaskedFieldProps extends TextFieldProps, DOMProps {
+    pattern: "ssn" | "fein";
+}
+
+export declare type MaskedFieldRef = Ref<MaskedFieldElementType>;
+
 export declare const Modal: {
-    ({ isOpen, onClose, children, className, closeLabel, size, appElement, preventCloseOnEsc, animation, shouldFocusAfterRender, parentSelector, }: ModalProps): JSX_2.Element;
+    ({ isOpen, onClose, children, className, closeLabel, size, appElement, preventCloseOnEsc, animation, shouldFocusAfterRender, parentSelector, }: ModalProps): JSX.Element;
     displayName: string;
 } & {
     Header: ForwardRefExoticComponent<Pick<ModalHeaderProps, "key" | "id" | "children" | "onClose" | "closeLabel"> & RefAttributes<HTMLElement>>;
@@ -761,7 +770,7 @@ export declare type OptionRef = Ref<HTMLOptionElement>;
 
 export { parseDate }
 
-export declare const PasswordField: ForwardRefExoticComponent<Pick<PasswordFieldProps, "type" | "key" | "id" | "name" | "value" | "label" | "pattern" | "className" | "children" | "inputMode" | "description" | "autoComplete" | "autoFocus" | "maxLength" | "minLength" | "defaultValue" | "placeholder" | "aria-activedescendant" | "aria-autocomplete" | "aria-describedby" | "aria-details" | "aria-errormessage" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "onCopy" | "onCut" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "onFocus" | "onBlur" | "onChange" | "onBeforeInput" | "onInput" | "onKeyDown" | "onKeyUp" | "onSelect" | "excludeFromTabOrder" | "isDisabled" | "errorMessage" | "onFocusChange" | "isRequired" | "isReadOnly" | "validationState" | "onHoverStart" | "onHoverEnd" | "onHoverChange" | "inputElementType"> & RefAttributes<HTMLInputElement>>;
+export declare const PasswordField: ForwardRefExoticComponent<Pick<PasswordFieldProps, "label" | "pattern" | "key" | "autoComplete" | "autoFocus" | "maxLength" | "minLength" | "name" | "defaultValue" | "className" | "id" | "placeholder" | "inputMode" | "aria-activedescendant" | "aria-autocomplete" | "aria-describedby" | "aria-details" | "aria-errormessage" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "type" | "value" | "children" | "onCopy" | "onCut" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "onFocus" | "onBlur" | "onChange" | "onBeforeInput" | "onInput" | "onKeyDown" | "onKeyUp" | "onSelect" | "excludeFromTabOrder" | "isDisabled" | "description" | "errorMessage" | "onFocusChange" | "isRequired" | "isReadOnly" | "validationState" | "onHoverStart" | "onHoverEnd" | "onHoverChange" | "inputElementType"> & RefAttributes<HTMLInputElement>>;
 
 export declare interface PasswordFieldProps extends TextFieldProps {
 }
@@ -769,7 +778,7 @@ export declare interface PasswordFieldProps extends TextFieldProps {
 export declare type PasswordFieldRef = TextFieldRef;
 
 declare const PercentageTotalsQuestion: {
-    (props: PercentageTotalsQuestionProps): JSX_2.Element;
+    (props: PercentageTotalsQuestionProps): JSX.Element;
     displayName: string;
 };
 
@@ -795,7 +804,7 @@ export declare interface ProgressProps extends AriaProgressBarProps, DOMProps, R
 
 export declare type ProgressRef = Ref<ProgressElementType>;
 
-declare function Question({ label, description, children, errorMessage, validationState, help, className, closeHelpOnOutsideClick, onChange, }: QuestionProps): JSX_2.Element;
+declare function Question({ label, description, children, errorMessage, validationState, help, className, closeHelpOnOutsideClick, onChange, }: QuestionProps): JSX.Element;
 
 declare const QuestionGroup: ForwardedRefComponent<QuestionGroupProps, QuestionGroupElementType>;
 
@@ -888,12 +897,12 @@ declare interface SectionProps extends DOMProps, RefAttributes<SectionElementTyp
 declare type SectionRef = Ref<SectionElementType>;
 
 export declare const Segment: {
-    (props: SegmentProps): JSX_2.Element;
+    (props: SegmentProps): JSX.Element;
     displayName: string;
 };
 
 export declare const SegmentGroup: {
-    (props: SegmentGroupProps): JSX_2.Element;
+    (props: SegmentGroupProps): JSX.Element;
     displayName: string;
 };
 
@@ -926,6 +935,7 @@ export declare interface SelectProps extends HoverProps, LabelableProps, Validat
     className?: string;
     errorMessage?: string;
     children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;
+    "aria-describedby"?: string;
 }
 
 export declare type SelectRef = Ref<SelectElementType>;
@@ -934,7 +944,7 @@ export declare type Size = "small" | "medium" | "large";
 
 export declare type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 
-export declare function Slider(props: SliderProps): JSX_2.Element;
+export declare function Slider(props: SliderProps): JSX.Element;
 
 export declare interface SliderProps extends SliderProps_2<number>, DOMProps {
     variant?: "primary" | "secondary";
@@ -996,6 +1006,7 @@ export declare const SVG: ForwardedRefComponent<SVGProps, SVGSVGElement>;
 export declare interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {
     children: React.ReactElement<React.SVGProps<SVGSVGElement>>;
     className?: string;
+    style?: React.CSSProperties;
 }
 
 export declare type SVGRef = Ref<SVGSVGElement>;
@@ -1143,7 +1154,7 @@ export declare interface ThemeContextProps {
     setBreakpoints: (config: BreakpointsType) => void;
 }
 
-export declare const ThemeProvider: ({ children, icons }: ThemeProviderProps) => JSX_2.Element;
+export declare const ThemeProvider: ({ children, icons }: ThemeProviderProps) => JSX.Element;
 
 export declare interface ThemeProviderProps {
     children: React.ReactNode;
@@ -1198,6 +1209,7 @@ declare interface TradeSelectorProps extends Partial<TradeSelectorCommonProps>,
     labels?: LabelProps_2;
     hideLabel?: boolean;
     "data-cy"?: string;
+    "aria-describedby"?: string;
 }
 
 declare type TradeSelectorRef = Ref<TradeSelectorElementType>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "3.4.5",
+  "version": "3.5.1",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "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 --incremental --emitDeclarationOnly false --pretty",
+    "check-types": "tsc --noEmit --emitDeclarationOnly false --pretty",
     "clean-dist": "rm -rf dist",
     "release:major": "../../bin/version.sh major",
     "release:minor": "../../bin/version.sh minor",

package/src/components/Accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, Ref, RefAttributes, ReactNode, useState } from "react";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";

package/src/components/Alert/Alert.tsx

@@ -2,6 +2,7 @@ import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
 import { info, success, warning, error } from "@simplybusiness/icons";
+import styled from "@emotion/styled";
 import { ForwardedRefComponent } from "../../types/components";
 import { Icon } from "../Icon";
 
@@ -19,6 +20,10 @@ export interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {
 
 export type AlertRef = Ref<AlertElementType>;
 
+const StyledIcon = styled(Icon)`
+  height: 1.32em;
+`
+
 const Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(
   (props: AlertProps, ref: AlertRef) => {
     const {
@@ -58,7 +63,7 @@ const Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(
     return (
       <Element ref={ref} role="alert" {...otherProps} className={classes}>
         <span className={iconClasses}>
-          <Icon icon={icon[variant]} css={{ height: "1.32em" }} />
+          <StyledIcon icon={icon[variant]} />
         </span>
         <div>
           {header && <p className={headerClasses}>{header}</p>}

package/src/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,

package/src/components/Button/Button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Ref, forwardRef, RefAttributes, useRef, ReactNode } from "react";
 import { useButton } from "@react-aria/button";
 import { useHover } from "@react-aria/interactions";

package/src/components/Checkbox/CheckboxContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { CheckboxGroupState } from "@react-stately/checkbox";
 import { createContext, Context, useContext } from "react";
 

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Children,
   forwardRef,

package/src/components/Checkbox/CheckboxGroupItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useRef } from "react";
 import { useCheckboxGroupItem } from "@react-aria/checkbox";
 import { useFocusRing } from "@react-aria/focus";

package/src/components/Checkbox/CheckboxItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useRef } from "react";
 import { useCheckbox } from "@react-aria/checkbox";
 import { useFocusRing } from "@react-aria/focus";

package/src/components/Chopin/PercentageTotalsQuestion/PercentageItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, FormEventHandler } from "react";
 import { NumberField } from "../../NumberField";
 

package/src/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import clsx from "clsx";
 import { Question, QuestionProps } from "../Question";

package/src/components/Chopin/Question/Question.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Children,
   cloneElement,

package/src/components/Chopin/QuestionGroup/QuestionGroup.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,

package/src/components/Chopin/QuestionHelp/QuestionHelp.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useFocusRing } from "@react-aria/focus";
 import clsx from "clsx";
 import { ReactNode, useRef } from "react";

package/src/components/Chopin/Steps/StepItem.tsx

@@ -9,6 +9,7 @@ import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
 import { tick } from "@simplybusiness/icons";
 import { Link } from "react-router-dom";
+import styled from '@emotion/styled';
 import { ForwardedRefComponent } from "../../../types/components";
 import { Icon } from "../../Icon";
 
@@ -32,6 +33,10 @@ export interface StepItemProps
 
 export type StepItemRef = Ref<StepItemElementType>;
 
+const StyledIcon = styled(Icon)`
+  height: 100%;
+`;
+
 const StepItem: ForwardedRefComponent<StepItemProps, StepItemElementType> =
   forwardRef((props: StepItemProps, ref: StepItemRef) => {
     const {
@@ -74,7 +79,7 @@ const StepItem: ForwardedRefComponent<StepItemProps, StepItemElementType> =
         {completed ? (
           <LinkElement className={linkClasses} href={url} to={to}>
             <span className={iconClasses}>
-              <Icon icon={tick} css={{ height: "100%" }} />
+              <StyledIcon icon={tick} />
             </span>
             <span className={nameClasses}>{name}</span>
           </LinkElement>

package/src/components/Chopin/TradeSelector/Listing/ListingItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useFocusRing } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import clsx from "clsx";

package/src/components/Chopin/TradeSelector/SearchResults/SearchResults.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { RefObject, useCallback, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { Listing } from "../Listing";

package/src/components/Chopin/TradeSelector/TradeInput/TradeInput.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { RefObject, ChangeEvent, MouseEvent } from "react";
 import { AriaLabelingProps, DOMProps } from "@react-types/shared";
 import clsx from "clsx";

package/src/components/Chopin/TradeSelector/TradeSelector.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRef,
   useState,

package/src/components/Chopin/TradeSelector/types.ts

@@ -74,6 +74,7 @@ export interface TradeSelectorProps
   labels?: LabelProps;
   hideLabel?: boolean;
   "data-cy"?: string;
+  "aria-describedby"?: string;
 }
 
 export type TradeSelectorRef = Ref<TradeSelectorElementType>;

package/src/components/Chopin/TradeSelector/useFetchTrades/useFetchTrades.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useEffect, useState } from "react";
 import debounce from "lodash.debounce";
 import { TradeProps } from "../types";

package/src/components/DatePicker/Calendar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCalendarState } from "@react-stately/calendar";
 import {
   CalendarProps as AriaCalendarProps,

package/src/components/DatePicker/CalendarButton.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Ref, forwardRef, RefAttributes, useRef, ReactNode } from "react";
 import { useButton } from "@react-aria/button";
 import { HoverProps, useHover } from "@react-aria/interactions";

package/src/components/DatePicker/CalendarCell.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { AriaCalendarCellProps, useCalendarCell } from "@react-aria/calendar";
 import { useFocusRing } from "@react-aria/focus";
 import { CalendarState } from "@react-stately/calendar";

package/src/components/DatePicker/CalendarGrid.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   AriaCalendarGridProps,
   CalendarProps,

package/src/components/DatePicker/DateField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useLocale } from "@react-aria/i18n";
 import { useDateFieldState } from "@react-stately/datepicker";
 import { AriaDateFieldProps, useDateField } from "@react-aria/datepicker";

package/src/components/DatePicker/DatePicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   DatePickerStateOptions,
   useDatePickerState,
@@ -65,7 +67,7 @@ export function DatePicker(props: DatePickerProps) {
 
   return (
     <ModalProvider>
-      <div className={classes} css={{ position: "relative" }}>
+      <div className={classes} style={{ position: "relative" }}>
         <Label {...labelProps}>{label}</Label>
         <div
           {...groupProps}

package/src/components/DatePicker/DateSegment.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useDateSegment } from "@react-aria/datepicker";
 import { useFocusRing } from "@react-aria/focus";
 import {

package/src/components/DatePicker/Popover.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FocusScope } from "@react-aria/focus";
 import { useDialog } from "@react-aria/dialog";
 import {
@@ -45,7 +47,7 @@ export function Popover(props: PopoverProps) {
         {...mergeProps(overlayProps, modalProps, dialogProps)}
         /* @ts-expect-error */
         ref={popoverRef}
-        css={{
+        style={{
           position: "absolute",
           marginTop: 4,
           zIndex: 1,

package/src/components/Divider/Divider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { DOMProps } from "@react-types/shared";
 import { useSeparator, SeparatorProps } from "@react-aria/separator";
 import clsx from "clsx";

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,

package/src/components/Fieldset/Fieldset.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,

package/src/components/Fieldset/stories/StyledLegend.tsx

@@ -1,12 +1,7 @@
-import { LegendProps } from "../Fieldset";
+import styled from '@emotion/styled';
 
-export const StyledLegend = (props: LegendProps) => (
-  <legend
-    css={{
-      marginBottom: "size-20",
-      paddingLeft: 0,
-      color: "primary",
-    }}
-    {...props}
-  />
-);
+export const StyledLegend = styled.legend`
+  margin-bottom: var(--size-20);
+  padding-left: 0;
+  color: var(--color-primary);
+`;

package/src/components/Flex/Flex.tsx

@@ -1,104 +1,8 @@
-import { Ref, forwardRef, ReactNode, RefAttributes } from "react";
-import type { Property } from "csstype";
-import { DOMProps } from "@react-types/shared";
+import { forwardRef } from "react";
 import clsx from "clsx";
 import { ForwardedRefComponent } from "../../types/components";
-
-export type FlexElementType = HTMLDivElement;
-
-export interface FlexStyleProps {
-  elementType?: string | React.ElementType;
-  flexDirection?: Property.FlexDirection;
-  flexWrap?: Property.FlexWrap;
-  flexGrow?: Property.FlexGrow;
-  flex?: Property.Flex;
-  /** Aligns grid items along the block (column) axis  */
-  alignItems?: Property.AlignItems;
-  /** Aligns the grid along the inline (row) axis */
-  alignContent?: Property.AlignContent;
-  /** Aligns the grid along the inline (row) axis */
-  justifyContent?: Property.JustifyContent;
-  /** How big a gap between the columns and rows */
-  gap?: Property.Gap;
-  /** How big a gap between the rows */
-  rowGap?: Property.RowGap;
-  /** How big a gap between the columns */
-  columnGap?: Property.ColumnGap;
-  style?: React.CSSProperties;
-}
-
-export interface FlexNonStyleProps
-  extends DOMProps,
-    RefAttributes<FlexElementType> {
-  children?: ReactNode;
-  /** Custom class name for setting specific CSS */
-  className?: string;
-}
-
-export interface FlexProps extends FlexStyleProps, FlexNonStyleProps {}
-
-export type FlexRef = Ref<FlexElementType>;
-
-const buildFlexStyles = (props: FlexStyleProps) => {
-  const {
-    flexDirection,
-    flexWrap,
-    flexGrow,
-    flex,
-    justifyContent,
-    alignItems,
-    alignContent,
-    gap,
-    rowGap,
-    columnGap,
-  } = props;
-
-  return {
-    display: "flex",
-    flexDirection,
-    flexWrap,
-    flexGrow,
-    flex,
-    justifyContent,
-    alignItems,
-    alignContent,
-    gap,
-    rowGap,
-    columnGap,
-  };
-};
-
-const splitProps = (props: FlexProps): [FlexStyleProps, FlexNonStyleProps] => {
-  const {
-    flexDirection,
-    flexWrap,
-    flexGrow,
-    flex,
-    justifyContent,
-    alignItems,
-    alignContent,
-    gap,
-    rowGap,
-    columnGap,
-    ...otherProps
-  } = props;
-
-  return [
-    {
-      flexDirection,
-      flexWrap,
-      flexGrow,
-      flex,
-      justifyContent,
-      alignItems,
-      alignContent,
-      gap,
-      rowGap,
-      columnGap,
-    },
-    otherProps,
-  ];
-};
+import { FlexElementType, FlexProps, FlexRef } from "./types";
+import { buildFlexStyles, splitProps } from "./propUtils";
 
 const Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(
   (props: FlexProps, ref: FlexRef) => {
@@ -109,7 +13,12 @@ const Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(
     const flexStyles = buildFlexStyles(styleProps);
 
     return (
-      <Element ref={ref} css={flexStyles} {...restProps} className={classes} />
+      <Element
+        ref={ref}
+        style={flexStyles}
+        {...restProps}
+        className={classes}
+      />
     );
   },
 );

package/src/components/Flex/index.tsx

@@ -1 +1,2 @@
 export * from "./Flex";
+export * from "./types";