@tulip-systems/core 0.5.2 → 0.5.4

package/src/modules/inline-edit/components/combobox.client.tsx

@@ -3,22 +3,29 @@
 import { Combobox, ComboboxProps } from "@/components/ui/combobox.client";
 import { useInlineEdit, useInlineEditOptions } from "../hooks/use-inline.client";
 
-export type InlineComboboxProps<TValue> = useInlineEditOptions<string> &
+export type InlineComboboxProps<TValue, Required extends boolean = false> = useInlineEditOptions<
+  string,
+  Required
+> &
   Omit<ComboboxProps<TValue>, "value">;
 
-export function InlineCombobox<TValue>({
+export function InlineCombobox<TValue, Required extends boolean>({
   initialValue,
   action,
   permission,
   onSelect,
   onBlur,
   disabled,
+  updateStrategy,
+  isRequired,
   ...props
-}: InlineComboboxProps<TValue>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: InlineComboboxProps<TValue, Required>) {
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -27,11 +34,11 @@ export function InlineCombobox<TValue>({
       value={value}
       disabled={disabled || !isAllowed}
       onSelect={(value) => {
-        setValue(value);
+        handleChange(value ?? null);
         onSelect?.(value as TValue);
       }}
       onBlur={(e) => {
-        handleUpdate(e.target.value);
+        handleBlur(e.target.value ?? null);
         onBlur?.(e);
       }}
     />

package/src/modules/inline-edit/components/date-input.client.tsx

@@ -13,41 +13,53 @@ import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
 const formatDate = (value: Date) => format(value, "dd/MM/yyyy");
 const parseDate = (value: string) => new Date(value.split("/").reverse().join("-"));
+const isValidDate = (date: Date) => date instanceof Date && date.toString() !== "Invalid Date";
 
-export function InlineDateInput({
+export function InlineDateInput<Required extends boolean = false>({
   initialValue,
   action,
   permission,
   variant,
   className,
+  updateStrategy,
+  isRequired,
   ...props
-}: ComponentProps<"div"> & useInlineEditOptions<Date> & InlineEditVariantsProps) {
+}: ComponentProps<"div"> & useInlineEditOptions<Date, Required> & InlineEditVariantsProps) {
   const [inValid, setInValid] = React.useState<boolean>(false);
 
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+  const { value, setValue, handleChange, handleBlur, status, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   const [stringDate, setStringDate] = React.useState<string>(
     initialValue ? formatDate(initialValue) : "",
   );
 
+  /**
+   * Update string date when value changes
+   */
+  React.useEffect(() => {
+    if (value) setStringDate(formatDate(value));
+  }, [value]);
+
   return (
     <Popover>
-      <div {...props} className={cn("relative h-full", inlineEditVariants({ variant }), className)}>
+      <div {...props} className={cn("relative h-full", className)}>
         <Input
           data-input
           type="string"
           value={stringDate}
-          className={cn(inValid && "text-destructive")}
+          className={cn(inlineEditVariants({ variant, status }), inValid && "text-destructive")}
           disabled={!isAllowed}
           onChange={(e) => {
             setStringDate(e.target.value);
             const parsedDate = parseDate(e.target.value);
 
-            if (parsedDate.toString() === "Invalid Date") {
+            if (!isValidDate(parsedDate)) {
               setInValid(true);
               setValue(undefined);
             } else {
@@ -57,7 +69,7 @@ export function InlineDateInput({
           }}
           onBlur={(e) => {
             const parsedDate = parseDate(e.target.value);
-            handleUpdate(parsedDate);
+            handleBlur(isValidDate(parsedDate) ? parsedDate : null);
           }}
         />
 
@@ -75,18 +87,22 @@ export function InlineDateInput({
           </Button>
         </PopoverTrigger>
       </div>
+
       <PopoverContent className="w-auto p-0">
         <Calendar
           mode="single"
-          initialFocus
-          selected={value}
-          defaultMonth={value}
-          disabled={status === "pending"}
+          autoFocus
+          selected={value ?? undefined}
+          defaultMonth={value ?? undefined}
+          disabled={!isAllowed}
           onSelect={(selectedDate) => {
             if (!selectedDate) return;
-            setValue(selectedDate);
+
             setStringDate(formatDate(selectedDate));
-            handleUpdate(selectedDate);
+
+            handleChange(selectedDate ?? null);
+            handleBlur(selectedDate ?? null);
+
             setInValid(false);
           }}
         />

package/src/modules/inline-edit/components/date-picker.client.tsx

@@ -10,25 +10,29 @@ import React, { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-type InlineEditDatePickerProps = ComponentProps<typeof Button> &
-  useInlineEditOptions<Date> &
+type InlineEditDatePickerProps<Required extends boolean> = ComponentProps<typeof Button> &
+  useInlineEditOptions<Date, Required> &
   InlineEditVariantsProps;
 
-export function InlineDatePicker({
+export function InlineDatePicker<Required extends boolean = false>({
   initialValue,
   action,
   permission,
   variant,
   className,
   disabled,
+  updateStrategy,
+  isRequired,
   ...props
-}: InlineEditDatePickerProps) {
+}: InlineEditDatePickerProps<Required>) {
   const [open, setOpen] = React.useState(false);
 
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -36,7 +40,7 @@ export function InlineDatePicker({
       open={open}
       onOpenChange={(open) => {
         setOpen(open);
-        if (!open && value) handleUpdate(value);
+        if (!open && value) handleBlur(value);
       }}
     >
       <PopoverTrigger asChild>
@@ -44,7 +48,7 @@ export function InlineDatePicker({
           {...props}
           type="button"
           variant="outline"
-          className={cn("w-full", inlineEditVariants({ variant }), className)}
+          className={cn("w-full", inlineEditVariants({ variant, status }), className)}
           disabled={disabled || !isAllowed}
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
@@ -55,9 +59,9 @@ export function InlineDatePicker({
       <PopoverContent className="w-auto p-0">
         <Calendar
           mode="single"
+          autoFocus
           selected={value ? new Date(value) : undefined}
-          onSelect={(date) => date && setValue(date)}
-          initialFocus
+          onSelect={(date) => handleChange(date ?? null)}
         />
       </PopoverContent>
     </Popover>

package/src/modules/inline-edit/components/editor.client.tsx

@@ -6,40 +6,40 @@ import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-export type InlineEditorProps = useInlineEditOptions<EditorJSONContent> &
+export type InlineEditorProps<Required extends boolean = false> = useInlineEditOptions<
+  EditorJSONContent,
+  Required
+> &
   InlineEditVariantsProps &
   Omit<EditorProps, "value" | "onUpdate" | "onBlur" | "variant">;
 
-export function InlineEditor({
+export function InlineEditor<Required extends boolean = false>({
   initialValue,
   action,
   extensions,
   variant,
   disabled,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   children,
-}: InlineEditorProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<EditorJSONContent>({
+}: InlineEditorProps<Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
-  // const [debouncedValue] = useDebounce(value, 500);
-  // useEffect(() => {
-  //   if (!value) return;
-  //   handleUpdate(value);
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [debouncedValue]);
-
   return (
     <Editor
       value={value}
       extensions={extensions}
-      onUpdate={(value) => setValue(value)}
-      onBlur={(value) => handleUpdate(value)}
-      className={cn(inlineEditVariants({ variant }), className)}
+      onUpdate={(value) => handleChange(value)}
+      onBlur={(value) => handleBlur(value)}
+      className={cn(inlineEditVariants({ variant, status }), className)}
       disabled={disabled || !isAllowed}
       variant={variant}
     >

package/src/modules/inline-edit/components/input-recipient.client.tsx

@@ -6,8 +6,11 @@ import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-type InlineRecipientInputProps = Omit<ComponentProps<typeof RecipientInput>, "value" | "onChange"> &
-  useInlineEditOptions<string[]> &
+type InlineRecipientInputProps<Required extends boolean = false> = Omit<
+  ComponentProps<typeof RecipientInput>,
+  "value" | "onChange"
+> &
+  useInlineEditOptions<string[], Required> &
   InlineEditVariantsProps & {
     contacts: Contact[];
   };
@@ -15,20 +18,24 @@ type InlineRecipientInputProps = Omit<ComponentProps<typeof RecipientInput>, "va
 /**
  * The inline edit recipient input component.
  */
-export function InlineRecipientInput({
+export function InlineRecipientInput<Required extends boolean = false>({
   initialValue,
   action,
   variant,
   disabled,
   contacts,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   ...props
-}: InlineRecipientInputProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string[]>({
+}: InlineRecipientInputProps<Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -37,11 +44,11 @@ export function InlineRecipientInput({
       contacts={contacts}
       value={value ?? []}
       onChange={(newValue) => {
-        setValue(newValue);
-        handleUpdate(newValue);
+        handleChange(newValue);
+        handleBlur(newValue);
       }}
       disabled={disabled || !isAllowed}
-      className={cn(inlineEditVariants({ variant }), className)}
+      className={cn(inlineEditVariants({ variant, status }), className)}
     />
   );
 }

package/src/modules/inline-edit/components/input-toggle.client.tsx

@@ -7,30 +7,37 @@ import { CheckIcon, XIcon } from "lucide-react";
 import { ComponentProps, useState } from "react";
 import { useInlineEdit, useInlineEditOptions } from "../hooks/use-inline.client";
 
-type InlineStringInputToggleProps<TValue> = Omit<ComponentProps<typeof Input>, "type"> &
-  useInlineEditOptions<TValue>;
+type InlineStringInputToggleProps<Required extends boolean = false> = Omit<
+  ComponentProps<typeof Input>,
+  "type"
+> &
+  useInlineEditOptions<string, Required>;
 
-export function InlineStringInputToggle({
+export function InlineStringInputToggle<Required extends boolean>({
   initialValue,
   action,
   disabled,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   ...props
-}: InlineStringInputToggleProps<string>) {
+}: InlineStringInputToggleProps<Required>) {
   const [enabled, setEnabled] = useState(!!initialValue);
 
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   function handleToggle() {
     setEnabled(!enabled);
     if (!enabled) return;
 
-    handleUpdate("");
+    handleBlur(null);
   }
 
   const isDisabled = !enabled || disabled || !isAllowed;
@@ -40,10 +47,10 @@ export function InlineStringInputToggle({
       <Input
         {...props}
         type="text"
-        value={value}
+        value={value ?? undefined}
         disabled={isDisabled}
-        onChange={(e) => setValue(e.target.value)}
-        onBlur={(e) => handleUpdate(e.target.value)}
+        onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
+        onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
         className={cn("border-border/70 hover:border-border w-full", className)}
       />
 

package/src/modules/inline-edit/components/input.client.tsx

@@ -6,39 +6,46 @@ import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-type InlineEditInputProps<TValue> = Omit<ComponentProps<typeof Input>, "type"> &
-  useInlineEditOptions<TValue> &
+type InlineEditInputProps<TValue, Required extends boolean = false> = Omit<
+  ComponentProps<typeof Input>,
+  "type"
+> &
+  useInlineEditOptions<TValue, Required> &
   InlineEditVariantsProps;
 
 /**
  * The inline edit string input component.
  */
-export function InlineStringInput({
+export function InlineStringInput<Required extends boolean = false>({
   initialValue,
   action,
   variant,
   className,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditInputProps<string | undefined>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string | undefined>({
+}: InlineEditInputProps<string, Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
     <Input
       {...props}
       type="text"
-      value={value}
+      value={value ?? undefined}
       disabled={disabled || !isAllowed}
-      onChange={(e) => setValue(e.target.value)}
-      onBlur={(e) => handleUpdate(e.target.value)}
+      onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
+      onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
       className={cn(
         "border-border/70 hover:border-border w-full",
-        inlineEditVariants({ variant }),
+        inlineEditVariants({ variant, status }),
         className,
       )}
     />
@@ -48,19 +55,26 @@ export function InlineStringInput({
 /**
  * The inline edit number input component.
  */
-export function InlineNumberInput({
+const parseValueAsNumber = (valueAsNumber: number): number | null =>
+  !isNaN(Number(valueAsNumber)) ? valueAsNumber : null;
+
+export function InlineNumberInput<Required extends boolean = false>({
   initialValue,
   action,
   variant,
   className,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditInputProps<number | undefined>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<number | undefined>({
+}: InlineEditInputProps<number, Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -69,15 +83,11 @@ export function InlineNumberInput({
       type="number"
       value={value ?? undefined}
       disabled={disabled || !isAllowed}
-      onChange={(e) =>
-        setValue(!isNaN(e.target.valueAsNumber) ? e.target.valueAsNumber : undefined)
-      }
-      onBlur={(e) =>
-        handleUpdate(!isNaN(e.target.valueAsNumber) ? e.target.valueAsNumber : undefined)
-      }
+      onChange={(e) => handleChange(parseValueAsNumber(e.target.valueAsNumber))}
+      onBlur={(e) => handleBlur(parseValueAsNumber(e.target.valueAsNumber))}
       className={cn(
         "border-border/70 hover:border-border w-full",
-        inlineEditVariants({ variant }),
+        inlineEditVariants({ variant, status }),
         className,
       )}
     />
@@ -93,13 +103,17 @@ export function InlineDecimalInput({
   variant,
   className,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditInputProps<string | undefined>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string | undefined>({
+}: InlineEditInputProps<string>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -108,11 +122,11 @@ export function InlineDecimalInput({
       type="number"
       value={value ?? undefined}
       disabled={disabled || !isAllowed}
-      onChange={(e) => setValue(e.target.value)}
-      onBlur={(e) => handleUpdate(e.target.value ? e.target.value : undefined)}
+      onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
+      onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
       className={cn(
         "border-border/70 hover:border-border w-full",
-        inlineEditVariants({ variant }),
+        inlineEditVariants({ variant, status }),
         className,
       )}
     />

package/src/modules/inline-edit/components/select.client.tsx

@@ -7,6 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select.client";
+import { useIndicator } from "@/lib/entry.client";
 import { cn } from "@/lib/utils/cn";
 import type {
   SelectContentProps,
@@ -18,29 +19,31 @@ import type {
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-export type InlineSelectProps = SelectProps & useInlineEditOptions<string>;
-
-export function InlineSelect({
+export function InlineSelect<Required extends boolean = false>({
   initialValue,
   action,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineSelectProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: SelectProps & useInlineEditOptions<string, Required>) {
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
     <Select
       {...props}
       disabled={disabled || !isAllowed}
-      defaultValue={value}
+      defaultValue={value ?? undefined}
       onValueChange={(value) => {
-        setValue(value);
-        handleUpdate(value);
+        handleChange(value ? value : null);
+        handleBlur(value ? value : null);
       }}
     />
   );
@@ -53,7 +56,11 @@ export function InlineSelectTrigger({
   className,
   ...props
 }: InlineSelectTriggerProps & InlineEditVariantsProps) {
-  return <SelectTrigger {...props} className={cn(inlineEditVariants({ variant }), className)} />;
+  const { status } = useIndicator();
+
+  return (
+    <SelectTrigger {...props} className={cn(inlineEditVariants({ variant, status }), className)} />
+  );
 }
 
 export type InlineSelectContentProps = SelectContentProps;

package/src/modules/inline-edit/components/switch.client.tsx

@@ -4,27 +4,31 @@ import { Switch } from "@/components/ui/switch";
 import { type SwitchProps } from "@radix-ui/react-switch";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 
-export function InlineSwitch({
+export function InlineSwitch<Required extends boolean = false>({
   initialValue,
   action,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: SwitchProps & useInlineEditOptions<boolean>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: SwitchProps & useInlineEditOptions<boolean, Required>) {
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
     <Switch
       {...props}
       disabled={disabled || !isAllowed}
-      defaultChecked={value}
+      defaultChecked={value ?? undefined}
       onCheckedChange={(checked) => {
-        setValue(checked);
-        handleUpdate(checked);
+        handleChange(checked ?? null);
+        handleBlur(checked ?? null);
       }}
     />
   );

package/src/modules/inline-edit/components/toggle.client.tsx

@@ -5,21 +5,25 @@ import { cn } from "@/lib/utils/cn";
 import type React from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 
-export type InlineEditToggleProps = React.HTMLAttributes<HTMLDivElement> &
-  useInlineEditOptions<boolean>;
+export type InlineEditToggleProps<Required extends boolean = false> =
+  React.HTMLAttributes<HTMLDivElement> & useInlineEditOptions<boolean, Required>;
 
-export function InlineToggle({
+export function InlineToggle<Required extends boolean = false>({
   initialValue,
   action,
   children,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   ...props
-}: InlineEditToggleProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: InlineEditToggleProps<Required>) {
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -27,11 +31,11 @@ export function InlineToggle({
       <Toggle
         disabled={!isAllowed}
         variant="outline"
-        pressed={value}
-        defaultChecked={initialValue}
+        pressed={value ?? undefined}
+        defaultChecked={initialValue ?? undefined}
         onPressedChange={(value) => {
-          setValue(value);
-          handleUpdate(value);
+          handleChange(value);
+          handleBlur(value);
         }}
       >
         {children}

package/src/modules/inline-edit/entry.client.ts

@@ -2,7 +2,6 @@ export * from "./components/combobox-dropdown.client";
 export * from "./components/combobox.client";
 export * from "./components/date-input.client";
 export * from "./components/date-picker.client";
-export * from "./components/deprecated-editor.client";
 export * from "./components/editor.client";
 export * from "./components/input-recipient.client";
 export * from "./components/input-toggle.client";