@simplybusiness/mobius 3.4.4 → 3.5.0

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";