@carlonicora/nextjs-jsonapi 1.47.2 → 1.48.0

package/dist/scripts/generate-web-module/templates/components/multi-selector.template.js

@@ -16,14 +16,13 @@ function generateMultiSelectorTemplate(data) {
     const { names } = data;
     return `"use client";
 
-import { FormFieldWrapper, MultiSelect } from "@carlonicora/nextjs-jsonapi/components";
 import { ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
 import { ${names.pascalCase}Service } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
-import { DataListRetriever, useDataListRetriever } from "@carlonicora/nextjs-jsonapi/client";
-import { useDebounce } from "@carlonicora/nextjs-jsonapi/client";
+import { DataListRetriever, useDataListRetriever, useDebounce } from "@carlonicora/nextjs-jsonapi/client";
+import { FormFieldWrapper, MultipleSelector } from "@carlonicora/nextjs-jsonapi/components";
+import { Option } from "@carlonicora/nextjs-jsonapi/components";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";
-import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useWatch } from "react-hook-form";
 
 type ${names.pascalCase}MultiSelectType = {
@@ -42,6 +41,10 @@ type ${names.pascalCase}MultiSelectorProps = {
   isRequired?: boolean;
 };
 
+type ${names.pascalCase}Option = Option & {
+  ${names.camelCase}Data?: ${names.pascalCase}Interface;
+};
+
 export default function ${names.pascalCase}MultiSelector({
   id,
   form,
@@ -52,8 +55,7 @@ export default function ${names.pascalCase}MultiSelector({
   maxCount = 3,
   isRequired = false,
 }: ${names.pascalCase}MultiSelectorProps) {
-  const t = useTranslations("features.${names.camelCase}");
-  const [${names.camelCase}Options, set${names.pascalCase}Options] = useState<any[]>([]);
+  const [${names.camelCase}Options, set${names.pascalCase}Options] = useState<${names.pascalCase}Option[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>("");
 
   const selected${names.pluralPascal}: ${names.pascalCase}MultiSelectType[] = useWatch({ control: form.control, name: id }) || [];
@@ -73,7 +75,7 @@ export default function ${names.pascalCase}MultiSelector({
         data.removeAdditionalParameter("search");
       }
     },
-    [data],
+    [data]
   );
 
   const debouncedUpdateSearch = useDebounce(updateSearch, 500);
@@ -87,79 +89,75 @@ export default function ${names.pascalCase}MultiSelector({
       const ${names.pluralCamel} = data.data as ${names.pascalCase}Interface[];
       const filtered${names.pluralPascal} = ${names.pluralCamel}.filter((${names.camelCase}) => ${names.camelCase}.id !== current${names.pascalCase}?.id);
 
-      const options = filtered${names.pluralPascal}.map((${names.camelCase}) => ({
+      const options: ${names.pascalCase}Option[] = filtered${names.pluralPascal}.map((${names.camelCase}) => ({
         label: ${names.camelCase}.name,
         value: ${names.camelCase}.id,
         ${names.camelCase}Data: ${names.camelCase},
       }));
 
-      set${names.pascalCase}Options(options);
-    }
-  }, [data.data, current${names.pascalCase}]);
-
-  // Add options for any already selected ${names.pluralCamel} that aren't in search results
-  useEffect(() => {
-    if (selected${names.pluralPascal}.length > 0) {
-      // Create a map of existing option IDs for quick lookup
-      const existingOptionIds = new Set(${names.camelCase}Options.map((option) => option.value));
-
-      // Find selected ${names.pluralCamel} that don't have an option yet
-      const missingOptions = selected${names.pluralPascal}
+      // Add options for any already selected that aren't in search results
+      const existingOptionIds = new Set(options.map((option) => option.value));
+      const missingOptions: ${names.pascalCase}Option[] = selected${names.pluralPascal}
         .filter((${names.camelCase}) => !existingOptionIds.has(${names.camelCase}.id))
         .map((${names.camelCase}) => ({
           label: ${names.camelCase}.name,
           value: ${names.camelCase}.id,
-          ${names.camelCase}Data: ${names.camelCase},
+          ${names.camelCase}Data: ${names.camelCase} as unknown as ${names.pascalCase}Interface,
         }));
 
-      if (missingOptions.length > 0) {
-        set${names.pascalCase}Options((prev) => [...prev, ...missingOptions]);
-      }
+      set${names.pascalCase}Options([...options, ...missingOptions]);
     }
-  }, [selected${names.pluralPascal}, ${names.camelCase}Options]);
+  }, [data.data, current${names.pascalCase}, selected${names.pluralPascal}]);
 
-  const handleValueChange = (selectedIds: string[]) => {
-    const updatedSelected${names.pluralPascal} = selectedIds.map((id) => {
-      const existing${names.pascalCase} = selected${names.pluralPascal}.find((${names.camelCase}) => ${names.camelCase}.id === id);
-      if (existing${names.pascalCase}) {
-        return existing${names.pascalCase};
-      }
+  // Convert selected to Option[] format
+  const selectedOptions = useMemo(() => {
+    return selected${names.pluralPascal}.map((${names.camelCase}) => ({
+      value: ${names.camelCase}.id,
+      label: ${names.camelCase}.name,
+    }));
+  }, [selected${names.pluralPascal}]);
 
-      const option = ${names.camelCase}Options.find((option) => option.value === id);
-      if (option?.${names.camelCase}Data) {
-        return {
-          id: option.${names.camelCase}Data.id,
-          name: option.${names.camelCase}Data.name,
-        };
-      }
+  const handleChange = (options: Option[]) => {
+    // Convert to form format
+    const formValues = options.map((option) => ({
+      id: option.value,
+      name: option.label,
+    }));
 
-      return { id, name: id };
-    });
-
-    form.setValue(id, updatedSelected${names.pluralPascal});
+    form.setValue(id, formValues, { shouldDirty: true, shouldTouch: true });
 
     if (onChange) {
-      const fullSelected${names.pluralPascal} = selectedIds
-        .map((id) => ${names.camelCase}Options.find((option) => option.value === id)?.${names.camelCase}Data)
+      // Get full data for onChange callback
+      const fullData = options
+        .map((option) => {
+          const ${names.camelCase}Option = ${names.camelCase}Options.find((opt) => opt.value === option.value);
+          return ${names.camelCase}Option?.${names.camelCase}Data;
+        })
         .filter(Boolean) as ${names.pascalCase}Interface[];
-      onChange(fullSelected${names.pluralPascal});
+      onChange(fullData);
     }
   };
 
-  const selected${names.pascalCase}Ids = selected${names.pluralPascal}.map((${names.camelCase}: ${names.pascalCase}MultiSelectType) => ${names.camelCase}.id);
+  // Search handler
+  const handleSearchSync = (search: string): Option[] => {
+    setSearchTerm(search);
+    return ${names.camelCase}Options;
+  };
 
   return (
     <div className="flex w-full flex-col">
       <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired}>
-        {(field) => (
-          <MultiSelect
+        {() => (
+          <MultipleSelector
+            value={selectedOptions}
+            onChange={handleChange}
             options={${names.camelCase}Options}
-            onValueChange={handleValueChange}
-            defaultValue={selected${names.pascalCase}Ids}
             placeholder={placeholder}
-            maxCount={maxCount}
-            animation={0}
-            onSearchChange={setSearchTerm}
+            maxDisplayCount={maxCount}
+            hideClearAllButton
+            onSearchSync={handleSearchSync}
+            delay={0}
+            emptyIndicator={<span className="text-muted-foreground">No results found</span>}
           />
         )}
       </FormFieldWrapper>

package/dist/scripts/generate-web-module/templates/components/multi-selector.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-selector.template.js","sourceRoot":"","sources":["../../../../../scripts/generate-web-module/templates/components/multi-selector.template.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAUH,sEA4JC;AAlKD;;;;;GAKG;AACH,SAAgB,6BAA6B,CAAC,IAA0B;IACtE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,OAAO;;;WAGE,KAAK,CAAC,UAAU,gCAAgC,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;WAChH,KAAK,CAAC,UAAU,8BAA8B,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;;;;;;;;OAQlH,KAAK,CAAC,UAAU;;;;;OAKhB,KAAK,CAAC,UAAU;;;WAGZ,KAAK,CAAC,UAAU,MAAM,KAAK,CAAC,UAAU;;;gBAGjC,KAAK,CAAC,WAAW,MAAM,KAAK,CAAC,UAAU;;;;;0BAK7B,KAAK,CAAC,UAAU;;;WAG/B,KAAK,CAAC,UAAU;;;;;;KAMtB,KAAK,CAAC,UAAU;wCACmB,KAAK,CAAC,SAAS;WAC5C,KAAK,CAAC,SAAS,eAAe,KAAK,CAAC,UAAU;;;kBAGvC,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,UAAU;;kCAEvB,KAAK,CAAC,UAAU;6BACrB,KAAK,CAAC,UAAU;;;sBAGvB,KAAK,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;cAsBxB,KAAK,CAAC,WAAW,mBAAmB,KAAK,CAAC,UAAU;sBAC5C,KAAK,CAAC,YAAY,MAAM,KAAK,CAAC,WAAW,YAAY,KAAK,CAAC,SAAS,QAAQ,KAAK,CAAC,SAAS,kBAAkB,KAAK,CAAC,UAAU;;gCAEnH,KAAK,CAAC,YAAY,SAAS,KAAK,CAAC,SAAS;iBACzD,KAAK,CAAC,SAAS;iBACf,KAAK,CAAC,SAAS;UACtB,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,SAAS;;;WAGtC,KAAK,CAAC,UAAU;;0BAED,KAAK,CAAC,UAAU;;4CAEE,KAAK,CAAC,WAAW;;kBAE3C,KAAK,CAAC,YAAY;;0CAEM,KAAK,CAAC,SAAS;;yBAEhC,KAAK,CAAC,WAAW;uCACH,KAAK,CAAC,YAAY;mBACtC,KAAK,CAAC,SAAS,+BAA+B,KAAK,CAAC,SAAS;gBAChE,KAAK,CAAC,SAAS;mBACZ,KAAK,CAAC,SAAS;mBACf,KAAK,CAAC,SAAS;YACtB,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,SAAS;;;;aAItC,KAAK,CAAC,UAAU;;;gBAGb,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS;;;2BAG3B,KAAK,CAAC,YAAY;sBACvB,KAAK,CAAC,UAAU,cAAc,KAAK,CAAC,YAAY,UAAU,KAAK,CAAC,SAAS,QAAQ,KAAK,CAAC,SAAS;oBAClG,KAAK,CAAC,UAAU;yBACX,KAAK,CAAC,UAAU;;;uBAGlB,KAAK,CAAC,SAAS;oBAClB,KAAK,CAAC,SAAS;;uBAEZ,KAAK,CAAC,SAAS;yBACb,KAAK,CAAC,SAAS;;;;;;;uCAOD,KAAK,CAAC,YAAY;;;0BAG/B,KAAK,CAAC,YAAY;uBACrB,KAAK,CAAC,SAAS,kDAAkD,KAAK,CAAC,SAAS;8BACzE,KAAK,CAAC,UAAU;6BACjB,KAAK,CAAC,YAAY;;;;kBAI7B,KAAK,CAAC,UAAU,iBAAiB,KAAK,CAAC,YAAY,SAAS,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,UAAU,uBAAuB,KAAK,CAAC,SAAS;;;;;;;uBAOjI,KAAK,CAAC,SAAS;;oCAEF,KAAK,CAAC,UAAU;;;;;;;;;;;CAWnD,CAAC;AACF,CAAC"}
+{"version":3,"file":"multi-selector.template.js","sourceRoot":"","sources":["../../../../../scripts/generate-web-module/templates/components/multi-selector.template.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAUH,sEA0JC;AAhKD;;;;;GAKG;AACH,SAAgB,6BAA6B,CAAC,IAA0B;IACtE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEvB,OAAO;;WAEE,KAAK,CAAC,UAAU,gCAAgC,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;WAChH,KAAK,CAAC,UAAU,8BAA8B,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,UAAU;;;;;;;;OAQlH,KAAK,CAAC,UAAU;;;;;OAKhB,KAAK,CAAC,UAAU;;;WAGZ,KAAK,CAAC,UAAU,MAAM,KAAK,CAAC,UAAU;;;gBAGjC,KAAK,CAAC,WAAW,MAAM,KAAK,CAAC,UAAU;;;;;OAKhD,KAAK,CAAC,UAAU;IACnB,KAAK,CAAC,SAAS,UAAU,KAAK,CAAC,UAAU;;;0BAGnB,KAAK,CAAC,UAAU;;;WAG/B,KAAK,CAAC,UAAU;;;;;;KAMtB,KAAK,CAAC,UAAU;WACV,KAAK,CAAC,SAAS,eAAe,KAAK,CAAC,UAAU,uBAAuB,KAAK,CAAC,UAAU;;;kBAG9E,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,UAAU;;kCAEvB,KAAK,CAAC,UAAU;6BACrB,KAAK,CAAC,UAAU;;;sBAGvB,KAAK,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;cAsBxB,KAAK,CAAC,WAAW,mBAAmB,KAAK,CAAC,UAAU;sBAC5C,KAAK,CAAC,YAAY,MAAM,KAAK,CAAC,WAAW,YAAY,KAAK,CAAC,SAAS,QAAQ,KAAK,CAAC,SAAS,kBAAkB,KAAK,CAAC,UAAU;;uBAE5H,KAAK,CAAC,UAAU,sBAAsB,KAAK,CAAC,YAAY,SAAS,KAAK,CAAC,SAAS;iBACtF,KAAK,CAAC,SAAS;iBACf,KAAK,CAAC,SAAS;UACtB,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,SAAS;;;;;8BAKnB,KAAK,CAAC,UAAU,sBAAsB,KAAK,CAAC,YAAY;mBACnE,KAAK,CAAC,SAAS,+BAA+B,KAAK,CAAC,SAAS;gBAChE,KAAK,CAAC,SAAS;mBACZ,KAAK,CAAC,SAAS;mBACf,KAAK,CAAC,SAAS;YACtB,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,SAAS,kBAAkB,KAAK,CAAC,UAAU;;;WAG1E,KAAK,CAAC,UAAU;;0BAED,KAAK,CAAC,UAAU,aAAa,KAAK,CAAC,YAAY;;;;qBAIpD,KAAK,CAAC,YAAY,SAAS,KAAK,CAAC,SAAS;eAChD,KAAK,CAAC,SAAS;eACf,KAAK,CAAC,SAAS;;gBAEd,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;kBAehB,KAAK,CAAC,SAAS,YAAY,KAAK,CAAC,SAAS;mBACzC,KAAK,CAAC,SAAS,WAAW,KAAK,CAAC,SAAS;;8BAE9B,KAAK,CAAC,UAAU;;;;;;;;aAQjC,KAAK,CAAC,SAAS;;;;;;;;;;uBAUL,KAAK,CAAC,SAAS;;;;;;;;;;;;;CAarC,CAAC;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.47.2",
+  "version": "1.48.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/scripts/generate-web-module/templates/components/multi-selector.template.ts

@@ -17,14 +17,13 @@ export function generateMultiSelectorTemplate(data: FrontendTemplateData): strin
 
   return `"use client";
 
-import { FormFieldWrapper, MultiSelect } from "@carlonicora/nextjs-jsonapi/components";
 import { ${names.pascalCase}Interface } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Interface";
 import { ${names.pascalCase}Service } from "@/features/${data.importTargetDir}/${names.kebabCase}/data/${names.pascalCase}Service";
-import { DataListRetriever, useDataListRetriever } from "@carlonicora/nextjs-jsonapi/client";
-import { useDebounce } from "@carlonicora/nextjs-jsonapi/client";
+import { DataListRetriever, useDataListRetriever, useDebounce } from "@carlonicora/nextjs-jsonapi/client";
+import { FormFieldWrapper, MultipleSelector } from "@carlonicora/nextjs-jsonapi/components";
+import { Option } from "@carlonicora/nextjs-jsonapi/components";
 import { Modules } from "@carlonicora/nextjs-jsonapi/core";
-import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useWatch } from "react-hook-form";
 
 type ${names.pascalCase}MultiSelectType = {
@@ -43,6 +42,10 @@ type ${names.pascalCase}MultiSelectorProps = {
   isRequired?: boolean;
 };
 
+type ${names.pascalCase}Option = Option & {
+  ${names.camelCase}Data?: ${names.pascalCase}Interface;
+};
+
 export default function ${names.pascalCase}MultiSelector({
   id,
   form,
@@ -53,8 +56,7 @@ export default function ${names.pascalCase}MultiSelector({
   maxCount = 3,
   isRequired = false,
 }: ${names.pascalCase}MultiSelectorProps) {
-  const t = useTranslations("features.${names.camelCase}");
-  const [${names.camelCase}Options, set${names.pascalCase}Options] = useState<any[]>([]);
+  const [${names.camelCase}Options, set${names.pascalCase}Options] = useState<${names.pascalCase}Option[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>("");
 
   const selected${names.pluralPascal}: ${names.pascalCase}MultiSelectType[] = useWatch({ control: form.control, name: id }) || [];
@@ -74,7 +76,7 @@ export default function ${names.pascalCase}MultiSelector({
         data.removeAdditionalParameter("search");
       }
     },
-    [data],
+    [data]
   );
 
   const debouncedUpdateSearch = useDebounce(updateSearch, 500);
@@ -88,79 +90,75 @@ export default function ${names.pascalCase}MultiSelector({
       const ${names.pluralCamel} = data.data as ${names.pascalCase}Interface[];
       const filtered${names.pluralPascal} = ${names.pluralCamel}.filter((${names.camelCase}) => ${names.camelCase}.id !== current${names.pascalCase}?.id);
 
-      const options = filtered${names.pluralPascal}.map((${names.camelCase}) => ({
+      const options: ${names.pascalCase}Option[] = filtered${names.pluralPascal}.map((${names.camelCase}) => ({
         label: ${names.camelCase}.name,
         value: ${names.camelCase}.id,
         ${names.camelCase}Data: ${names.camelCase},
       }));
 
-      set${names.pascalCase}Options(options);
-    }
-  }, [data.data, current${names.pascalCase}]);
-
-  // Add options for any already selected ${names.pluralCamel} that aren't in search results
-  useEffect(() => {
-    if (selected${names.pluralPascal}.length > 0) {
-      // Create a map of existing option IDs for quick lookup
-      const existingOptionIds = new Set(${names.camelCase}Options.map((option) => option.value));
-
-      // Find selected ${names.pluralCamel} that don't have an option yet
-      const missingOptions = selected${names.pluralPascal}
+      // Add options for any already selected that aren't in search results
+      const existingOptionIds = new Set(options.map((option) => option.value));
+      const missingOptions: ${names.pascalCase}Option[] = selected${names.pluralPascal}
         .filter((${names.camelCase}) => !existingOptionIds.has(${names.camelCase}.id))
         .map((${names.camelCase}) => ({
           label: ${names.camelCase}.name,
           value: ${names.camelCase}.id,
-          ${names.camelCase}Data: ${names.camelCase},
+          ${names.camelCase}Data: ${names.camelCase} as unknown as ${names.pascalCase}Interface,
         }));
 
-      if (missingOptions.length > 0) {
-        set${names.pascalCase}Options((prev) => [...prev, ...missingOptions]);
-      }
+      set${names.pascalCase}Options([...options, ...missingOptions]);
     }
-  }, [selected${names.pluralPascal}, ${names.camelCase}Options]);
+  }, [data.data, current${names.pascalCase}, selected${names.pluralPascal}]);
 
-  const handleValueChange = (selectedIds: string[]) => {
-    const updatedSelected${names.pluralPascal} = selectedIds.map((id) => {
-      const existing${names.pascalCase} = selected${names.pluralPascal}.find((${names.camelCase}) => ${names.camelCase}.id === id);
-      if (existing${names.pascalCase}) {
-        return existing${names.pascalCase};
-      }
+  // Convert selected to Option[] format
+  const selectedOptions = useMemo(() => {
+    return selected${names.pluralPascal}.map((${names.camelCase}) => ({
+      value: ${names.camelCase}.id,
+      label: ${names.camelCase}.name,
+    }));
+  }, [selected${names.pluralPascal}]);
 
-      const option = ${names.camelCase}Options.find((option) => option.value === id);
-      if (option?.${names.camelCase}Data) {
-        return {
-          id: option.${names.camelCase}Data.id,
-          name: option.${names.camelCase}Data.name,
-        };
-      }
+  const handleChange = (options: Option[]) => {
+    // Convert to form format
+    const formValues = options.map((option) => ({
+      id: option.value,
+      name: option.label,
+    }));
 
-      return { id, name: id };
-    });
-
-    form.setValue(id, updatedSelected${names.pluralPascal});
+    form.setValue(id, formValues, { shouldDirty: true, shouldTouch: true });
 
     if (onChange) {
-      const fullSelected${names.pluralPascal} = selectedIds
-        .map((id) => ${names.camelCase}Options.find((option) => option.value === id)?.${names.camelCase}Data)
+      // Get full data for onChange callback
+      const fullData = options
+        .map((option) => {
+          const ${names.camelCase}Option = ${names.camelCase}Options.find((opt) => opt.value === option.value);
+          return ${names.camelCase}Option?.${names.camelCase}Data;
+        })
         .filter(Boolean) as ${names.pascalCase}Interface[];
-      onChange(fullSelected${names.pluralPascal});
+      onChange(fullData);
     }
   };
 
-  const selected${names.pascalCase}Ids = selected${names.pluralPascal}.map((${names.camelCase}: ${names.pascalCase}MultiSelectType) => ${names.camelCase}.id);
+  // Search handler
+  const handleSearchSync = (search: string): Option[] => {
+    setSearchTerm(search);
+    return ${names.camelCase}Options;
+  };
 
   return (
     <div className="flex w-full flex-col">
       <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired}>
-        {(field) => (
-          <MultiSelect
+        {() => (
+          <MultipleSelector
+            value={selectedOptions}
+            onChange={handleChange}
             options={${names.camelCase}Options}
-            onValueChange={handleValueChange}
-            defaultValue={selected${names.pascalCase}Ids}
             placeholder={placeholder}
-            maxCount={maxCount}
-            animation={0}
-            onSearchChange={setSearchTerm}
+            maxDisplayCount={maxCount}
+            hideClearAllButton
+            onSearchSync={handleSearchSync}
+            delay={0}
+            emptyIndicator={<span className="text-muted-foreground">No results found</span>}
           />
         )}
       </FormFieldWrapper>

package/src/components/editors/BlockNoteEditor.tsx

@@ -390,14 +390,14 @@ export default function BlockNoteEditor({
   );
 
   return (
-    <div ref={editorRef} className={cn(bordered ? "rounded-md border" : "", "w-full")}>
+    <div ref={editorRef} className={cn(bordered ? "rounded-md border" : "", "flex flex-col w-full", className)}>
       <BlockNoteView
         editor={editor}
         onChange={handleChange}
         editable={onChange !== undefined}
         formattingToolbar={false}
         theme="light"
-        className={cn(`BlockNoteView ${onChange ? "min-h-96 p-4" : ""}`, className, size === "sm" && "small")}
+        className={cn(`BlockNoteView flex-1 ${onChange ? "p-4" : ""}`, size === "sm" && "small")}
       >
         <BlockNoteEditorFormattingToolbar />
       </BlockNoteView>

package/src/features/company/hooks/useSubscriptionStatus.ts

@@ -3,6 +3,7 @@
 import { useMemo } from "react";
 import { useCurrentUserContext } from "../../user/contexts/CurrentUserContext";
 import { getRoleId, isRolesConfigured } from "../../../roles";
+import { getStripePublishableKey } from "../../../client/config";
 
 export interface TrialSubscriptionStatus {
   status: "loading" | "trial" | "active" | "expired";
@@ -36,6 +37,17 @@ export function useSubscriptionStatus(): TrialSubscriptionStatus {
       };
     }
 
+    // If Stripe is not configured, treat as active subscription (no trial/blocking features)
+    if (!getStripePublishableKey()) {
+      return {
+        status: "active",
+        trialEndsAt: null,
+        daysRemaining: 0,
+        isGracePeriod: false,
+        isBlocked: false,
+      };
+    }
+
     // Administrator users are never blocked by trial
     if (isAdministrator(currentUser)) {
       return {

package/src/features/user/components/forms/UserMultiSelect.tsx

@@ -1,12 +1,14 @@
 "use client";
 
+import { Loader2 } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useWatch } from "react-hook-form";
 import { FormFieldWrapper } from "../../../../components/forms";
 import { Modules } from "../../../../core";
 import { DataListRetriever, useDataListRetriever, useDebounce } from "../../../../hooks";
-import { Avatar, AvatarFallback, AvatarImage, MultiSelect } from "../../../../shadcnui";
+import { Avatar, AvatarFallback, AvatarImage, MultipleSelector } from "../../../../shadcnui";
+import { Option } from "../../../../shadcnui";
 import { useCurrentUserContext } from "../../contexts";
 import { UserInterface } from "../../data";
 import { UserService } from "../../data/user.service";
@@ -29,6 +31,11 @@ type UserMultiSelectProps = {
   isRequired?: boolean;
 };
 
+type UserOption = Option & {
+  userData?: UserInterface;
+  avatar?: string;
+};
+
 function UserAvatarIcon({ className, url, name }: { className?: string; url?: string; name?: string }) {
   return (
     <Avatar className={`${className || "h-4 w-4"}`}>
@@ -61,7 +68,7 @@ export function UserMultiSelect({
   const searchTermRef = useRef<string>("");
   const [searchTerm, _setSearchTerm] = useState<string>("");
   const [isSearching, setIsSearching] = useState<boolean>(false);
-  const [userOptions, setUserOptions] = useState<any[]>([]);
+  const [userOptions, setUserOptions] = useState<UserOption[]>([]);
 
   // Get the current selected users from the form
   const selectedUsers: UserSelectType[] = useWatch({ control: form.control, name: id }) || [];
@@ -106,94 +113,105 @@ export function UserMultiSelect({
       const users = data.data as UserInterface[];
       const filteredUsers = users.filter((user) => user.id !== currentUser?.id);
 
-      const options = filteredUsers.map((user) => ({
+      const options: UserOption[] = filteredUsers.map((user) => ({
         label: user.name,
         value: user.id,
-        icon: ({ className }: { className?: string }) => (
-          <UserAvatarIcon className={className} url={user.avatar} name={user.name} />
-        ),
         userData: user,
+        avatar: user.avatar,
       }));
 
-      setUserOptions(options);
-    }
-  }, [data.data, currentUser]);
-
-  // Add options for any already selected users that aren't in search results
-  useEffect(() => {
-    if (selectedUsers.length > 0) {
-      // Create a map of existing option IDs for quick lookup
-      const existingOptionIds = new Set(userOptions.map((option) => option.value));
-
-      // Find selected users that don't have an option yet
-      const missingOptions = selectedUsers
+      // Add options for any already selected users that aren't in search results
+      const existingOptionIds = new Set(options.map((option) => option.value));
+      const missingOptions: UserOption[] = selectedUsers
         .filter((user) => !existingOptionIds.has(user.id))
         .map((user) => ({
           label: user.name,
           value: user.id,
-          icon: ({ className }: { className?: string }) => (
-            <UserAvatarIcon className={className} url={user.avatar} name={user.name} />
-          ),
-          userData: user,
+          userData: user as unknown as UserInterface,
+          avatar: user.avatar,
         }));
 
-      // Add missing options if there are any
-      if (missingOptions.length > 0) {
-        setUserOptions((prev) => [...prev, ...missingOptions]);
-      }
+      setUserOptions([...options, ...missingOptions]);
     }
-  }, [selectedUsers, userOptions]);
-
-  const handleValueChange = (selectedIds: string[]) => {
-    // Map selected IDs to user objects for the form
-    const updatedSelectedUsers = selectedIds.map((id) => {
-      // First check if user is already in the selected users (preserve existing data)
-      const existingUser = selectedUsers.find((user) => user.id === id);
-      if (existingUser) {
-        return existingUser;
-      }
-
-      // Otherwise, get user data from the options
-      const option = userOptions.find((option) => option.value === id);
-      if (option?.userData) {
-        return {
-          id: option.userData.id,
-          name: option.userData.name,
-          avatar: option.userData.avatar,
-        };
-      }
-
-      // Fallback to just the ID if no data is available
-      return { id, name: id };
+  }, [data.data, currentUser, selectedUsers]);
+
+  // Convert selected users to Option[] format
+  const selectedOptions = useMemo(() => {
+    return selectedUsers.map((user) => ({
+      value: user.id,
+      label: user.name,
+    }));
+  }, [selectedUsers]);
+
+  const handleChange = (options: Option[]) => {
+    // Convert to form format
+    const formValues = options.map((option) => {
+      const userOption = userOptions.find((opt) => opt.value === option.value);
+      return {
+        id: option.value,
+        name: option.label,
+        avatar: userOption?.avatar,
+      };
     });
 
-    form.setValue(id, updatedSelectedUsers);
+    form.setValue(id, formValues, { shouldDirty: true, shouldTouch: true });
 
     if (onChange) {
-      const fullSelectedUsers = selectedIds
-        .map((id) => userOptions.find((option) => option.value === id)?.userData)
+      // Get full user data for onChange callback
+      const fullUsers = options
+        .map((option) => {
+          const userOption = userOptions.find((opt) => opt.value === option.value);
+          return userOption?.userData;
+        })
         .filter(Boolean) as UserInterface[];
-      onChange(fullSelectedUsers);
+      onChange(fullUsers);
     }
   };
 
-  // Extract just the IDs for the MultiSelect component
-  const selectedUserIds = selectedUsers.map((user: UserSelectType) => user.id);
+  // Custom render function for dropdown options (with avatar)
+  const renderOption = (option: Option) => {
+    const userOption = option as UserOption;
+    return (
+      <span className="flex items-center gap-2">
+        <UserAvatarIcon url={userOption.avatar} name={option.label} />
+        {option.label}
+      </span>
+    );
+  };
+
+  // Search handler
+  const handleSearchSync = (search: string): Option[] => {
+    _setSearchTerm(search);
+    return userOptions;
+  };
 
   return (
     <div className="flex w-full flex-col">
       <FormFieldWrapper form={form} name={id} label={label} isRequired={isRequired}>
         {() => (
-          <MultiSelect
+          <MultipleSelector
+            value={selectedOptions}
+            onChange={handleChange}
             options={userOptions}
-            onValueChange={handleValueChange}
-            defaultValue={selectedUserIds}
             placeholder={placeholder}
-            maxCount={maxCount}
-            animation={0}
-            loading={isSearching}
-            loadingText={t("ui.search.button")}
-            emptyText={t("ui.search.no_results", { type: t("entities.users", { count: 2 }) })}
+            maxDisplayCount={maxCount}
+            hideClearAllButton
+            onSearchSync={handleSearchSync}
+            delay={0}
+            renderOption={renderOption}
+            loadingIndicator={
+              isSearching ? (
+                <div className="flex items-center justify-center py-2">
+                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                  <span className="ml-2 text-sm text-muted-foreground">{t("ui.search.button")}</span>
+                </div>
+              ) : undefined
+            }
+            emptyIndicator={
+              <span className="text-muted-foreground">
+                {t("ui.search.no_results", { type: t("entities.users", { count: 2 }) })}
+              </span>
+            }
           />
         )}
       </FormFieldWrapper>