Piyush/enhancements

packages/imagekit-editor-dev/src/components/common/ColorPickerField.tsx

@@ -7,17 +7,19 @@ import {
   PopoverTrigger,
 } from "@chakra-ui/react"
 import { memo, useEffect, useState } from "react"
-import ColorPicker from "react-best-gradient-color-picker"
+import ColorPicker, { ColorPickerProps } from "react-best-gradient-color-picker"
 import { useDebounce } from "../../hooks/useDebounce"
 
 const ColorPickerField = ({
   fieldName,
   value,
   setValue,
+  fieldProps,
 }: {
   fieldName: string
   value: string
   setValue: (name: string, value: string) => void
+  fieldProps?: ColorPickerProps
 }) => {
   const [localValue, setLocalValue] = useState<string>(value)
 
@@ -35,7 +37,7 @@ const ColorPickerField = ({
       .map((v) => v.toString(16).padStart(2, "0"))
       .join("")
 
-    if (a === undefined) {
+    if (fieldProps?.hideOpacity === true || a === undefined) {
       setLocalValue(`#${rgbHex}`)
     } else {
       const alphaDec = a > 1 ? a / 100 : a
@@ -107,6 +109,8 @@ const ColorPickerField = ({
                 hideInputs
                 hideAdvancedSliders
                 hideColorGuide
+                // @ts-expect-error - fieldProps may include props not declared in ColorPickerProps, but they are intentionally forwarded
+                {...fieldProps}
               />
             </PopoverBody>
           </PopoverContent>

packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx

@@ -56,6 +56,7 @@ import { SidebarBody } from "./sidebar-body"
 import { SidebarFooter } from "./sidebar-footer"
 import { SidebarHeader } from "./sidebar-header"
 import { SidebarRoot } from "./sidebar-root"
+import { ColorPickerProps } from "react-best-gradient-color-picker"
 import PaddingInputField, { PaddingState } from "../common/PaddingInput"
 import ZoomInput from "../common/ZoomInput"
 import DistortPerspectiveInput, { PerspectiveObject } from "../common/DistortPerspectiveInput"
@@ -542,6 +543,7 @@ export const TransformationConfigSidebar: React.FC = () => {
                   fieldName={field.name}
                   value={watch(field.name) as string}
                   setValue={setValue}
+                  fieldProps={field.fieldProps as ColorPickerProps}
                 />
               ) : null}
               {field.fieldType === "gradient-picker" ? (