@simplybusiness/mobius 3.4.4 → 3.5.0

package/src/components/MaskedField/MaskedField.test.tsx

@@ -0,0 +1,91 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MaskedField } from ".";
+
+describe("MaskedField", () => {
+  const LABEL = "MaskedField";
+
+  describe("given Social Security Number (SSN) pattern", () => {
+    it("should render user input to match the pattern", async () => {
+      const { getByLabelText } = render(
+        <MaskedField label={LABEL} pattern="ssn" />,
+      );
+      const inputField = getByLabelText(LABEL);
+      const inputValue = "1234567890";
+      const expectedUnformatted = "123456789";
+      const expectedFormatted = "123-45-6789";
+
+      await userEvent.tab();
+      await userEvent.type(inputField, inputValue);
+
+      expect(inputField).toHaveValue(expectedUnformatted);
+
+      await userEvent.tab();
+
+      expect(inputField).toHaveValue(expectedFormatted);
+    });
+
+    describe("given a numerical and non-numerical input", () => {
+      it("should only render numerical input", async () => {
+        const { getByLabelText } = render(
+          <MaskedField label={LABEL} pattern="ssn" />,
+        );
+        const inputField = getByLabelText(LABEL);
+        const inputValue = "abc1234567890efg";
+        const expectedUnformatted = "123456789";
+        const expectedFormatted = "123-45-6789";
+
+        await userEvent.tab();
+        await userEvent.type(inputField, inputValue);
+
+        expect(inputField).toHaveValue(expectedUnformatted);
+
+        await userEvent.tab();
+
+        expect(inputField).toHaveValue(expectedFormatted);
+      });
+    });
+  });
+
+  describe("given Federal Employer Identification Number (FEIN) pattern", () => {
+    it("should render user input to match the pattern", async () => {
+      const { getByLabelText } = render(
+        <MaskedField label={LABEL} pattern="fein" />,
+      );
+      const inputField = getByLabelText(LABEL);
+      const inputValue = "1234567890";
+      const expectedUnformatted = "123456789";
+      const expectedFormatted = "12-3456789";
+
+      await userEvent.tab();
+      await userEvent.type(inputField, inputValue);
+
+      expect(inputField).toHaveValue(expectedUnformatted);
+
+      await userEvent.tab();
+
+      expect(inputField).toHaveValue(expectedFormatted);
+    });
+
+    describe("given a numerical and non-numerical input", () => {
+      it("should only render numerical input", async () => {
+        const { getByLabelText } = render(
+          <MaskedField label={LABEL} pattern="fein" />,
+        );
+        const inputField = getByLabelText(LABEL);
+        const inputValue = "abc1234567890efg";
+        const expectedUnformatted = "123456789";
+        const expectedFormatted = "12-3456789";
+
+        await userEvent.tab();
+        await userEvent.type(inputField, inputValue);
+
+        expect(inputField).toHaveValue(expectedUnformatted);
+
+        await userEvent.tab();
+
+        expect(inputField).toHaveValue(expectedFormatted);
+      });
+    });
+  });
+});

