@codeleap/web 3.16.2 → 3.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.16.2",
+  "version": "3.18.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/ActionIcon/index.tsx

@@ -20,6 +20,7 @@ export type ActionIconProps = Omit<TouchableProps, 'styles' | 'variants'> & Comp
 
 const defaultProps: Partial<ActionIconProps> = {
   disabled: false,
+  tabIndex: 0,
 }
 
 export const ActionIcon = (props: ActionIconProps) => {
@@ -28,7 +29,7 @@ export const ActionIcon = (props: ActionIconProps) => {
     ...props,
   }
 
-  const { 
+  const {
     icon,
     name,
     iconProps,
@@ -39,30 +40,31 @@ export const ActionIcon = (props: ActionIconProps) => {
     children,
     disabled,
     debugName,
-    ...touchableProps 
+    ...touchableProps
   } = allProps
-  
+
   const variantStyles = useDefaultComponentStyle<'u:ActionIcon', typeof ActionIconPresets>('u:ActionIcon', {
     responsiveVariants,
-    variants, 
+    variants,
     styles,
-    rootElement: 'touchableWrapper'
+    rootElement: 'touchableWrapper',
   })
 
   const isPressable = TypeGuards.isFunction(onPress) && !disabled
 
   const WrapperComponent: any = isPressable ? Touchable : View
 
-  const handlePress = () => {
+  const handlePress = (e) => {
     if (!isPressable) return
-
-    if (onPress) onPress?.()
+    if (onPress && (e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter')) {
+      onPress?.()
+    }
   }
 
   const getStyles = (key: ActionIconParts) => ({
     ...variantStyles[key],
     ...(disabled ? variantStyles[`${key}:disabled`] : {}),
-    ...(isPressable ? variantStyles[`${key}:pressable`] : {})
+    ...(isPressable ? variantStyles[`${key}:pressable`] : {}),
   })
 
   return (
@@ -72,7 +74,8 @@ export const ActionIcon = (props: ActionIconProps) => {
       debugName={debugName}
       {
         ...(isPressable && {
-          onPress: handlePress,
+          onPress: () => handlePress({ type: 'click' }),
+          onKeyDown: handlePress,
         })
       }
       {...touchableProps}

package/src/components/CropPicker/index.tsx

@@ -6,7 +6,7 @@ import {
 import { CropPickerPresets } from './styles'
 import { CropPickerProps } from './types'
 import { useCropPicker } from './useCropPicker'
-import { Modal, Button, FileInput, FileInputRef } from '../components'
+import { Modal, Button, FileInput, FileInputRef, LoadingOverlay } from '../components'
 
 const ReactCrop: React.Component = require('react-image-crop').Component
 import 'react-image-crop/dist/ReactCrop.css'
@@ -35,6 +35,7 @@ export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
       confirmButton = 'Confirm Crop',
       debugName,
       handle,
+      withLoading = false,
       ...fileInputProps
     } = allProps
 
@@ -47,6 +48,7 @@ export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
       image,
       crop,
       setRelativeCrop,
+      isLoading,
       handleCropChange,
     } = handle || useCropPicker({ onFileSelect, ref, ...targetCrop })
 
@@ -98,6 +100,14 @@ export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
               />
             </ReactCrop>
           )}
+          {
+            withLoading ? (
+              <LoadingOverlay
+                debugName='CropPicker'
+                visible={isLoading}
+              />
+            ) : null
+          }
         </Modal>
       </>
     )

package/src/components/CropPicker/types.ts

@@ -19,6 +19,7 @@ export type CropPickerProps = Partial<FileInputProps> &
     debugName: string
     handle?: ReturnType<typeof useCropPicker>
     ref: AnyRef<HTMLElement>
+    withLoading?: boolean
   }
 
 export type ImageReading = HTMLImageElement

package/src/components/CropPicker/useCropPicker.tsx

@@ -23,6 +23,7 @@ export function useCropPicker({
   const [image, setImage] = useState<ImageReading>(null)
   const [crop, setCrop] = useState<Crop>()
   const [relativeCrop, setRelativeCrop] = useState<Crop>()
+  const [isLoading, setIsLoading] = useState(false)
   const croppedPromise = usePromise<WebInputFile[]>({})
 
   const onCancel = () => croppedPromise.resolve([])
@@ -40,6 +41,7 @@ export function useCropPicker({
   }
 
   const onConfirmCrop = async () => {
+    setIsLoading(true)
     const [preview, croppedFile] = await cropImage(image, relativeCrop)
     onResolved([
       {
@@ -47,6 +49,7 @@ export function useCropPicker({
         preview,
       },
     ])
+    setIsLoading(false)
     setTimeout(() => cleanup())
   }
 
@@ -127,6 +130,7 @@ export function useCropPicker({
     setCrop,
     relativeCrop,
     setRelativeCrop,
+    isLoading,
     croppedPromise,
     handleCropChange,
   }

package/src/components/Grid/index.tsx

@@ -88,7 +88,7 @@ export function Grid<T = any>(props: GridProps<T>) {
       isOnly,
       isLast,
       isFirst,
-      item: _item?.data
+      item: _item?.data,
     }
 
     if (!_itemProps?.item) return null

package/src/components/Modal/index.tsx

@@ -185,7 +185,7 @@ export const ModalContent = (
   } = modalProps
 
   const id = useId()
-
+  const modalRef = useRef(null)
   const variantStyles = useDefaultComponentStyle<'u:Modal', typeof ModalPresets>('u:Modal', {
     responsiveVariants,
     variants,
@@ -210,6 +210,39 @@ export const ModalContent = (
     }
   }
 
+  const handleTabKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, { firstElement, lastElement }: Record<'firstElement' |'lastElement', HTMLDivElement>) => {
+    if (e.key === 'Tab' || e?.keyCode === 9) {
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault()
+        lastElement.focus()
+      } else if (
+        !e.shiftKey &&
+        document.activeElement === lastElement
+      ) {
+        e.preventDefault()
+        firstElement.focus()
+      }
+    }
+  }
+
+  onUpdate(() => {
+    if (visible) {
+      const modalElement = modalRef.current
+
+      const focusableElements = modalElement.querySelectorAll('[tabindex]:not([tabindex="-1"])') as NodeListOf<HTMLDivElement>
+      const firstElement = focusableElements[0]
+      const lastElement = focusableElements[focusableElements.length - 1]
+
+      modalElement.addEventListener('keydown', (e) => handleTabKeyPress(e, { firstElement, lastElement }))
+      modalElement.addEventListener('keydown', closeOnEscPress)
+
+      return () => {
+        modalElement.removeEventListener('keydown', (e) => handleTabKeyPress(e, { firstElement, lastElement }))
+        modalElement.removeEventListener('keydown', closeOnEscPress)
+      }
+    }
+  }, [visible])
+
   useIsomorphicEffect(() => {
     const modal = document.getElementById(id)
     if (modal) modal.focus()
@@ -227,6 +260,7 @@ export const ModalContent = (
 
   return (
     <View
+      ref={modalRef}
       aria-hidden={!visible}
       css={[
         variantStyles.wrapper,
@@ -266,7 +300,6 @@ export const ModalContent = (
             style,
           ]}
           className='content'
-          onKeyDown={closeOnEscPress}
           tabIndex={0}
           id={id}
           aria-modal={true}

package/src/components/SegmentedControl/index.tsx

@@ -135,7 +135,9 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
     largestWidth,
   ]
 
-  const onSelectTab = (option: SegmentedControlOptionProps) => {
+  const onSelectTab = (option: SegmentedControlOptionProps, e?: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!!e && e?.keyCode !== 13 || e?.key !== 'Enter') return null
+
     if (!debounceEnabled || !TypeGuards.isNumber(debounce)) {
       onValueChange(option.value)
       return
@@ -171,6 +173,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
             label={o.label}
             value={o.value}
             onPress={() => onSelectTab(o)}
+            onKeyDown={(e) => onSelectTab(o, e)}
             key={idx}
             icon={o.icon}
             selected={value === o.value}
@@ -179,6 +182,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
             disabled={disabled}
             textProps={textProps}
             iconProps={iconProps}
+            tabIndex={0}
             {...props?.touchableProps}
           />
         ))}

package/src/components/Switch/index.tsx

@@ -89,10 +89,12 @@ export const Switch = (props: SwitchProps) => {
 
   const _switchOnLeft = switchOnLeft ?? variantStyles.__props?.switchOnLeft
 
-  const handleChange = () => {
+  const handleChange = (e?: React.KeyboardEvent<HTMLDivElement>) => {
     if (disabled) return
-    if (onValueChange) onValueChange?.(!value)
-    if (onChange) onChange?.(!value)
+    if (e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter') {
+      if (onValueChange) onValueChange?.(!value)
+      if (onChange) onChange?.(!value)
+    }
   }
 
   return <InputBase
@@ -118,6 +120,8 @@ export const Switch = (props: SwitchProps) => {
       animate={trackAnimation}
       transition={variantStyles['track:transition']}
       onClick={handleChange}
+      onKeyDown={handleChange}
+      tabIndex={0}
     >
       <motion.div
         css={[

package/src/components/Touchable/index.tsx

@@ -38,6 +38,7 @@ const defaultProps: TouchableProps<'button'> = {
   analyticsEnabled: false,
   analyticsName: null,
   analyticsData: {},
+  tabIndex: 0,
 }
 export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
   touchableProps: TouchableProps<T>,
@@ -105,6 +106,8 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
     }
 
     const _onPress = () => {
+      if (!!event && event?.keyCode !== 13 || event?.key !== 'Enter') return null
+
       logger.log(
         `<${debugComponent || 'Touchable'}/> pressed`,
         { debugName, debugComponent },
@@ -150,6 +153,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
       {...props}
       debugName={debugName}
       onClick={handleClick}
+      onKeyDown={handleClick}
       ref={ref}
       css={_styles}
     />