@helpwave/hightide 0.1.8 → 0.1.10

package/dist/components/properties/MultiSelectProperty.mjs

@@ -30,15 +30,63 @@ var LanguageContext = createContext({
 var useLanguage = () => useContext(LanguageContext);
 
 // src/localization/useTranslation.ts
-var useTranslation = (defaults, translationOverwrite = {}) => {
-  const { language: languageProp, translation: overwrite } = translationOverwrite;
+var TranslationPluralCount = {
+  zero: 0,
+  one: 1,
+  two: 2,
+  few: 3,
+  many: 11,
+  other: -1
+};
+var useTranslation = (translations, overwriteTranslation = {}) => {
+  const { language: languageProp, translation: overwrite } = overwriteTranslation;
   const { language: inferredLanguage } = useLanguage();
   const usedLanguage = languageProp ?? inferredLanguage;
-  let defaultValues = defaults[usedLanguage];
-  if (overwrite && overwrite[usedLanguage]) {
-    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  const usedTranslations = [...translations];
+  if (overwrite) {
+    usedTranslations.push(overwrite);
   }
-  return defaultValues;
+  return (key, options) => {
+    const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
+    try {
+      for (let i = translations.length - 1; i >= 0; i--) {
+        const translation = translations[i];
+        const localizedTranslation = translation[usedLanguage];
+        if (!localizedTranslation) {
+          continue;
+        }
+        const value = localizedTranslation[key];
+        if (!value) {
+          continue;
+        }
+        let forProcessing;
+        if (typeof value !== "string") {
+          if (count === TranslationPluralCount.zero && value?.zero) {
+            forProcessing = value.zero;
+          } else if (count === TranslationPluralCount.one && value?.one) {
+            forProcessing = value.one;
+          } else if (count === TranslationPluralCount.two && value?.two) {
+            forProcessing = value.two;
+          } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {
+            forProcessing = value.few;
+          } else if (count > TranslationPluralCount.many && value?.many) {
+            forProcessing = value.many;
+          } else {
+            forProcessing = value.other;
+          }
+        } else {
+          forProcessing = value;
+        }
+        forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
+          return replacements[placeholder] ?? `{{key:${placeholder}}}`;
+        });
+        return forProcessing;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return `{{${usedLanguage}:${key}}}`;
+  };
 };
 
 // src/components/user-action/MultiSelect.tsx
@@ -436,15 +484,113 @@ var useSearch = ({
   };
 };
 
+// src/localization/defaults/form.ts
+var formTranslation = {
+  en: {
+    all: "All",
+    back: "Back",
+    cancel: "Cancel",
+    change: "Change",
+    clear: "Clear",
+    close: "Close",
+    confirm: "Confirm",
+    decline: "Decline",
+    delete: "Delete",
+    discard: "Discard",
+    discardChanges: "Discard Changes",
+    done: "Done",
+    edit: "Edit",
+    enterText: "Enter text here",
+    error: "Error",
+    exit: "Exit",
+    fieldRequiredError: "This field is required.",
+    invalidEmailError: "Please enter a valid email address.",
+    less: "Less",
+    loading: "Loading",
+    maxLengthError: "Maximum length exceeded.",
+    minLengthError: "Minimum length not met.",
+    more: "More",
+    next: "Next",
+    no: "No",
+    none: "None",
+    of: "of",
+    optional: "Optional",
+    pleaseWait: "Please wait...",
+    previous: "Previous",
+    remove: "Remove",
+    required: "Required",
+    reset: "Reset",
+    save: "Save",
+    search: "Search",
+    select: "Select",
+    selectOption: "Select an option",
+    show: "Show",
+    showMore: "Show more",
+    showLess: "Show less",
+    submit: "Submit",
+    success: "Success",
+    update: "Update",
+    unsavedChanges: "Unsaved Changes",
+    unsavedChangesSaveQuestion: "Do you want to save your changes?",
+    yes: "Yes"
+  },
+  de: {
+    all: "Alle",
+    back: "Zur\xFCck",
+    cancel: "Abbrechen",
+    change: "\xC4ndern",
+    clear: "L\xF6schen",
+    close: "Schlie\xDFen",
+    confirm: "Best\xE4tigen",
+    decline: "Ablehnen",
+    delete: "L\xF6schen",
+    discard: "Verwerfen",
+    discardChanges: "\xC4nderungen Verwerfen",
+    done: "Fertig",
+    edit: "Bearbeiten",
+    enterText: "Text hier eingeben",
+    error: "Fehler",
+    exit: "Beenden",
+    fieldRequiredError: "Dieses Feld ist erforderlich.",
+    invalidEmailError: "Bitte geben Sie eine g\xFCltige E-Mail-Adresse ein.",
+    less: "Weniger",
+    loading: "L\xE4dt",
+    maxLengthError: "Maximale L\xE4nge \xFCberschritten.",
+    minLengthError: "Mindestl\xE4nge nicht erreicht.",
+    more: "Mehr",
+    next: "Weiter",
+    no: "Nein",
+    none: "Nichts",
+    of: "von",
+    optional: "Optional",
+    pleaseWait: "Bitte warten...",
+    previous: "Vorherige",
+    remove: "Entfernen",
+    required: "Erforderlich",
+    reset: "Zur\xFCcksetzen",
+    save: "Speichern",
+    search: "Suche",
+    select: "Select",
+    selectOption: "Option ausw\xE4hlen",
+    show: "Anzeigen",
+    showMore: "Mehr anzeigen",
+    showLess: "Weniger anzeigen",
+    submit: "Abschicken",
+    success: "Erfolg",
+    update: "Update",
+    unsavedChanges: "Ungespeicherte \xC4nderungen",
+    unsavedChangesSaveQuestion: "M\xF6chtest du die \xC4nderungen speichern?",
+    yes: "Ja"
+  }
+};
+
 // src/components/layout-and-navigation/SearchableList.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultSearchableListTranslation = {
   en: {
-    search: "Search",
     nothingFound: "Nothing found"
   },
   de: {
-    search: "Suche",
     nothingFound: "Nichts gefunden"
   }
 };
@@ -459,7 +605,7 @@ var SearchableList = ({
   className,
   resultListClassName
 }) => {
-  const translation = useTranslation(defaultSearchableListTranslation, overwriteTranslation);
+  const translation = useTranslation([defaultSearchableListTranslation, formTranslation], overwriteTranslation);
   const { result, hasResult, search, setSearch } = useSearch({ list, initialSearch, searchMapping });
   return /* @__PURE__ */ jsxs3("div", { className: clsx4("col gap-y-2", className), children: [
     list.length > minimumItemsForSearch && /* @__PURE__ */ jsxs3("div", { className: "row justify-between gap-x-4 items-center", children: [
@@ -468,14 +614,14 @@ var SearchableList = ({
         {
           value: search,
           onChangeText: setSearch,
-          placeholder: translation.search,
+          placeholder: translation("search"),
           autoFocus,
           className: "w-full"
         }
       ),
       /* @__PURE__ */ jsx5(IconButton, { color: "neutral", disabled: search.length === 0, children: /* @__PURE__ */ jsx5(Search, { className: "w-full h-full" }) })
     ] }),
-    hasResult ? /* @__PURE__ */ jsx5("div", { className: clsx4("col gap-y-1", resultListClassName), children: result.map(itemMapper) }) : /* @__PURE__ */ jsx5("div", { className: "row text-description py-2 px-2", children: translation.nothingFound })
+    hasResult ? /* @__PURE__ */ jsx5("div", { className: clsx4("col gap-y-1", resultListClassName), children: result.map(itemMapper) }) : /* @__PURE__ */ jsx5("div", { className: "row text-description py-2 px-2", children: translation("nothingFound") })
   ] });
 };
 
@@ -610,14 +756,10 @@ var useOutsideClick = (refs, handler) => {
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultMultiSelectTranslation = {
   en: {
-    select: "Select",
-    search: "Search",
-    selected: "selected"
+    selected: `{{amount}} selected`
   },
   de: {
-    select: "Ausw\xE4hlen",
-    search: "Suche",
-    selected: "ausgew\xE4hlt"
+    selected: `{{amount}} ausgew\xE4hlt`
   }
 };
 var MultiSelect = ({
@@ -632,7 +774,7 @@ var MultiSelect = ({
   useChipDisplay = false,
   className = ""
 }) => {
-  const translation = useTranslation(defaultMultiSelectTranslation, overwriteTranslation);
+  const translation = useTranslation([formTranslation, defaultMultiSelectTranslation], overwriteTranslation);
   const triggerRef = useRef2(null);
   const menuRef = useRef2(null);
   const [isOpen, setIsOpen] = useState6(false);
@@ -665,8 +807,8 @@ var MultiSelect = ({
           onClick: () => setIsOpen(!isOpen),
           disabled: isDisabled,
           children: [
-            !isShowingHint && /* @__PURE__ */ jsx8("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? (useChipDisplay && selectedItems ? /* @__PURE__ */ jsx8(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) : `${selectedItems.length} ${translation.selected}`) }),
-            isShowingHint && /* @__PURE__ */ jsx8("span", { className: "textstyle-description", children: hintText ?? translation.select }),
+            !isShowingHint && /* @__PURE__ */ jsx8("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? (useChipDisplay && selectedItems ? /* @__PURE__ */ jsx8(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) : translation("selected", { replacements: { amount: selectedItems.length.toString() } })) }),
+            isShowingHint && /* @__PURE__ */ jsx8("span", { className: "textstyle-description", children: hintText ?? translation("select") }),
             isOpen ? /* @__PURE__ */ jsx8(ChevronUp, { size: 24, className: "min-w-6" }) : /* @__PURE__ */ jsx8(ChevronDown, { className: "min-w-6" })
           ]
         }
@@ -675,7 +817,7 @@ var MultiSelect = ({
         "div",
         {
           ref: menuRef,
-          className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-md max-h-[500px] overflow-y-auto p-2",
+          className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-lg max-h-[500px] overflow-y-auto p-2",
           children: [
             /* @__PURE__ */ jsx8(
               SearchableList,
@@ -716,7 +858,7 @@ var MultiSelect = ({
                       })));
                     },
                     disabled: options.every((value) => value.selected || value.disabled),
-                    children: "All"
+                    children: translation("all")
                   }
                 ),
                 /* @__PURE__ */ jsx8(
@@ -730,7 +872,7 @@ var MultiSelect = ({
                         selected: false
                       })));
                     },
-                    children: "None"
+                    children: translation("none")
                   }
                 )
               ] }),
@@ -747,14 +889,6 @@ var MultiSelect = ({
 import { AlertTriangle } from "lucide-react";
 import clsx8 from "clsx";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var defaultPropertyBaseTranslation = {
-  en: {
-    remove: "Remove"
-  },
-  de: {
-    remove: "Entfernen"
-  }
-};
 var PropertyBase = ({
   overwriteTranslation,
   name,
@@ -766,7 +900,7 @@ var PropertyBase = ({
   onRemove,
   className = ""
 }) => {
-  const translation = useTranslation(defaultPropertyBaseTranslation, overwriteTranslation);
+  const translation = useTranslation([formTranslation], overwriteTranslation);
   const requiredAndNoValue = softRequired && !hasValue;
   return /* @__PURE__ */ jsxs7("div", { className: clsx8("row gap-x-0 group", className), children: [
     /* @__PURE__ */ jsxs7(
@@ -799,7 +933,7 @@ var PropertyBase = ({
               color: "negative",
               className: clsx8("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
               disabled: !hasValue || readOnly,
-              children: translation.remove
+              children: translation("remove")
             }
           )
         ]
@@ -810,14 +944,6 @@ var PropertyBase = ({
 
 // src/components/properties/MultiSelectProperty.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var defaultMultiSelectPropertyTranslation = {
-  en: {
-    select: "Select"
-  },
-  de: {
-    select: "Ausw\xE4hlen"
-  }
-};
 var MultiSelectProperty = ({
   overwriteTranslation,
   options,
@@ -827,7 +953,7 @@ var MultiSelectProperty = ({
   onRemove,
   ...multiSelectProps
 }) => {
-  const translation = useTranslation(defaultMultiSelectPropertyTranslation, overwriteTranslation);
+  const translation = useTranslation([formTranslation], overwriteTranslation);
   const hasValue = options.some((value) => value.selected);
   return /* @__PURE__ */ jsx10(
     PropertyBase,
@@ -850,7 +976,7 @@ var MultiSelectProperty = ({
               options,
               isDisabled: readOnly,
               useChipDisplay: true,
-              hintText: `${translation.select}...`
+              hintText: `${translation("select")}...`
             }
           )
         }