x

Author: Gianmarco Manni

src/lib/AsyncTypeaheadInput.tsx

@@ -127,7 +127,7 @@ const AsyncTypeaheadInput = <T extends FieldValues>(props: AsyncTypeaheadInputPr
       name={name}
       label={useBootstrapStyle ? label : undefined}
       labelStyle={useBootstrapStyle ? { color: "#8493A5", fontSize: 14 } : undefined}
-      layout="typeahead"
+      layout="muiInput"
     >
       <Autocomplete<TypeaheadOption, boolean, boolean, boolean>
         {...autocompleteProps}

src/lib/ColorPickerInput.tsx

@@ -16,18 +16,20 @@ interface ColorPickerInputProps<T extends FieldValues>
 }
 
 const ColorPickerInput = <T extends FieldValues>(props: ColorPickerInputProps<T>) => {
-  const { label, helpText, inputGroupStyle, labelToolTip, hideValidationMessage = false } = props;
+  const { label, helpText, inputGroupStyle, labelToolTip, hideValidationMessage = false, useBootstrapStyle } = props;
   const { name, id } = useSafeNameId(props.name, props.id);
 
   return (
     <FormGroupLayout
       helpText={helpText}
       name={name}
       id={id}
-      label={label}
       labelToolTip={labelToolTip}
       inputGroupStyle={inputGroupStyle}
       hideValidationMessage={hideValidationMessage}
+      label={useBootstrapStyle ? label : undefined}
+      labelStyle={useBootstrapStyle ? { color: "#8493A5", fontSize: 14 } : undefined}
+      layout="muiInput"
     >
       <ColorPicker {...props} name={name} id={id} />
     </FormGroupLayout>

src/lib/FormGroupLayout.tsx

@@ -11,7 +11,7 @@ interface FormGroupLayoutProps<T extends FieldValues, TRenderAddon>
   extends PropsWithChildren<
     Pick<CommonInputProps<T>, "helpText" | "label" | "name" | "id" | "labelToolTip" | "inputOnly" | "hideValidationMessage">
   > {
-  layout?: "checkbox" | "switch" | "typeahead";
+  layout?: "checkbox" | "switch" | "muiInput";
   addonLeft?: ReactNode | ((props: TRenderAddon) => ReactNode);
   addonRight?: ReactNode | ((props: TRenderAddon) => ReactNode);
   addonProps?: MergedAddonProps<TRenderAddon>;
@@ -47,7 +47,7 @@ const FormGroupLayout = <T extends FieldValues, TRenderAddon = unknown>(props: F
 
   const switchLayout = layout === "switch";
   const checkboxLayout = layout === "checkbox";
-  const typeaheadLayout = layout === "typeahead";
+  const muiInputLayout = layout === "muiInput";
 
   if (inputOnly && (switchLayout || checkboxLayout)) {
     throw "'inputOnly' is not possible with switches or checkboxes";
@@ -86,7 +86,7 @@ const FormGroupLayout = <T extends FieldValues, TRenderAddon = unknown>(props: F
         tooltip={labelToolTip}
         layout={layout}
       />
-      {switchLayout || checkboxLayout || typeaheadLayout ? (
+      {switchLayout || checkboxLayout || muiInputLayout ? (
         children
       ) : (
         <InputGroup
@@ -102,7 +102,7 @@ const FormGroupLayout = <T extends FieldValues, TRenderAddon = unknown>(props: F
           {effectiveAddonRight}
         </InputGroup>
       )}
-      {!typeaheadLayout && (
+      {!muiInputLayout && (
         <>
           {!hideErrorMessage && <FormFeedback>{errorMessage}</FormFeedback>}
           {helpText && <FormText>{helpText}</FormText>}

src/lib/FormGroupLayoutLabel.tsx

@@ -8,7 +8,7 @@ interface FormGroupLayoutLabelProps<T extends FieldValues> {
   tooltip?: ReactNode;
   fieldName: FieldPath<T>;
   fieldId: string;
-  layout?: "checkbox" | "switch" | "typeahead";
+  layout?: "checkbox" | "switch" | "muiInput";
   labelStyle?: CSSProperties;
 }
 

src/lib/StaticTypeaheadInput.tsx

@@ -98,7 +98,7 @@ const StaticTypeaheadInput = <T extends FieldValues>(props: StaticTypeaheadInput
       name={name}
       label={useBootstrapStyle ? label : undefined}
       labelStyle={useBootstrapStyle ? { color: "#8493A5", fontSize: 14 } : undefined}
-      layout="typeahead"
+      layout="muiInput"
     >
       <Autocomplete<TypeaheadOption, boolean, boolean, boolean>
         {...autocompleteProps}

src/lib/components/ColorPicker/ColorPicker.tsx

@@ -1,6 +1,6 @@
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
-import PopupState, { bindPopover, bindTrigger } from "material-ui-popup-state";
+import PopupState, { bindPopover } from "material-ui-popup-state";
 import { ColorPickerButton } from "./ColorPickerButton";
 import { FieldError, FieldValues, get, useController } from "react-hook-form";
 import { ColorPickerInputProps } from "../../ColorPickerInput";
@@ -87,15 +87,14 @@ const ColorPicker = <T extends FieldValues>(props: ColorPickerInputProps<T>) =>
               }
 
               propsOnBlur && propsOnBlur(e);
-
               field.onBlur();
             }}
             value={field.value}
             slotProps={{
               input: {
                 startAdornment: (
                   <InputAdornment position="start">
-                    <ColorPickerButton color={color} disabled={isDisabled} bindTrigger={bindTrigger(popupState)} />
+                    <ColorPickerButton color={color} disabled={isDisabled} popupState={popupState} />
                   </InputAdornment>
                 ),
               },

src/lib/components/ColorPicker/ColorPickerButton.tsx

@@ -1,9 +1,10 @@
 import { TinyColor } from "@ctrl/tinycolor";
 import Button from "@mui/material/Button";
 import { bindTrigger } from "material-ui-popup-state";
+import { PopupState } from "material-ui-popup-state/hooks";
 
 interface ColorPickerButtonProps {
-  bindTrigger: ReturnType<typeof bindTrigger>;
+  popupState: PopupState;
   color: TinyColor;
   disabled?: boolean;
 }
@@ -12,11 +13,11 @@ const BG_IMAGE_FALLBACK =
   "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%) /*! @noflip */";
 
 const ColorPickerButton = (props: ColorPickerButtonProps) => {
-  const { bindTrigger, color, disabled } = props;
+  const { popupState, color, disabled } = props;
 
   return (
     <Button
-      {...bindTrigger}
+      {...bindTrigger(popupState)}
       variant="text"
       aria-describedby="color"
       style={{