package/src/components/MaskedField/MaskedField.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { Ref, forwardRef, useState, useEffect } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+import { TextField, TextFieldElementType, TextFieldProps } from "../TextField";
+import { INPUT_FORMATTERS } from "./inputFormatters";
+
+export type MaskedFieldElementType = HTMLInputElement;
+
+export interface MaskedFieldProps extends TextFieldProps, DOMProps {
+  pattern: "ssn" | "fein";
+}
+
+export type MaskedFieldRef = Ref<MaskedFieldElementType>;
+
+const MaskedField: ForwardedRefComponent<
+  MaskedFieldProps,
+  TextFieldElementType
+> = forwardRef((props: MaskedFieldProps, ref: MaskedFieldRef) => {
+  const { pattern, ...otherProps } = props;
+  const [isEditable, setIsEditable] = useState<boolean>(false);
+  const [unformatted, setUnformatted] = useState<string>("");
+  const [formatted, setFormatted] = useState<string>("");
+  const inputValue = isEditable ? unformatted : formatted;
+
+  const handleChange = (value: string) => {
+    const trimmedValue = INPUT_FORMATTERS[pattern].clean(value);
+    setUnformatted(trimmedValue);
+  };
+
+  const toggleEditable = () => {
+    setIsEditable(!isEditable);
+  };
+
+  useEffect(() => {
+    const formattedValue = INPUT_FORMATTERS[pattern].transform(unformatted);
+    setFormatted(formattedValue);
+  }, [pattern, unformatted]);
+
+  const classes = clsx("mobius", "mobius/MaskedField", otherProps.className);
+
+  return (
+    <TextField
+      onChange={handleChange}
+      value={inputValue}
+      className={classes}
+      ref={ref}
+      onFocus={toggleEditable}
+      onBlur={toggleEditable}
+      {...otherProps}
+    />
+  );
+});
+
+MaskedField.displayName = "MaskedField";
+export { MaskedField };

package/src/components/MaskedField/index.tsx

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

package/src/components/MaskedField/inputFormatters.ts

@@ -0,0 +1,42 @@
+// SSN - Social Security Number. Format: XXX-XX-XXXX
+// FEIN - Federal Employer Identification Number. Format: XX-XXXXXXX
+
+const SSN_LENGTH = 9;
+const FEIN_LENGTH = 9;
+
+export const INPUT_FORMATTERS = {
+  ssn: {
+    clean: (value: string) => value.replace(/\D/g, "").slice(0, SSN_LENGTH),
+    transform: (value: string) => {
+      const startLength = 3;
+      const middleLength = 2;
+      const start = value.slice(0, 3);
+      const middle = value.slice(3, 5);
+      const end = value.slice(5, SSN_LENGTH);
+
+      if (value.length > startLength + middleLength) {
+        return `${start}-${middle}-${end}`;
+      }
+
+      if (value.length > startLength) {
+        return `${start}-${middle}`;
+      }
+
+      return start;
+    },
+  },
+  fein: {
+    clean: (value: string) => value.replace(/\D/g, "").slice(0, FEIN_LENGTH),
+    transform: (value: string) => {
+      const startLength = 2;
+      const start = value.slice(0, 2);
+      const end = value.slice(2, FEIN_LENGTH);
+
+      if (value.length > startLength) {
+        return `${start}-${end}`;
+      }
+
+      return start;
+    },
+  },
+};

package/src/components/Modal/Modal.tsx

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

package/src/components/NumberField/NumberField.tsx

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

package/src/components/NumberField/NumberFieldButton.tsx

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

package/src/components/NumberField/__snapshots__/NumberField.test.tsx.snap

@@ -37,9 +37,10 @@ exports[`NumberField should match snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="mobius mobius/Icon css-jnky18"
+          class="mobius mobius/Icon"
           focusable="false"
           role="img"
+          style="height: 1em; vertical-align: -0.2em; transform-origin: center;"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -58,9 +59,10 @@ exports[`NumberField should match snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="mobius mobius/Icon css-jnky18"
+          class="mobius mobius/Icon"
           focusable="false"
           role="img"
+          style="height: 1em; vertical-align: -0.2em; transform-origin: center;"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >

package/src/components/PasswordField/PasswordField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import clsx from "clsx";
 import { forwardRef, useState, useRef } from "react";
 import { mergeRefs } from "../../utils/mergeRefs";

package/src/components/Progress/Progress.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint no-console: "off" */
 import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
 import { DOMProps } from "@react-types/shared";
@@ -118,7 +120,7 @@ const Progress: ForwardedRefComponent<ProgressProps, ProgressElementType> =
           </Label>
         )}
         <div className="mobius/ProgressTrack">
