@codeleap/web 3.17.0 → 3.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.17.0",
+  "version": "3.18.1",
   "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/Checkbox/index.tsx

@@ -113,9 +113,9 @@ export const Checkbox = (props: CheckboxProps) => {
 
   const _checkboxOnLeft = checkboxOnLeft ?? variantStyles.__props?.checkboxOnLeft
 
-  const handleChange = () => {
+  const handleChange = (e) => {
     if (disabled) return
-    if (onValueChange) onValueChange?.(!value)
+    if (onValueChange && (e?.type === 'click' || e?.keyCode === 13 || e?.key === 'Enter')) onValueChange?.(!value)
   }
 
   return <InputBase
@@ -142,6 +142,8 @@ export const Checkbox = (props: CheckboxProps) => {
       animate={boxAnimation}
       transition={variantStyles['box:transition']}
       onClick={handleChange}
+      onKeyDown={handleChange}
+      tabIndex={0}
     >
       <motion.div
         css={[
@@ -151,6 +153,7 @@ export const Checkbox = (props: CheckboxProps) => {
         initial={false}
         animate={checkmarkWrapperAnimation}
         transition={variantStyles['checkmarkWrapper:transition']}
+
       >
         <Icon
           debugName={debugName}

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?.type !== 'click' && 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}
     />