goobs-frontend 0.9.31 → 0.9.33

package/src/components/Field/Percentage/index.tsx

@@ -41,26 +41,26 @@ export interface PercentageFieldProps extends Omit<TextFieldProps, 'onChange'> {
   sacredtheme?: boolean
 }
 
-const StyledIconButton = styled(IconButton)<{ sacredtheme?: boolean }>(
-  ({ theme, sacredtheme }) => ({
-    padding: 0,
-    width: '16px',
-    height: '16px',
-    minWidth: '16px',
-    minHeight: '16px',
-    borderRadius: '2px',
-    transition: 'all 0.3s ease',
-    color: sacredtheme ? '#FFD700' : 'inherit',
-    '&:hover': {
-      backgroundColor: sacredtheme
-        ? alpha('#FFD700', 0.1)
-        : theme.palette.grey[200],
-      ...(sacredtheme && {
-        animation: `${sacredGlow} 1s ease-in-out infinite`,
-      }),
-    },
-  })
-)
+const StyledIconButton = styled(IconButton, {
+  shouldForwardProp: prop => prop !== 'sacredtheme',
+})<{ sacredtheme?: boolean }>(({ theme, sacredtheme }) => ({
+  padding: 0,
+  width: '16px',
+  height: '16px',
+  minWidth: '16px',
+  minHeight: '16px',
+  borderRadius: '2px',
+  transition: 'all 0.3s ease',
+  color: sacredtheme ? '#FFD700' : 'inherit',
+  '&:hover': {
+    backgroundColor: sacredtheme
+      ? alpha('#FFD700', 0.1)
+      : theme.palette.grey[200],
+    ...(sacredtheme && {
+      animation: `${sacredGlow} 1s ease-in-out infinite`,
+    }),
+  },
+}))
 
 const ArrowIcon = styled(Box)({
   display: 'flex',

package/src/components/Field/Search/index.tsx

@@ -50,7 +50,12 @@ const StyledFormControl = styled(FormControl)({
   justifyContent: 'flex-end',
 })
 
-const StyledOutlinedInput = styled(OutlinedInput)<{
+const StyledOutlinedInput = styled(OutlinedInput, {
+  shouldForwardProp: prop =>
+    !['backgroundcolor', 'outlinecolor', 'fontcolor', 'sacredtheme'].includes(
+      prop as string
+    ),
+})<{
   backgroundcolor?: string
   outlinecolor?: string
   fontcolor?: string
@@ -117,7 +122,16 @@ const StyledOutlinedInput = styled(OutlinedInput)<{
   },
 }))
 
-const StyledInputLabel = styled(InputLabel)<{
+const StyledInputLabel = styled(InputLabel, {
+  shouldForwardProp: prop =>
+    ![
+      'fontcolor',
+      'shrunkfontcolor',
+      'unshrunkfontcolor',
+      'shrunklabelposition',
+      'sacredtheme',
+    ].includes(prop as string),
+})<{
   fontcolor?: string
   shrunkfontcolor?: string
   unshrunkfontcolor?: string

package/src/components/Field/Text/index.tsx

@@ -1,10 +1,9 @@
 'use client'
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback } from 'react'
 import {
   Box,
   TextField as MuiTextField,
   TextFieldProps as MuiTextFieldProps,
-  InputAdornment,
   StandardTextFieldProps,
   OutlinedTextFieldProps,
   FilledTextFieldProps,
@@ -128,12 +127,12 @@ const StyledMuiTextField = styled(MuiTextField, {
           content: '"𓊹"',
           position: 'absolute',
           top: '50%',
-          right: '45px',
+          right: '15px',
           transform: 'translateY(-50%)',
           color: alpha('#FFD700', 0.3),
           fontSize: '14px',
           pointerEvents: 'none',
-          zIndex: 1,
+          zIndex: 0,
           animation: `${floatGlyph} 3s ease-in-out infinite`,
         },
       }),
@@ -247,7 +246,6 @@ const TextField = React.memo<TextFieldProps>(props => {
     startAdornment,
     endAdornment,
     textAlign = 'left',
-    slotProps: customSlotProps = {},
     backgroundcolor,
     outlinecolor,
     fontcolor,
@@ -260,19 +258,6 @@ const TextField = React.memo<TextFieldProps>(props => {
     ...restProps
   } = props
 
-  const inputStyle = useMemo<React.CSSProperties>(
-    () => ({
-      backgroundColor: sacredtheme
-        ? alpha('#000000', 0.8)
-        : backgroundcolor || 'inherit',
-      width: '100%',
-      cursor: 'text',
-      boxSizing: 'border-box',
-      borderRadius: 5,
-    }),
-    [backgroundcolor, sacredtheme]
-  )
-
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => onChange?.(e),
     [onChange]
@@ -290,63 +275,6 @@ const TextField = React.memo<TextFieldProps>(props => {
     e.preventDefault()
   }, [])
 
-  const mergedSlotProps = useMemo(() => {
-    const adornmentSx = {
-      color: sacredtheme ? '#FFD700 !important' : '#000000 !important',
-      '& svg': {
-        color: sacredtheme ? '#FFD700 !important' : '#000000 !important',
-        fill: sacredtheme ? '#FFD700 !important' : '#000000 !important',
-        stroke: sacredtheme ? '#FFD700 !important' : '#000000 !important',
-        ...(sacredtheme && {
-          filter: 'drop-shadow(0 0 4px rgba(255, 215, 0, 0.6))',
-        }),
-      },
-    }
-
-    const defaultSlotProps = {
-      input: {
-        style: inputStyle,
-        ...(startAdornment && {
-          startAdornment: (
-            <InputAdornment position="start" sx={adornmentSx}>
-              {startAdornment}
-            </InputAdornment>
-          ),
-        }),
-        ...(endAdornment && {
-          endAdornment: (
-            <InputAdornment position="end" sx={adornmentSx}>
-              {endAdornment}
-            </InputAdornment>
-          ),
-        }),
-      },
-      inputLabel: {
-        sx: {
-          '&.MuiInputLabel-shrink': { top: '0px', left: '0px' },
-          '&:not(.MuiInputLabel-shrink)': {
-            transform: 'scale(1)',
-            transformOrigin: 'top left',
-            top: '9px',
-            left: '12px',
-          },
-        },
-      },
-    }
-
-    return {
-      ...defaultSlotProps,
-      input: {
-        ...defaultSlotProps.input,
-        ...(customSlotProps.input || {}),
-      },
-      inputLabel: {
-        ...defaultSlotProps.inputLabel,
-        ...(customSlotProps.inputLabel || {}),
-      },
-    }
-  }, [inputStyle, startAdornment, endAdornment, customSlotProps, sacredtheme])
-
   const hasValue = Boolean(value?.toString().length).toString()
 
   return (
@@ -374,7 +302,19 @@ const TextField = React.memo<TextFieldProps>(props => {
         value={value}
         error={error}
         disabled={disabled}
-        slotProps={mergedSlotProps}
+        InputProps={{
+          startAdornment,
+          endAdornment,
+        }}
+        sx={{
+          // Hide the sacred hieroglyph when there's an endAdornment
+          ...(sacredtheme &&
+            endAdornment && {
+              '& .MuiOutlinedInput-root::before': {
+                display: 'none !important',
+              },
+            }),
+        }}
         fullWidth
         variant="outlined"
         hasvalue={hasValue}