-          <div className="mobius/ProgressBar" css={{ width: barWidth }} />
+          <div className="mobius/ProgressBar" style={{ width: barWidth }} />
         </div>
         {showValueLabel && (
           <Label data-testid="value-label">

package/src/components/Radio/Radio.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, ReactNode, useContext, Ref, RefAttributes } from "react";
 import { useRadio } from "@react-aria/radio";
 import { AriaRadioProps } from "@react-types/radio";
@@ -5,6 +7,7 @@ import { useFocusRing } from "@react-aria/focus";
 import { useHover, HoverProps } from "@react-aria/interactions";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
+import styled from '@emotion/styled';
 import { RadioContext } from "./RadioContext";
 import { ForwardedRefComponent } from "../../types/components";
 import { ErrorMessage } from "../ErrorMessage";
@@ -25,6 +28,11 @@ export interface RadioProps
 
 export type RadioRef = Ref<RadioElementType>;
 
+const StyledLabel = styled(Label)`
+  display: flex;
+  align-items: center;
+`;
+
 const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
   (props: RadioProps, ref: RadioRef) => {
     const radioContext = useContext(RadioContext);
@@ -83,8 +91,7 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
 
     return (
       <>
-        <Label
-          css={{ display: "flex", alignItems: "center" }}
+        <StyledLabel
           {...hoverProps}
           className={containerClasses}
         >
@@ -105,7 +112,7 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
           ) : (
             <div className="mobius/RadioContent">{label || children}</div>
           )}
-        </Label>
+        </StyledLabel>
         {errorMessage && <ErrorMessage errorMessage={errorMessage} />}
       </>
     );

package/src/components/Radio/RadioButton.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRef,
   ReactNode,
@@ -12,6 +14,7 @@ import { useFocusRing } from "@react-aria/focus";
 import { useHover, HoverProps } from "@react-aria/interactions";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
+import styled from '@emotion/styled';
 import { RadioContext } from "./RadioContext";
 import { ForwardedRefComponent } from "../../types/components";
 
@@ -29,6 +32,11 @@ export interface RadioButtonProps
 
 export type RadioButtonRef = Ref<RadioButtonElementType>;
 
+const StyledLabel = styled.label`
+  display: flex;
+  align-items: center;
+`;
+
 const RadioButton: ForwardedRefComponent<
   RadioButtonProps,
   RadioButtonElementType
@@ -89,7 +97,7 @@ const RadioButton: ForwardedRefComponent<
 
   if (children) {
     // Determine type of children (label or icon) and map to relevant HTML span
-    const childMap = { label };
+    const childMap: any = { label };
 
     Children.map(children, child => {
       const childType =
@@ -110,14 +118,13 @@ const RadioButton: ForwardedRefComponent<
   }
 
   return (
-    <label
-      css={{ display: "flex", alignItems: "center" }}
+    <StyledLabel
       className={containerClasses}
       {...hoverProps}
     >
       {nativeInput}
       {content}
-    </label>
+    </StyledLabel>
   );
 });
 

package/src/components/Radio/RadioContext.tsx

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

package/src/components/Radio/RadioGroup.tsx

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

package/src/components/SVG/SVG.test.tsx

