From 53683f9b7beb158aa3aeccbcf489f7ac4e0154d4 Mon Sep 17 00:00:00 2001
From: Valentina <valentina.marrazzo@hyperting.com>
Date: Tue, 28 May 2024 16:06:36 +0200
Subject: [PATCH 1/4] fix #1335: theme editor font sizes inputs

---
 .../src/ThemeEditorFontSizeSlider.tsx         | 31 +++++++
 .../src/ThemeEditorFontSizesItem.tsx          | 80 ++++++++-----------
 2 files changed, 65 insertions(+), 46 deletions(-)
 create mode 100644 packages/chakra-ui-font-sizes/src/ThemeEditorFontSizeSlider.tsx

diff --git a/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizeSlider.tsx b/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizeSlider.tsx
new file mode 100644
index 0000000..f0d8442
--- /dev/null
+++ b/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizeSlider.tsx
@@ -0,0 +1,31 @@
+import { Slider, SliderTrack, SliderFilledTrack, SliderThumb } from '@chakra-ui/react'
+import React, { FC, useCallback } from 'react'
+
+export const ThemeEditorFontSizeSlider: FC<{
+  setCurrentValue: (value: React.SetStateAction<string>) => void
+  cssValue: any
+}> = ({ setCurrentValue, cssValue }) => {
+  const handleSliderChange = useCallback(
+    (newValue: number) => {
+      setCurrentValue(`${newValue}${cssValue?.unit}`)
+    },
+    [cssValue]
+  )
+
+  return (
+    <Slider
+      aria-label="slider-ex-1"
+      min={0}
+      max={cssValue?.unit === 'px' ? 100 : 10}
+      step={cssValue?.unit === 'px' ? 1 : 0.001}
+      mx="1rem"
+      value={cssValue?.value}
+      onChange={handleSliderChange}
+    >
+      <SliderTrack>
+        <SliderFilledTrack bg="primary.500" />
+      </SliderTrack>
+      <SliderThumb />
+    </Slider>
+  )
+}
diff --git a/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizesItem.tsx b/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizesItem.tsx
index 31dd07b..132eb67 100644
--- a/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizesItem.tsx
+++ b/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizesItem.tsx
@@ -1,6 +1,5 @@
-import React, { FC, useCallback, useMemo, useState, useEffect } from 'react'
+import React, { FC, useCallback, useMemo, useState } from 'react'
 import {
-  Box,
   Flex,
   Tag,
   Text,
@@ -13,6 +12,7 @@ import {
 } from '@chakra-ui/react'
 import { useDebouncyEffect } from 'use-debouncy'
 import { ElementsHighlighter } from '@hypertheme-editor/chakra-ui-core'
+import { ThemeEditorFontSizeSlider } from './ThemeEditorFontSizeSlider'
 
 export type ThemeEditorFontSizesItemProps = {
   size: string
@@ -27,46 +27,46 @@ const ThemeEditorFontSizesItem: FC<ThemeEditorFontSizesItemProps> = (props) => {
   const [currentValue, setCurrentValue] = useState<string>(value)
 
   const cssValue = useMemo(() => {
-    return window && currentValue
-      ? (window as any).CSSStyleValue.parse('font-size', currentValue)
-      : undefined
+    if (!window) {
+      return (window as any).CSSStyleValue.parse('font-size', '0rem')
+    } else if (!currentValue?.length) {
+      return (window as any).CSSStyleValue.parse('font-size', '0rem')
+    } else {
+      return (window as any).CSSStyleValue.parse('font-size', currentValue)
+    }
   }, [currentValue])
 
-  const handleSliderChange = useCallback(
-    (newValue: number) => {
-      setCurrentValue(`${newValue}${cssValue.unit}`)
-    },
-    [cssValue.unit]
-  )
-
-  const handleInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+  const handleInputChange = useCallback(
     (event) => {
-      setCurrentValue(`${event.target.value}${cssValue.unit}`)
+      setCurrentValue(`${!event?.target?.value ? 0 : event.target.value}${cssValue?.unit}`)
     },
-    [cssValue.unit]
+    [cssValue?.unit, setCurrentValue]
   )
 
   const handleUnitChange = useCallback<React.ChangeEventHandler<HTMLSelectElement>>(
     (event) => {
-      if (cssValue.unit === 'px' && (event.target.value === 'em' || event.target.value === 'rem')) {
-        setCurrentValue(`${cssValue.value / 16}${event.target.value}`)
-      } else if (
-        (cssValue.unit === 'em' || cssValue.unit === 'rem') &&
-        event.target.value === 'px'
-      ) {
-        setCurrentValue(`${(cssValue.value * 16).toFixed(0)}${event.target.value}`)
+      if (!cssValue?.unit) {
+        setCurrentValue(`${cssValue?.value || 0}rem`)
       } else {
-        setCurrentValue(`${cssValue.value}${event.target.value}`)
+        if (
+          cssValue?.unit === 'px' &&
+          (event.target.value === 'em' || event.target.value === 'rem')
+        ) {
+          setCurrentValue(`${cssValue?.value / 16}${event.target.value}`)
+        } else if (
+          (cssValue?.unit === 'em' || cssValue?.unit === 'rem') &&
+          event.target.value === 'px'
+        ) {
+          setCurrentValue(`${(cssValue?.value * 16).toFixed(0)}${event.target.value}`)
+        } else {
+          setCurrentValue(`${cssValue?.value}${event.target.value}`)
+        }
       }
     },
-    [cssValue.unit, cssValue.value]
+    [cssValue?.unit, cssValue?.value]
   )
 
-  useDebouncyEffect(() => onChange({ size, value: currentValue }), 500, [currentValue])
-
-  useEffect(() => {
-    setCurrentValue(value)
-  }, [value])
+  useDebouncyEffect(() => onChange({ size, value: cssValue?.value }), 500, [cssValue])
 
   return (
     <ElementsHighlighter themeKeys={`fontSizes.${size}`} fontSize="1rem">
@@ -74,20 +74,7 @@ const ThemeEditorFontSizesItem: FC<ThemeEditorFontSizesItemProps> = (props) => {
         <Tag alignItems="center" minW="min-content" fontSize="0.75rem" px="0.5rem">
           {size}
         </Tag>
-        <Slider
-          aria-label="slider-ex-1"
-          min={0}
-          max={cssValue.unit === 'px' ? 100 : 10}
-          step={cssValue.unit === 'px' ? 1 : 0.001}
-          mx="1rem"
-          value={cssValue.value}
-          onChange={handleSliderChange}
-        >
-          <SliderTrack>
-            <SliderFilledTrack bg="primary.500" />
-          </SliderTrack>
-          <SliderThumb />
-        </Slider>
+        <ThemeEditorFontSizeSlider cssValue={cssValue} setCurrentValue={setCurrentValue} />
         <Flex alignItems="center">
           <Input
             borderRadius="6px"
@@ -96,15 +83,16 @@ const ThemeEditorFontSizesItem: FC<ThemeEditorFontSizesItemProps> = (props) => {
             fontSize="0.875rem"
             w="70px"
             type="number"
-            value={cssValue.value}
-            onChange={handleInputChange}
+            value={cssValue?.value}
+            onChange={(e) => handleInputChange(e)}
+            onWheel={(e) => e.currentTarget.blur()}
           />
           <Select
             size="sm"
             w="70px"
             ml="0.5rem"
             borderRadius="6px"
-            value={cssValue.unit}
+            value={cssValue?.unit ? cssValue?.unit : 'rem'}
             onChange={handleUnitChange}
             fontSize="0.875rem"
           >

From e384b08f62783b7e476f1db20324587e66d99374 Mon Sep 17 00:00:00 2001
From: Valentina <valentina.marrazzo@hyperting.com>
Date: Mon, 10 Jun 2024 15:19:11 +0200
Subject: [PATCH 2/4] fix: inverted theme palette font color

---
 .../src/ThemeEditorPalette.tsx                | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/chakra-ui-colors/src/ThemeEditorPalette.tsx b/packages/chakra-ui-colors/src/ThemeEditorPalette.tsx
index b4347fb..2f70c2b 100644
--- a/packages/chakra-ui-colors/src/ThemeEditorPalette.tsx
+++ b/packages/chakra-ui-colors/src/ThemeEditorPalette.tsx
@@ -1,6 +1,5 @@
-import React, { FC } from 'react'
+import React, { FC, useCallback } from 'react'
 import {
-  BoxProps,
   useColorModeValue,
   Center,
   Text,
@@ -9,7 +8,7 @@ import {
   Tooltip,
   SimpleGridProps,
 } from '@chakra-ui/react'
-import { extend } from 'colord'
+import { extend, colord } from 'colord'
 import namesPlugin from 'colord/plugins/names'
 import ThemeEditorPaletteDrawer from './ThemeEditorPaletteDrawer'
 
@@ -39,6 +38,28 @@ const ThemeEditorPalette: FC<ThemeEditorPaletteProps> = ({
   const shadow = useColorModeValue('surface', 'surfaceDark')
   const borderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100')
 
+  const complemetaryFontColor = useCallback(
+    (scale: number, key: number) => {
+      const shade = palette?.[scale]
+
+      if (!shade) {
+        return token.indexOf('white') >= 0 ? 'gray.500' : palette[scale[9 - key]]
+      }
+
+      const colordShade = colord(shade)
+      const brightness = colordShade.brightness()
+
+      if (brightness > 0.71) {
+        const darkShade = colordShade.invert().darken(2)
+        return darkShade.toHex()
+      } else {
+        const lightShade = colordShade.invert().lighten(1)
+        return lightShade.toHex()
+      }
+    },
+    [token, palette, scale]
+  )
+
   return (
     <>
       <Tooltip
@@ -74,7 +95,7 @@ const ThemeEditorPalette: FC<ThemeEditorPaletteProps> = ({
             >
               {showIndex && (
                 <Text
-                  color={token.indexOf('white') >= 0 ? 'gray.500' : palette[scale[9 - key]]}
+                  color={complemetaryFontColor(Number(paletteIndex), key)}
                   size="xs"
                   d={{ base: 'none', md: 'inline' }}
                 >

From aadc80ec792e13e512f949f938722a7c83c8191c Mon Sep 17 00:00:00 2001
From: Valentina <valentina.marrazzo@hyperting.com>
Date: Fri, 28 Jun 2024 17:42:38 +0200
Subject: [PATCH 3/4] fix (wip): input looses focus on every digit

---
 .../theme-editor/ThemeDownloadButton.tsx      |   3 +
 .../src/ThemeEditorFontSizeSlider.tsx         |  31 ------
 .../src/ThemeEditorFontSizesItem.tsx          | 104 +++++-------------
 .../src/base-components/FontSizeSlider.tsx    |  58 ++++++++++
 .../src/base-components/InputFields.tsx       |  89 +++++++++++++++
 5 files changed, 176 insertions(+), 109 deletions(-)
 delete mode 100644 packages/chakra-ui-font-sizes/src/ThemeEditorFontSizeSlider.tsx
 create mode 100644 packages/chakra-ui-font-sizes/src/base-components/FontSizeSlider.tsx
 create mode 100644 packages/chakra-ui-font-sizes/src/base-components/InputFields.tsx

diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx
index 8f068fc..215719a 100644
--- a/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx
+++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx
@@ -113,6 +113,9 @@ export const ThemeDownloadButton: FC<Props> = ({
       w="fit-content"
       px={10}
       onClick={handleDownload(selectedLanguage)}
+      position="absolute"
+      bottom={2}
+      zIndex={10}
       {...rest}
     >
       Export <Icon boxSize={4} ml={2} as={BsArrowRight} />
diff --git a/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizeSlider.tsx b/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizeSlider.tsx
deleted file mode 100644
index f0d8442..0000000
--- a/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizeSlider.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Slider, SliderTrack, SliderFilledTrack, SliderThumb } from '@chakra-ui/react'
-import React, { FC, useCallback } from 'react'
-
-export const ThemeEditorFontSizeSlider: FC<{
-  setCurrentValue: (value: React.SetStateAction<string>) => void
-  cssValue: any
-}> = ({ setCurrentValue, cssValue }) => {
-  const handleSliderChange = useCallback(
-    (newValue: number) => {
-      setCurrentValue(`${newValue}${cssValue?.unit}`)
-    },
-    [cssValue]
-  )
-
-  return (
-    <Slider
-      aria-label="slider-ex-1"
-      min={0}
-      max={cssValue?.unit === 'px' ? 100 : 10}
-      step={cssValue?.unit === 'px' ? 1 : 0.001}
-      mx="1rem"
-      value={cssValue?.value}
-      onChange={handleSliderChange}
-    >
-      <SliderTrack>
-        <SliderFilledTrack bg="primary.500" />
-      </SliderTrack>
-      <SliderThumb />
-    </Slider>
-  )
-}
diff --git a/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizesItem.tsx b/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizesItem.tsx
index 132eb67..bb898e5 100644
--- a/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizesItem.tsx
+++ b/packages/chakra-ui-font-sizes/src/ThemeEditorFontSizesItem.tsx
@@ -1,18 +1,9 @@
-import React, { FC, useCallback, useMemo, useState } from 'react'
-import {
-  Flex,
-  Tag,
-  Text,
-  Slider,
-  SliderTrack,
-  SliderThumb,
-  SliderFilledTrack,
-  Select,
-  Input,
-} from '@chakra-ui/react'
+import React, { createContext, FC, useMemo, useState } from 'react'
+import { Flex, Tag, Text } from '@chakra-ui/react'
 import { useDebouncyEffect } from 'use-debouncy'
 import { ElementsHighlighter } from '@hypertheme-editor/chakra-ui-core'
-import { ThemeEditorFontSizeSlider } from './ThemeEditorFontSizeSlider'
+import { FontSizeSlider } from './base-components/FontSizeSlider'
+import { InputFields } from './base-components/InputFields'
 
 export type ThemeEditorFontSizesItemProps = {
   size: string
@@ -21,52 +12,27 @@ export type ThemeEditorFontSizesItemProps = {
   onChange: (value: { size: string; value: string }) => void
 }
 
+export const InputGroupContext = createContext<{
+  currentFontValue: any
+  setCurrentFontValue: React.Dispatch<React.SetStateAction<any>>
+}>({ currentFontValue: '', setCurrentFontValue: () => undefined })
+
 const ThemeEditorFontSizesItem: FC<ThemeEditorFontSizesItemProps> = (props) => {
   const { sampleTitle = 'Lorem ipsum dolor sit', size, value, onChange } = props
 
-  const [currentValue, setCurrentValue] = useState<string>(value)
-
-  const cssValue = useMemo(() => {
+  const staticCssValue = useMemo(() => {
     if (!window) {
-      return (window as any).CSSStyleValue.parse('font-size', '0rem')
-    } else if (!currentValue?.length) {
-      return (window as any).CSSStyleValue.parse('font-size', '0rem')
+      return '0rem'
+    } else if (!value?.length) {
+      return '0rem'
     } else {
-      return (window as any).CSSStyleValue.parse('font-size', currentValue)
+      return value
     }
-  }, [currentValue])
+  }, [value])
 
-  const handleInputChange = useCallback(
-    (event) => {
-      setCurrentValue(`${!event?.target?.value ? 0 : event.target.value}${cssValue?.unit}`)
-    },
-    [cssValue?.unit, setCurrentValue]
-  )
-
-  const handleUnitChange = useCallback<React.ChangeEventHandler<HTMLSelectElement>>(
-    (event) => {
-      if (!cssValue?.unit) {
-        setCurrentValue(`${cssValue?.value || 0}rem`)
-      } else {
-        if (
-          cssValue?.unit === 'px' &&
-          (event.target.value === 'em' || event.target.value === 'rem')
-        ) {
-          setCurrentValue(`${cssValue?.value / 16}${event.target.value}`)
-        } else if (
-          (cssValue?.unit === 'em' || cssValue?.unit === 'rem') &&
-          event.target.value === 'px'
-        ) {
-          setCurrentValue(`${(cssValue?.value * 16).toFixed(0)}${event.target.value}`)
-        } else {
-          setCurrentValue(`${cssValue?.value}${event.target.value}`)
-        }
-      }
-    },
-    [cssValue?.unit, cssValue?.value]
-  )
+  const [currentValue, setCurrentValue] = useState<string>(staticCssValue)
 
-  useDebouncyEffect(() => onChange({ size, value: cssValue?.value }), 500, [cssValue])
+  useDebouncyEffect(() => onChange({ size, value: currentValue }), 500, [currentValue])
 
   return (
     <ElementsHighlighter themeKeys={`fontSizes.${size}`} fontSize="1rem">
@@ -74,33 +40,15 @@ const ThemeEditorFontSizesItem: FC<ThemeEditorFontSizesItemProps> = (props) => {
         <Tag alignItems="center" minW="min-content" fontSize="0.75rem" px="0.5rem">
           {size}
         </Tag>
-        <ThemeEditorFontSizeSlider cssValue={cssValue} setCurrentValue={setCurrentValue} />
-        <Flex alignItems="center">
-          <Input
-            borderRadius="6px"
-            size="sm"
-            textAlign="right"
-            fontSize="0.875rem"
-            w="70px"
-            type="number"
-            value={cssValue?.value}
-            onChange={(e) => handleInputChange(e)}
-            onWheel={(e) => e.currentTarget.blur()}
-          />
-          <Select
-            size="sm"
-            w="70px"
-            ml="0.5rem"
-            borderRadius="6px"
-            value={cssValue?.unit ? cssValue?.unit : 'rem'}
-            onChange={handleUnitChange}
-            fontSize="0.875rem"
-          >
-            <option value="rem">rem</option>
-            <option value="em">em</option>
-            <option value="px">px</option>
-          </Select>
-        </Flex>
+        <InputGroupContext.Provider
+          value={{
+            currentFontValue: currentValue,
+            setCurrentFontValue: setCurrentValue,
+          }}
+        >
+          <FontSizeSlider />
+          <InputFields />
+        </InputGroupContext.Provider>
       </Flex>
       <Text
         alignItems="center"
diff --git a/packages/chakra-ui-font-sizes/src/base-components/FontSizeSlider.tsx b/packages/chakra-ui-font-sizes/src/base-components/FontSizeSlider.tsx
new file mode 100644
index 0000000..bff5bb7
--- /dev/null
+++ b/packages/chakra-ui-font-sizes/src/base-components/FontSizeSlider.tsx
@@ -0,0 +1,58 @@
+import { Slider, SliderTrack, SliderFilledTrack, SliderThumb } from '@chakra-ui/react'
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { InputGroupContext } from '../ThemeEditorFontSizesItem'
+
+export const FontSizeSlider = () => {
+  const context = useContext(InputGroupContext)
+  const { currentFontValue, setCurrentFontValue } = context
+
+  const fontSizeUnit = useMemo(() => {
+    const charactersList = Array.from(currentFontValue.matchAll(/[a-z]/g))
+    const charactersSubstring = charactersList.toString().replaceAll(',', '')
+
+    return charactersSubstring
+  }, [currentFontValue])
+
+  const fontSizeValue = useMemo(() => {
+    const numbersList = Array.from(currentFontValue.matchAll(/[^a-z]/g))
+    let numbersSubstring = ''
+    numbersList.forEach((item) => {
+      numbersSubstring += item
+    })
+
+    const int = Number(numbersSubstring)
+
+    return int
+  }, [currentFontValue])
+
+  const [sliderValue, setSliderValue] = useState<number>(fontSizeValue)
+
+  useEffect(() => {
+    let newValue = '0rem'
+
+    if (fontSizeUnit === 'px') {
+      newValue = `${sliderValue}${fontSizeUnit}`
+    } else {
+      const digit = (sliderValue * 0.1).toFixed(2)
+      newValue = `${digit}${fontSizeUnit}`
+    }
+
+    setCurrentFontValue(newValue)
+  }, [sliderValue, fontSizeUnit])
+
+  return (
+    <Slider
+      aria-label="slider-ex-1"
+      min={0}
+      max={100}
+      mx="1rem"
+      value={sliderValue}
+      onChange={(value) => setSliderValue(value)}
+    >
+      <SliderTrack>
+        <SliderFilledTrack bg="primary.500" />
+      </SliderTrack>
+      <SliderThumb />
+    </Slider>
+  )
+}
diff --git a/packages/chakra-ui-font-sizes/src/base-components/InputFields.tsx b/packages/chakra-ui-font-sizes/src/base-components/InputFields.tsx
new file mode 100644
index 0000000..3e5956b
--- /dev/null
+++ b/packages/chakra-ui-font-sizes/src/base-components/InputFields.tsx
@@ -0,0 +1,89 @@
+import { Flex, Input, Select } from '@chakra-ui/react'
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { InputGroupContext } from '../ThemeEditorFontSizesItem'
+
+export const InputFields = () => {
+  const context = useContext(InputGroupContext)
+  const { currentFontValue, setCurrentFontValue } = context
+
+  const fontSizeUnit = useMemo(() => {
+    const charactersList = Array.from(currentFontValue.matchAll(/[a-z]/g))
+    const charactersSubstring = charactersList.toString().replaceAll(',', '')
+
+    return charactersSubstring
+  }, [currentFontValue])
+
+  const fontSizeValue = useMemo(() => {
+    const numbersList = Array.from(currentFontValue.matchAll(/[^a-z]/g))
+    let numbersSubstring = ''
+    numbersList.forEach((item) => {
+      numbersSubstring += item
+    })
+
+    const int = Number(numbersSubstring)
+
+    return int
+  }, [currentFontValue])
+
+  const [inputValue, setInputValue] = useState<number>(fontSizeValue)
+
+  const handleUnitChange = useCallback<React.ChangeEventHandler<HTMLSelectElement>>(
+    (event) => {
+      let newValue = '0rem'
+      if (!fontSizeUnit?.length) {
+        newValue = `${fontSizeValue || 0}rem`
+      } else {
+        if (
+          fontSizeUnit === 'px' &&
+          (event.target.value === 'em' || event.target.value === 'rem')
+        ) {
+          newValue = `${fontSizeValue / 16}${event.target.value}`
+        } else {
+          newValue = `${fontSizeValue}${event.target.value}`
+        }
+      }
+      setCurrentFontValue(newValue)
+    },
+    [currentFontValue]
+  )
+
+  useEffect(() => {
+    let newValue = '0rem'
+    if (fontSizeUnit === 'px') {
+      newValue = `${!inputValue ? 0 : inputValue}${fontSizeUnit}`
+    } else {
+      const valueAsEm = Number(inputValue) / 16
+      newValue = `${valueAsEm}${fontSizeUnit}`
+    }
+    setCurrentFontValue(newValue)
+  }, [inputValue, fontSizeUnit])
+
+  return (
+    <Flex alignItems="center">
+      <Input
+        type="number"
+        step="0.01"
+        fontSize="0.875rem"
+        w="70px"
+        borderRadius="6px"
+        size="sm"
+        onWheel={(e) => e.currentTarget.blur()}
+        value={inputValue}
+        onChange={(e) => setInputValue(Number(e.target.value))}
+      />
+      <Select
+        size="sm"
+        w="70px"
+        ml="0.5rem"
+        borderRadius="6px"
+        value={!!fontSizeUnit?.length ? fontSizeUnit : 'rem'}
+        onChange={handleUnitChange}
+        fontSize="0.875rem"
+      >
+        <option value="rem">rem</option>
+        <option value="em">em</option>
+        <option value="px">px</option>
+      </Select>
+    </Flex>
+  )
+}

From 4180b0ebd5faddb3c5cc9e6bece83386919c6beb Mon Sep 17 00:00:00 2001
From: Valentina <valentina.marrazzo@hyperting.com>
Date: Sun, 30 Jun 2024 20:09:31 +0200
Subject: [PATCH 4/4] fix #1335: input loses focus when composing

---
 .../theme-editor/ThemeDownloadButton.tsx      |  3 --
 .../theme-editor/ThemeEditorDrawerFooter.tsx  |  1 +
 .../src/base-components/FontSizeSlider.tsx    | 31 +++++---------
 .../src/base-components/InputFields.tsx       | 41 +++++--------------
 4 files changed, 23 insertions(+), 53 deletions(-)

diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx
index 215719a..8f068fc 100644
--- a/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx
+++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeDownloadButton.tsx
@@ -113,9 +113,6 @@ export const ThemeDownloadButton: FC<Props> = ({
       w="fit-content"
       px={10}
       onClick={handleDownload(selectedLanguage)}
-      position="absolute"
-      bottom={2}
-      zIndex={10}
       {...rest}
     >
       Export <Icon boxSize={4} ml={2} as={BsArrowRight} />
diff --git a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerFooter.tsx b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerFooter.tsx
index cdcbf4b..a48fc33 100644
--- a/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerFooter.tsx
+++ b/packages/chakra-ui-core/src/components/theme-editor/ThemeEditorDrawerFooter.tsx
@@ -20,6 +20,7 @@ export const ThemeEditorDrawerFooter: FC<ThemeEditorDrawerFooterProps> = ({
     <Flex
       display={isMobile ? 'none' : 'flex'}
       position="fixed"
+      zIndex={10}
       justifyContent="center"
       bottom={6}
       w="100%"
diff --git a/packages/chakra-ui-font-sizes/src/base-components/FontSizeSlider.tsx b/packages/chakra-ui-font-sizes/src/base-components/FontSizeSlider.tsx
index bff5bb7..515fc02 100644
--- a/packages/chakra-ui-font-sizes/src/base-components/FontSizeSlider.tsx
+++ b/packages/chakra-ui-font-sizes/src/base-components/FontSizeSlider.tsx
@@ -1,5 +1,5 @@
 import { Slider, SliderTrack, SliderFilledTrack, SliderThumb } from '@chakra-ui/react'
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import React, { useContext, useMemo, useState } from 'react'
 import { InputGroupContext } from '../ThemeEditorFontSizesItem'
 
 export const FontSizeSlider = () => {
@@ -20,39 +20,30 @@ export const FontSizeSlider = () => {
       numbersSubstring += item
     })
 
-    const int = Number(numbersSubstring)
+    const int = Number.isNaN(Number(numbersSubstring)) ? 0 : Number(numbersSubstring)
 
     return int
   }, [currentFontValue])
 
-  const [sliderValue, setSliderValue] = useState<number>(fontSizeValue)
-
-  useEffect(() => {
-    let newValue = '0rem'
-
-    if (fontSizeUnit === 'px') {
-      newValue = `${sliderValue}${fontSizeUnit}`
-    } else {
-      const digit = (sliderValue * 0.1).toFixed(2)
-      newValue = `${digit}${fontSizeUnit}`
-    }
-
-    setCurrentFontValue(newValue)
-  }, [sliderValue, fontSizeUnit])
+  const [isMouseOver, setIsMouseOver] = useState<boolean>(false)
 
   return (
     <Slider
       aria-label="slider-ex-1"
       min={0}
-      max={100}
+      max={fontSizeUnit === 'px' ? 100 : 10}
+      step={fontSizeUnit === 'px' ? 1 : 0.01}
       mx="1rem"
-      value={sliderValue}
-      onChange={(value) => setSliderValue(value)}
+      focusThumbOnChange={isMouseOver}
+      value={fontSizeValue}
+      onChange={(value) => setCurrentFontValue(`${value}${fontSizeUnit}`)}
+      onMouseOver={() => setIsMouseOver(true)}
+      onMouseLeave={() => setIsMouseOver(false)}
     >
       <SliderTrack>
         <SliderFilledTrack bg="primary.500" />
       </SliderTrack>
-      <SliderThumb />
+      <SliderThumb zIndex={2} />
     </Slider>
   )
 }
diff --git a/packages/chakra-ui-font-sizes/src/base-components/InputFields.tsx b/packages/chakra-ui-font-sizes/src/base-components/InputFields.tsx
index 3e5956b..c8b0ce9 100644
--- a/packages/chakra-ui-font-sizes/src/base-components/InputFields.tsx
+++ b/packages/chakra-ui-font-sizes/src/base-components/InputFields.tsx
@@ -1,5 +1,5 @@
 import { Flex, Input, Select } from '@chakra-ui/react'
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useContext, useMemo } from 'react'
 import { InputGroupContext } from '../ThemeEditorFontSizesItem'
 
 export const InputFields = () => {
@@ -20,44 +20,23 @@ export const InputFields = () => {
       numbersSubstring += item
     })
 
-    const int = Number(numbersSubstring)
-
-    return int
+    return numbersSubstring
   }, [currentFontValue])
 
-  const [inputValue, setInputValue] = useState<number>(fontSizeValue)
-
   const handleUnitChange = useCallback<React.ChangeEventHandler<HTMLSelectElement>>(
     (event) => {
       let newValue = '0rem'
-      if (!fontSizeUnit?.length) {
-        newValue = `${fontSizeValue || 0}rem`
+      if (fontSizeUnit === 'px' && (event.target.value === 'em' || event.target.value === 'rem')) {
+        newValue = `${Number(fontSizeValue) / 16}${event.target.value}`
       } else {
-        if (
-          fontSizeUnit === 'px' &&
-          (event.target.value === 'em' || event.target.value === 'rem')
-        ) {
-          newValue = `${fontSizeValue / 16}${event.target.value}`
-        } else {
-          newValue = `${fontSizeValue}${event.target.value}`
-        }
+        newValue = `${fontSizeValue}${event.target.value}`
       }
+
       setCurrentFontValue(newValue)
     },
     [currentFontValue]
   )
 
-  useEffect(() => {
-    let newValue = '0rem'
-    if (fontSizeUnit === 'px') {
-      newValue = `${!inputValue ? 0 : inputValue}${fontSizeUnit}`
-    } else {
-      const valueAsEm = Number(inputValue) / 16
-      newValue = `${valueAsEm}${fontSizeUnit}`
-    }
-    setCurrentFontValue(newValue)
-  }, [inputValue, fontSizeUnit])
-
   return (
     <Flex alignItems="center">
       <Input
@@ -67,16 +46,18 @@ export const InputFields = () => {
         w="70px"
         borderRadius="6px"
         size="sm"
+        value={fontSizeValue}
+        onChange={(e) =>
+          setCurrentFontValue(`${!e.target.value ? '' : e.target.value}${fontSizeUnit}`)
+        }
         onWheel={(e) => e.currentTarget.blur()}
-        value={inputValue}
-        onChange={(e) => setInputValue(Number(e.target.value))}
       />
       <Select
         size="sm"
         w="70px"
         ml="0.5rem"
         borderRadius="6px"
-        value={!!fontSizeUnit?.length ? fontSizeUnit : 'rem'}
+        value={!fontSizeValue?.length ? '' : !!fontSizeUnit?.length ? fontSizeUnit : 'rem'}
         onChange={handleUnitChange}
         fontSize="0.875rem"
       >