From fa5dc1baf93f5a7950d25e2c2b4be04fc347a6c4 Mon Sep 17 00:00:00 2001
From: Sebastian Delgado <sebastian.delgado@mediatool.com>
Date: Wed, 29 Nov 2023 13:37:49 +0100
Subject: [PATCH] fix(framework): InputLeftElement and padding

Give appropiate padding to the input element
depending on the width of InputLeftElement
---
 framework/lib/components/input/index.ts       | 10 ++---
 .../lib/components/input/input-group.tsx      | 39 +++++++++++++++++++
 .../components/input/input-left-element.tsx   | 38 ++++++++++++++++++
 framework/lib/components/input/input.tsx      | 26 +++++++++++++
 4 files changed, 107 insertions(+), 6 deletions(-)
 create mode 100644 framework/lib/components/input/input-group.tsx
 create mode 100644 framework/lib/components/input/input-left-element.tsx
 create mode 100644 framework/lib/components/input/input.tsx

diff --git a/framework/lib/components/input/index.ts b/framework/lib/components/input/index.ts
index b6647db8..dc80fce1 100644
--- a/framework/lib/components/input/index.ts
+++ b/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'
diff --git a/framework/lib/components/input/input-group.tsx b/framework/lib/components/input/input-group.tsx
new file mode 100644
index 00000000..e292ced9
--- /dev/null
+++ b/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>
+    )
+  }
+)
diff --git a/framework/lib/components/input/input-left-element.tsx b/framework/lib/components/input/input-left-element.tsx
new file mode 100644
index 00000000..38d38bee
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/framework/lib/components/input/input.tsx b/framework/lib/components/input/input.tsx
new file mode 100644
index 00000000..cac2f102
--- /dev/null
+++ b/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 }
+    />
+  )
+})