@@ -11,13 +11,13 @@ const SvgImage = (
 
 describe("Test for SVG", () => {
   it("should render without errors", () => {
-    render(<SVG css={{ fill: "primary", width: "size-100" }}>{SvgImage}</SVG>);
+    render(<SVG>{SvgImage}</SVG>);
   });
 
   describe("uses correct class names", () => {
     it("uses Mobius class", () => {
       render(
-        <SVG css={{ fill: "primary", width: "size-100" }} data-testid="test">
+        <SVG data-testid="test">
           {SvgImage}
         </SVG>,
       );
@@ -26,7 +26,7 @@ describe("Test for SVG", () => {
 
     it("uses base Mobius class", () => {
       render(
-        <SVG css={{ fill: "primary", width: "size-100" }} data-testid="test">
+        <SVG data-testid="test">
           {SvgImage}
         </SVG>,
       );
@@ -36,7 +36,6 @@ describe("Test for SVG", () => {
     it("includes custom class name", () => {
       render(
         <SVG
-          css={{ fill: "primary", width: "size-100" }}
           data-testid="test"
           className="my-class"
         >

package/src/components/SVG/SVG.tsx

@@ -6,6 +6,7 @@ import { ForwardedRefComponent } from "../../types/components";
 export interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {
   children: React.ReactElement<React.SVGProps<SVGSVGElement>>;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export type SVGRef = Ref<SVGSVGElement>;

package/src/components/Select/Select.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRef,
   ReactElement,
@@ -11,6 +13,7 @@ import clsx from "clsx";
 import { useFocusRing } from "@react-aria/focus";
 import { HoverProps, useHover } from "@react-aria/interactions";
 import { useSlotId } from "@react-aria/utils";
+import styled from '@emotion/styled';
 import { ForwardedRefComponent } from "../../types/components";
 import { Flex } from "../Flex";
 import { ErrorMessage } from "../ErrorMessage";
@@ -32,10 +35,15 @@ export interface SelectProps
   className?: string;
   errorMessage?: string;
   children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;
+  "aria-describedby"?: string;
 }
 
 export type SelectRef = Ref<SelectElementType>;
 
+const ColumnFlex = styled(Flex)`
+  flex-direction: column;
+`;
+
 const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
   forwardRef((props: SelectProps, ref: SelectRef) => {
     const {
@@ -94,9 +102,8 @@ const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
     ]);
 
     return (
-      <Flex
+      <ColumnFlex
         className="mobius mobius/SelectOuter"
-        css={{ flexDirection: "column" }}
       >
         {label && (
           <Label {...labelProps} className={labelClasses}>
@@ -124,7 +131,7 @@ const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
           <span className={iconClasses} />
         </div>
         <ErrorMessage id={errorMessageId} errorMessage={errorMessage} />
-      </Flex>
+      </ColumnFlex>
     );
   });
 

package/src/components/Slider/Slider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useRef } from "react";
 import { useSlider } from "@react-aria/slider";
 import { SliderProps as SpectrumSliderProps } from "@react-types/slider";
@@ -5,6 +7,7 @@ import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
 import clsx from "clsx";
 import { DOMProps } from "@react-types/shared";
+import styled from '@emotion/styled';
 import { SliderThumb } from "./Thumb";
 import { Label } from "../Label";
 import { useUnwrappedHandler, useWrappedValue } from "./helpers";
@@ -19,6 +22,29 @@ export interface SliderProps extends SpectrumSliderProps<number>, DOMProps {
   formatOptions?: Intl.NumberFormatOptions;
 }
 
+const SliderWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  touch-action: none;
+`;
+
+const SliderLabelWrapper = styled.div`
+  display: flex;
+  align-self: stretch;
+`;
+
+const SliderTrackWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const SliderTrack = styled.div`
+  position: absolute;
+  width: 100%;
+`;
+
 export function Slider(props: SliderProps) {
   const {
     className,
@@ -70,19 +96,12 @@ export function Slider(props: SliderProps) {
   });
 
   return (
-    <div
+    <SliderWrapper
       {...groupProps}
-      css={{
-        position: "relative",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        touchAction: "none",
-      }}
       className={classes}
     >
       {/* Create a flex container for the label and output element. */}
-      <div css={{ display: "flex", alignSelf: "stretch" }}>
+      <SliderLabelWrapper>
         {label && <Label {...labelProps}>{label}</Label>}
         {label && (
           <output
@@ -92,26 +111,18 @@ export function Slider(props: SliderProps) {
             {state.getThumbValueLabel(0)}
           </output>
         )}
-      </div>
+      </SliderLabelWrapper>
       {/* The track element holds the visible track line and the thumb. */}
-      <div
+      <SliderTrackWrapper
         {...trackProps}
         ref={trackRef}
         className="mobius mobius/SliderTrackWrapper"
-        css={{
-          position: "relative",
-          width: "100%",
-        }}
       >
-        <div
+        <SliderTrack
           className="mobius/SliderTrack"
-          css={{
-            position: "absolute",
-            width: "100%",
-          }}
         />
         <SliderThumb index={0} state={state} trackRef={trackRef} />
-      </div>
+      </SliderTrackWrapper>
       <div className="mobius/SliderLabels">
         <div className="mobius/SliderMinLabel" data-testid="min-label">
           {minLabel}
@@ -120,6 +131,6 @@ export function Slider(props: SliderProps) {
           {maxLabel}
         </div>
       </div>
-    </div>
+    </SliderWrapper>
   );
 }

package/src/components/Slider/Thumb.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { RefObject, useRef } from "react";
 import { useFocusRing } from "@react-aria/focus";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
@@ -6,12 +8,19 @@ import { useSliderThumb } from "@react-aria/slider";
 import { SliderThumbProps as SpectrumSliderThumbProps } from "@react-types/slider";
 import { SliderState } from "@react-stately/slider";
 import clsx from "clsx";
+import styled from '@emotion/styled';
 
 export interface SliderThumbProps extends SpectrumSliderThumbProps {
   state: SliderState;
   trackRef: RefObject<HTMLElement>;
 }
 
+const StyledThumb = styled.div`
+  position: absolute;
+  top: calc(50% - 1px);
+  transform: translateX(-50%);
+`;
+
 export function SliderThumb(props: SliderThumbProps) {
   const { state, trackRef, index, isDisabled } = props;
   const inputRef = useRef(null);
@@ -35,11 +44,8 @@ export function SliderThumb(props: SliderThumbProps) {
   const thumbClasses = clsx("mobius", "mobius/SliderThumb", classes);
 
   return (
-    <div
-      css={{
-        position: "absolute",
-        top: "calc(50% - 1px)",
-        transform: "translateX(-50%)",
+    <StyledThumb
+      style={{
         left: `${state.getThumbPercent(index) * 100}%`,
       }}
       className={wrapperClasses}
@@ -49,6 +55,6 @@ export function SliderThumb(props: SliderThumbProps) {
           <input ref={inputRef} {...mergeProps(inputProps, focusProps)} />
         </VisuallyHidden>
       </div>
-    </div>
+    </StyledThumb>
   );
 }

package/src/components/TextArea/TextArea.tsx

@@ -1,9 +1,12 @@
+"use client";
+
 import { Ref, forwardRef, RefObject, RefAttributes } from "react";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
 import { AriaTextFieldOptions, useTextField } from "@react-aria/textfield";
 import { useFocusRing } from "@react-aria/focus";
 import { HoverProps, useHover } from "@react-aria/interactions";
+import styled from '@emotion/styled';
 import { TextAreaInput } from "../TextAreaInput";
 import { Label } from "../Label";
 import { ForwardedRefComponent } from "../../types/components";
@@ -24,6 +27,10 @@ export interface TextAreaProps
 
 export type TextAreaRef = Ref<TextAreaElementType>;
 
+const ColumnFlex = styled(Flex)`
+  flex-direction: column;
+`;
+
 const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
   forwardRef((props: TextAreaProps, ref: TextAreaRef) => {
     const {
@@ -70,8 +77,7 @@ const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
     });
 
     return (
-      <Flex
-        css={{ flexDirection: "column" }}
+      <ColumnFlex
         className={classes}
         {...focusProps}
       >
@@ -91,7 +97,7 @@ const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
           aria-invalid={errorMessage != null}
         />
         <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />
-      </Flex>
+      </ColumnFlex>
     );
   });