@codeleap/web 3.21.6 → 3.21.8

package/package.json

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

package/src/components/TextInput/index.tsx

@@ -117,6 +117,10 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
   useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
+        if (isMasked) {
+          innerInputRef.current?.getInputDOMNode()?.focus()
+        }
+        
         innerInputRef.current?.focus?.()
       },
       isTextInput: true,
@@ -221,7 +225,9 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
       innerWrapperProps={{
         ...(inputBaseProps.innerWrapperProps || {}),
         [inputBaseAction]: () => {
-          // if (isMasked) innerInputRef.current?.onFocus?.()
+          if (isMasked) {
+            innerInputRef.current?.getInputDOMNode()?.focus()
+          }
           innerInputRef.current?.focus?.()
           if (isPressable) onPress?.()
         },

package/src/lib/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './pollyfils/scroll'
 export * from './stopPropagation'
+export * from './useMaxContentWidth'
 export { default as url } from 'url-parse'
 export { default as Cookies } from './cookies'
 

package/src/lib/utils/useMaxContentWidth.ts

@@ -0,0 +1,49 @@
+import { useCodeleapContext } from '@codeleap/common'
+import { useWindowSize } from '../hooks'
+
+export const useMaxContentWidth = () => {
+
+  const { Theme } = useCodeleapContext()
+  const [width, height] = useWindowSize()
+
+  const breakpoints: Record<string, number> = Theme.breakpoints
+
+  const safeHorizontalPaddings = Theme.safeHorizontalPaddings()
+
+  const entries = Object.keys(safeHorizontalPaddings)
+
+  const sortedBreakpointsValues = Object.entries(breakpoints).sort((a, b) => b?.[1] - a?.[1])
+  const highestBreakpoint = sortedBreakpointsValues[0]
+
+  let currentBreakpoint = null
+  let maxContentWidth = Theme.values.maxContentWidth
+
+  const maxBreakpointEntryName = highestBreakpoint[0]
+
+  const maxPaddingApplied = width >= breakpoints[maxBreakpointEntryName]
+  const hasScreenReachedMaxWidth = width >= Theme.values.maxContentWidth
+
+  entries.forEach(breakpoint => {
+    if (window?.innerWidth <= breakpoints[breakpoint]) {
+      currentBreakpoint = breakpoint
+    }
+  })
+
+  if (maxPaddingApplied) {
+    maxContentWidth = Theme.values.maxContentWidth - (safeHorizontalPaddings[maxBreakpointEntryName] * 2)
+  } else {
+    if (currentBreakpoint === maxBreakpointEntryName) {
+      maxContentWidth = Theme.values.maxContentWidth
+    } else {
+      maxContentWidth = (hasScreenReachedMaxWidth ? Theme.values.maxContentWidth : width) - (safeHorizontalPaddings[currentBreakpoint] * 2)
+    }
+  }
+
+  const padding = (width - maxContentWidth) / 2
+
+  return {
+    width: maxContentWidth,
+    padding,
+  }
+
+}