fix(framework): InputLeftElement and padding

Give appropiate padding to the input element
depending on the width of InputLeftElement

framework/lib/components/input/index.ts

@@ -1,19 +1,17 @@
 import {
-  Input,
   InputAddon,
-  InputGroup,
   InputLeftAddon,
-  InputLeftElement,
   InputRightAddon,
   InputRightElement,
 } from '@chakra-ui/react'
 
 export {
-  Input,
-  InputGroup,
   InputAddon,
   InputLeftAddon,
   InputRightAddon,
-  InputLeftElement,
   InputRightElement,
 }
+
+export * from './input-left-element'
+export * from './input'
+export * from './input-group'

framework/lib/components/input/input-group.tsx

@@ -0,0 +1,39 @@
+import React, {
+  Dispatch,
+  SetStateAction,
+  createContext,
+  forwardRef,
+  useMemo,
+  useState,
+} from 'react'
+import {
+  InputGroup as ChakraInputGroup,
+  InputGroupProps,
+} from '@chakra-ui/react'
+
+export const LeftElementContext = createContext<
+| { leftWidth: number, setLeftWidth: Dispatch<SetStateAction<number>> }
+| undefined
+>(undefined)
+
+export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
+  ({ children, ...rest }, ref) => {
+    const [ leftWidth, setLeftWidth ] = useState(0)
+
+    const contextValue = useMemo(
+      () => ({
+        leftWidth,
+        setLeftWidth,
+      }),
+      [ leftWidth ]
+    )
+
+    return (
+      <LeftElementContext.Provider value={ contextValue }>
+        <ChakraInputGroup ref={ ref } { ...rest }>
+          { children }
+        </ChakraInputGroup>
+      </LeftElementContext.Provider>
+    )
+  }
+)

framework/lib/components/input/input-left-element.tsx

@@ -0,0 +1,38 @@
+import React, { useContext, useEffect, useRef } from 'react'
+import {
+  InputLeftElement as ChakraInputLeftElement,
+  InputLeftElementProps,
+} from '@chakra-ui/react'
+import { LeftElementContext } from './input-group'
+
+export const InputLeftElement = ({
+  children,
+  ...props
+}: InputLeftElementProps) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const contextValue = useContext(LeftElementContext)
+
+  useEffect(() => {
+    if (ref.current) {
+      const handleResize = () => {
+        if (contextValue) {
+          contextValue.setLeftWidth(ref.current!.offsetWidth)
+        }
+      }
+
+      handleResize()
+
+      const resizeObserver = new ResizeObserver(handleResize)
+      resizeObserver.observe(ref.current)
+
+      return () => resizeObserver.disconnect()
+    }
+    return () => null
+  }, [])
+
+  return (
+    <ChakraInputLeftElement ref={ ref } { ...props }>
+      { children }
+    </ChakraInputLeftElement>
+  )
+}

framework/lib/components/input/input.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef, useContext, useRef } from 'react'
+import {
+  Input as ChakraInput,
+  InputProps,
+  useMergeRefs,
+  useToken,
+} from '@chakra-ui/react'
+import { LeftElementContext } from './input-group'
+
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const leftElement = useContext(LeftElementContext)
+  const inputRef = useRef(null)
+  const mergeRef = useMergeRefs(inputRef, ref)
+  const paddingInlineStart = useToken('space.padding-inline.input', 'default')
+  const leftWidth = leftElement ? leftElement.leftWidth : 0
+
+  return (
+    <ChakraInput
+      paddingInlineStart={ `${
+        leftWidth + parseFloat(paddingInlineStart) * 16
+      }px` }
+      ref={ mergeRef }
+      { ...props }
+    />
+  )
+})