@simplybusiness/mobius 3.4.5 → 3.5.1

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>
     );
   });
 

package/src/components/TextField/TextField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,
@@ -11,6 +13,7 @@ import { useHover } from "@react-aria/interactions";
 import { useFocusRing } from "@react-aria/focus";
 import { FocusEvents, HoverEvents, DOMProps } from "@react-types/shared";
 import clsx from "clsx";
+import styled from "@emotion/styled";
 import { Label } from "../Label";
 import { ErrorMessage } from "../ErrorMessage";
 import { ForwardedRefComponent } from "../../types/components";
@@ -47,6 +50,10 @@ export interface TextFieldProps
 
 export type TextFieldRef = Ref<TextFieldElementType>;
 
+const ColumnFlex = styled(Flex)`
+  flex-direction: column;
+`;
+
 const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
   forwardRef((props: TextFieldProps, ref: TextFieldRef) => {
     const {
@@ -101,8 +108,7 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
     const inputClasses = clsx("mobius", "mobius/TextInput", textfieldClasses);
 
     return (
-      <Flex
-        css={{ flexDirection: "column" }}
+      <ColumnFlex
         className={containerClasses}
         {...focusProps}
       >
@@ -125,7 +131,7 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
           <div className="mobius/TextFieldChildren">{children}</div>
         </div>
         <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />
-      </Flex>
+      </ColumnFlex>
     );
   });
 

package/src/components/VisuallyHidden/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 export {
   VisuallyHidden,
   useVisuallyHidden,

package/src/components/index.tsx

@@ -3,11 +3,13 @@ import * as Chopin from "./Chopin";
 export { Chopin };
 
 export * from "./Accordion";
+export * from "./Alert";
 export * from "./Box";
 export * from "./Breadcrumbs";
 export * from "./Button";
 export * from "./Checkbox";
 export * from "./Container";
+export * from "./DataTable";
 export * from "./DatePicker";
 export * from "./Divider";
 export * from "./DropdownMenu";
@@ -22,8 +24,11 @@ export * from "./Link";
 export * from "./LinkButton";
 export * from "./List";
 export * from "./LoadingIndicator";
+export * from "./MaskedField";
 export * from "./Modal";
+export * from "./NumberField";
 export * from "./Option";
+export * from "./PasswordField";
 export * from "./Progress";
 export * from "./Radio";
 export * from "./Segment";
@@ -35,9 +40,5 @@ export * from "./Text";
 export * from "./TextArea";
 export * from "./TextAreaInput";
 export * from "./TextField";
-export * from "./Alert";
-export * from "./VisuallyHidden";
 export * from "./Title";
-export * from "./DataTable";
-export * from "./PasswordField";
-export * from "./NumberField";
+export * from "./VisuallyHidden";

package/src/contexts/ThemeContext/ThemeContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, createContext, useCallback, useMemo } from "react";
 import * as baseIcons from "@simplybusiness/icons";
 import { SizeType, IconDefinition } from "../../types";

package/src/hooks/useBreakpoint/useBreakpoint.tsx

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

package/src/hooks/useHideColumns/useHideColumns.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { CollapseDataType } from "../../components/DataTable/types";
 import { useBreakpoint } from "../useBreakpoint";

package/src/hooks/useOnClickOutside/useOnClickOutside.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, RefObject } from "react";
 
 export const useOnClickOutside = (

package/src/hooks/useWindowEvent/useWindowEvent.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 
 function normaliseOptions(

package/src/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 export * from "./components";
 export * from "./contexts";
 export * from "./hooks";