Merge pull request #178 from WestpacGEL/fixes/adding-use-client

Fixes/adding 'use client'

packages/ui/src/components/accordion/accordion.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useAccordion } from '@react-aria/accordion';
 import { filterDOMProps } from '@react-aria/utils';
 import { useDOMRef } from '@react-spectrum/utils';

packages/ui/src/components/alert/alert.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useState } from 'react';
 

packages/ui/src/components/autocomplete/autocomplete.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useButton, useComboBox, useFilter, useSearchField } from 'react-aria';
 import { Item, useComboBoxState, useSearchFieldState } from 'react-stately';

packages/ui/src/components/badge/badge.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef } from 'react';
 
 import { styles } from './badge.styles.js';

packages/ui/src/components/breadcrumb/breadcrumb.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { Children, FunctionComponentElement, cloneElement } from 'react';
 import { useBreadcrumbs } from 'react-aria';
 

packages/ui/src/components/button-dropdown/button-dropdown.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useCallback, useEffect, useId, useRef } from 'react';
 import { useButton, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';

packages/ui/src/components/button-group/button-group.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactElement, cloneElement, createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';

packages/ui/src/components/button/button.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 

packages/ui/src/components/checkbox-group/checkbox-group.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactElement, cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';

packages/ui/src/components/collapsible/collapsible.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useId, useState } from 'react';
 

packages/ui/src/components/compacta/compacta.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 

packages/ui/src/components/date-picker/date-picker.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { styles } from './date-picker.styles.js';

packages/ui/src/components/field/field.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { Children, ReactNode, cloneElement, isValidElement, useCallback } from 'react';
 import { useField } from 'react-aria';
 

packages/ui/src/components/flexi-cell/flexi-cell.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 

packages/ui/src/components/form/form.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { createContext, useContext } from 'react';
 
 import { ErrorMessage } from '../error-message/index.js';

packages/ui/src/components/input-field/input-field.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { Children, ReactNode, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
 
 import { ErrorMessage, FormHint, FormLabel } from '../index.js';

packages/ui/src/components/input/input.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ForwardedRef, forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 

packages/ui/src/components/link/link.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef, useRef } from 'react';
 import { mergeProps, useFocusRing, useLink } from 'react-aria';
 

packages/ui/src/components/list/list.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { Children, ReactElement, cloneElement, createContext, useContext } from 'react';
 
 import { Item } from './components/item/index.js';

packages/ui/src/components/modal/modal.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import { Backdrop, Dialog } from './components/index.js';

packages/ui/src/components/pagination/pagination.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useCallback, useMemo } from 'react';
 
 import { PaginationItem } from './components/index.js';

packages/ui/src/components/popover/popover.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useCallback, useEffect, useId } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 

packages/ui/src/components/progress-bar/progress-bar.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { useProgressBar } from 'react-aria';
 

packages/ui/src/components/progress-rope/progress-rope.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { ProgressRopeGroupStep, ProgressRopeStep } from './components/index.js';

packages/ui/src/components/radio-group/radio-group.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactElement, cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';

packages/ui/src/components/repeater/repeater.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useFocusRing } from 'react-aria';

packages/ui/src/components/select/select.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ForwardedRef, forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 

packages/ui/src/components/selector/selector.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {

packages/ui/src/components/skip-link/skip-link.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef } from 'react';
 
 import { styles } from './skip-link.styles.js';

packages/ui/src/components/switch/switch.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useId, useRef } from 'react';
 import { VisuallyHidden, mergeProps, useCheckbox, useFocusRing } from 'react-aria';
 import { useToggleState } from 'react-stately';

packages/ui/src/components/table/table.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { createContext } from 'react';
 
 import { Body, Caption, Cell, Footer, Header, HeaderCell, HeaderRow, Row } from './components/index.js';

packages/ui/src/components/tabs/tabs.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useRef } from 'react';
 import { useTabList } from 'react-aria';
 import { Item, useTabListState } from 'react-stately';

packages/ui/src/components/textarea/textarea.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ForwardedRef, forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';