@trackunit/react-form-components 1.23.5 → 1.24.6

package/index.cjs.js

@@ -1338,13 +1338,13 @@ Checkbox.displayName = "Checkbox";
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused = false, disabled = false, "data-testid": dataTestId, optionLabelDescription, optionPrefix, fieldSize = "medium", }) => {
+const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused = false, disabled = false, "data-testid": dataTestId, optionLabelDescription, optionPrefix, optionContent, fieldSize = "medium", }) => {
     return (jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
             ? react.cloneElement(optionPrefix, {
                 className: "mr-1 flex items-center",
                 size: "medium",
             })
-            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: fieldSize === "large" ? "medium" : "small" }) : undefined }));
+            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: fieldSize === "large" ? "medium" : "small" }) : undefined, children: optionContent }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -1352,7 +1352,7 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {ReactElement} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
+const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, optionContent, fieldSize, }) => {
     return (jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
             e.stopPropagation();
             onClick?.(e);
@@ -1361,7 +1361,7 @@ const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid":
                 className: "mr-1 flex items-center",
                 size: "medium",
             })
-            : optionPrefix, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, className: "gap-x-0", disabled: disabled, onChange: () => null, readOnly: false }), selected: selected }));
+            : optionPrefix, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, className: "gap-x-0", disabled: disabled, onChange: () => null, readOnly: false }), selected: selected, children: optionContent }));
 };
 
 /**
@@ -1767,10 +1767,16 @@ const getVisibleCountFromGeometries = ({ geometries, availableWidth, containerX,
  */
 const useCustomComponents = ({ disabled, readOnly, "data-testid": dataTestId, prefix, hasError, fieldSize = "medium", getOptionLabelDescription, getOptionPrefix, className, isMulti, //prefer using the component prop (ala. selectValueContainer.isMulti) inside of customComponents instead of this one.
 autoComplete, // see https://github.com/JedWatson/react-select/issues/758
- }) => {
+formatOptionLabel, }) => {
     const [t] = useTranslation();
     const { setValueContainerRef, setCounterRef, setFakeCounterRef, setGeometryRef, setMenuRef, getVisibleCount, getTotalCount, getCounterWidth, getIsComplete, } = useMultiValueOverflow({ skip: !isMulti });
     const interactable = react.useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
+    // Stabilize `formatOptionLabel` so callers can pass it inline without recreating
+    // `customComponents` (which would cause react-select to remount its input and
+    // drop focus/value after every keystroke). The Option override below reads
+    // from this ref, so the latest function is always used.
+    const formatOptionLabelRef = react.useRef(formatOptionLabel);
+    formatOptionLabelRef.current = formatOptionLabel;
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     // Component functions stay stable (reading from refs), so react-select won't lose focus
     const customComponents = react.useMemo(() => {
@@ -1897,10 +1903,16 @@ autoComplete, // see https://github.com/JedWatson/react-select/issues/758
                     selected: selectOption.isSelected,
                     onClick: selectOption.innerProps.onClick,
                 };
+                const optionDisabled = Boolean(disabled) || selectOption.isDisabled;
+                const optionContent = formatOptionLabelRef.current?.(selectOption.data, {
+                    context: "menu",
+                    inputValue: selectOption.selectProps.inputValue,
+                    selectValue: selectOption.getValue(),
+                }) ?? undefined;
                 return (jsxRuntime.jsx(ReactSelect.components.Option, { ...selectOption, innerProps: {
                         ...selectOption.innerProps,
                         role: "option",
-                    }, children: selectOption.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled) || selectOption.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) }));
+                    }, children: selectOption.isMulti ? (jsxRuntime.jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) : (jsxRuntime.jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: optionDisabled, fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) }));
             },
         };
     }, [
@@ -1995,6 +2007,7 @@ const useSelect = (props) => {
         isMulti: isMulti ?? false,
         className: stableRestProps.className,
         autoComplete: stableRestProps.autoComplete,
+        formatOptionLabel,
     });
     const interactable = react.useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
     // Determine the portal target for the menu

package/index.esm.js

@@ -1337,13 +1337,13 @@ Checkbox.displayName = "Checkbox";
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused = false, disabled = false, "data-testid": dataTestId, optionLabelDescription, optionPrefix, fieldSize = "medium", }) => {
+const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused = false, disabled = false, "data-testid": dataTestId, optionLabelDescription, optionPrefix, optionContent, fieldSize = "medium", }) => {
     return (jsx(MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: isValidElement(optionPrefix)
             ? cloneElement(optionPrefix, {
                 className: "mr-1 flex items-center",
                 size: "medium",
             })
-            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { color: "primary", name: "Check", size: fieldSize === "large" ? "medium" : "small" }) : undefined }));
+            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { color: "primary", name: "Check", size: fieldSize === "large" ? "medium" : "small" }) : undefined, children: optionContent }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -1351,7 +1351,7 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {ReactElement} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }) => {
+const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, optionContent, fieldSize, }) => {
     return (jsx(MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
             e.stopPropagation();
             onClick?.(e);
@@ -1360,7 +1360,7 @@ const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid":
                 className: "mr-1 flex items-center",
                 size: "medium",
             })
-            : optionPrefix, prefix: jsx(Checkbox, { checked: selected, className: "gap-x-0", disabled: disabled, onChange: () => null, readOnly: false }), selected: selected }));
+            : optionPrefix, prefix: jsx(Checkbox, { checked: selected, className: "gap-x-0", disabled: disabled, onChange: () => null, readOnly: false }), selected: selected, children: optionContent }));
 };
 
 /**
@@ -1766,10 +1766,16 @@ const getVisibleCountFromGeometries = ({ geometries, availableWidth, containerX,
  */
 const useCustomComponents = ({ disabled, readOnly, "data-testid": dataTestId, prefix, hasError, fieldSize = "medium", getOptionLabelDescription, getOptionPrefix, className, isMulti, //prefer using the component prop (ala. selectValueContainer.isMulti) inside of customComponents instead of this one.
 autoComplete, // see https://github.com/JedWatson/react-select/issues/758
- }) => {
+formatOptionLabel, }) => {
     const [t] = useTranslation();
     const { setValueContainerRef, setCounterRef, setFakeCounterRef, setGeometryRef, setMenuRef, getVisibleCount, getTotalCount, getCounterWidth, getIsComplete, } = useMultiValueOverflow({ skip: !isMulti });
     const interactable = useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
+    // Stabilize `formatOptionLabel` so callers can pass it inline without recreating
+    // `customComponents` (which would cause react-select to remount its input and
+    // drop focus/value after every keystroke). The Option override below reads
+    // from this ref, so the latest function is always used.
+    const formatOptionLabelRef = useRef(formatOptionLabel);
+    formatOptionLabelRef.current = formatOptionLabel;
     // perhaps it should not be wrap in memo (causing some issues with opening and closing on mobiles)
     // Component functions stay stable (reading from refs), so react-select won't lose focus
     const customComponents = useMemo(() => {
@@ -1896,10 +1902,16 @@ autoComplete, // see https://github.com/JedWatson/react-select/issues/758
                     selected: selectOption.isSelected,
                     onClick: selectOption.innerProps.onClick,
                 };
+                const optionDisabled = Boolean(disabled) || selectOption.isDisabled;
+                const optionContent = formatOptionLabelRef.current?.(selectOption.data, {
+                    context: "menu",
+                    inputValue: selectOption.selectProps.inputValue,
+                    selectValue: selectOption.getValue(),
+                }) ?? undefined;
                 return (jsx(components.Option, { ...selectOption, innerProps: {
                         ...selectOption.innerProps,
                         role: "option",
-                    }, children: selectOption.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled) || selectOption.isDisabled, fieldSize: fieldSize, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) }));
+                    }, children: selectOption.isMulti ? (jsx(MultiSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: Boolean(disabled), fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) : (jsx(SingleSelectMenuItem, { ...componentProps, "data-testid": typeof selectOption.label === "string" ? selectOption.label : undefined, disabled: optionDisabled, fieldSize: fieldSize, optionContent: optionContent, optionLabelDescription: getOptionLabelDescription?.(selectOption.data), optionPrefix: getOptionPrefix?.(selectOption.data) })) }));
             },
         };
     }, [
@@ -1994,6 +2006,7 @@ const useSelect = (props) => {
         isMulti: isMulti ?? false,
         className: stableRestProps.className,
         autoComplete: stableRestProps.autoComplete,
+        formatOptionLabel,
     });
     const interactable = useMemo(() => !Boolean(disabled) && !Boolean(readOnly), [disabled, readOnly]);
     // Determine the portal target for the menu

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.23.5",
+  "version": "1.24.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,17 +9,17 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.11.121",
+    "@trackunit/date-and-time-utils": "1.12.1",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.11.118",
-    "@trackunit/react-components": "1.22.27",
-    "@trackunit/ui-icons": "1.11.114",
-    "@trackunit/shared-utils": "1.13.118",
-    "@trackunit/ui-design-tokens": "1.11.115",
-    "@trackunit/i18n-library-translation": "1.19.4",
+    "@trackunit/css-class-variance-utilities": "1.12.1",
+    "@trackunit/react-components": "1.23.2",
+    "@trackunit/ui-icons": "1.12.2",
+    "@trackunit/shared-utils": "1.14.1",
+    "@trackunit/ui-design-tokens": "1.12.1",
+    "@trackunit/i18n-library-translation": "1.20.3",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/BaseSelect/custom-components/SelectMenuItem/SelectMenuItem.d.ts

@@ -34,6 +34,11 @@ interface SelectMenuItemProps extends CommonProps {
      * This is typically used to render an icon.
      */
     optionPrefix?: ReactNode;
+    /**
+     * Rich content to render in place of the default label/description layout.
+     * This keeps the surrounding menu item chrome while allowing custom content.
+     */
+    optionContent?: ReactNode;
     /**
      * The size of the selected item
      */
@@ -52,12 +57,12 @@ export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, focused, disabled, "data-testid": dataTestId, optionLabelDescription, optionPrefix, fieldSize, }: SingleSelectMenuItemProps) => ReactElement;
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, focused, disabled, "data-testid": dataTestId, optionLabelDescription, optionPrefix, optionContent, fieldSize, }: SingleSelectMenuItemProps) => ReactElement;
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
  *
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {ReactElement} multi select menu item
  */
-export declare const MultiSelectMenuItem: ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, fieldSize, }: SelectMenuItemProps) => ReactElement;
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, optionContent, fieldSize, }: SelectMenuItemProps) => ReactElement;
 export {};

package/src/components/BaseSelect/useCustomComponents.d.ts

@@ -4,7 +4,7 @@
  */
 import { CommonProps } from "@trackunit/react-components";
 import { ReactNode } from "react";
-import { type SelectComponentsConfig, GroupBase } from "react-select";
+import { type FormatOptionLabelMeta, type SelectComponentsConfig, GroupBase } from "react-select";
 import { FormComponentSizes } from "../../types";
 import { LockedForReasons } from "../BaseInput/InputLockReasonTooltip";
 interface CustomComponentsProps<TOption> extends CommonProps {
@@ -19,6 +19,7 @@ interface CustomComponentsProps<TOption> extends CommonProps {
     getOptionPrefix?: (option: TOption) => ReactNode;
     isMulti: boolean;
     autoComplete?: "off" | "on" | "no";
+    formatOptionLabel?: (data: TOption, meta: FormatOptionLabelMeta<TOption>) => ReactNode;
 }
 /**
  * A hook to retrieve components override object.
@@ -30,5 +31,5 @@ interface CustomComponentsProps<TOption> extends CommonProps {
  * @param {CustomComponentsProps<TOption>} props - The custom components props
  * @returns {SelectComponentsConfig<TOption, TIsMulti, TGroup>} components object to override react-select default components
  */
-export declare const useCustomComponents: <TOption, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>({ disabled, readOnly, "data-testid": dataTestId, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, className, isMulti, autoComplete, }: CustomComponentsProps<TOption>) => SelectComponentsConfig<TOption, TIsMulti, TGroup>;
+export declare const useCustomComponents: <TOption, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>({ disabled, readOnly, "data-testid": dataTestId, prefix, hasError, fieldSize, getOptionLabelDescription, getOptionPrefix, className, isMulti, autoComplete, formatOptionLabel, }: CustomComponentsProps<TOption>) => SelectComponentsConfig<TOption, TIsMulti, TGroup>;
 export {};

package/translation.cjs.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Anwenden",
 	"dateField.actions.cancel": "Abbrechen",
 	"dateField.actions.clear": "Löschen",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Dateien per Drag & Drop hinzufügen",
 	"dropzone.label.default": "<clickable>Ordner durchsuchen</clickable> oder Dateien per Drag & Drop einfügen …",
 	"emailField.error.INVALID_EMAIL": "Bitte geben Sie eine gültige E-Mail-Adresse ein",

package/translation.cjs10.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Zastosuj",
 	"dateField.actions.cancel": "Anuluj",
 	"dateField.actions.clear": "Wyczyść",
+	"dateField.placeholder": "rrrr-mm-dd",
 	"dropzone.input.title": "Przeciągnij i upuść dane pliku",
 	"dropzone.label.default": "<clickable>Przeglądaj</clickable> lub przeciągnij pliki tutaj...",
 	"emailField.error.INVALID_EMAIL": "Wprowadź poprawny adres e-mail",

package/translation.cjs11.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Aplicar",
 	"dateField.actions.cancel": "Cancelar",
 	"dateField.actions.clear": "Apagar",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Arrastar-e-soltar entrada de ficheiro",
 	"dropzone.label.default": "<clickable>Procure</clickable> ou arraste os ficheiros aqui...",
 	"emailField.error.INVALID_EMAIL": "Introduza um endereço de e-mail válido",

package/translation.cjs12.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Применить",
 	"dateField.actions.cancel": "Отмена",
 	"dateField.actions.clear": "Очистить",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Перетаскивание ввода файла",
 	"dropzone.label.default": "<clickable>Просмотрите</clickable> или перетащите файлы сюда...",
 	"emailField.error.INVALID_EMAIL": "Введите действительный адрес эл. почты",

package/translation.cjs13.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Aplicare",
 	"dateField.actions.cancel": "Anulare",
 	"dateField.actions.clear": "Ștergere",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Intrare fișier drag-and-drop",
 	"dropzone.label.default": "<clickable>Răsfoiți</clickable> sau trageți fișiere aici...",
 	"emailField.error.INVALID_EMAIL": "Vă rugăm să introduceți o adresă de e-mail valabilă",

package/translation.cjs14.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Aplicar",
 	"dateField.actions.cancel": "Cancelar",
 	"dateField.actions.clear": "Restablecer",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Entrada Arrastrar y soltar archivo",
 	"dropzone.label.default": "<clickable>Explore</clickable> o arrastre archivos aquí...",
 	"emailField.error.INVALID_EMAIL": "Introduzca una dirección de correo electrónico válida",

package/translation.cjs15.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Tillämpa",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Rensa",
+	"dateField.placeholder": "åååå-mm-dd",
 	"dropzone.input.title": "Dra och släpp fil",
 	"dropzone.label.default": "<clickable>Bläddra</clickable> bland filerna eller dra dem hit...",
 	"emailField.error.INVALID_EMAIL": "Ange en giltig e-postadress",

package/translation.cjs16.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "適用",
 	"dateField.actions.cancel": "キャンセル",
 	"dateField.actions.clear": "クリア",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "ドラッグ＆ドロップによるファイル入力",
 	"dropzone.label.default": "<clickable>ファイルを選択</clickable>またはここにファイルをドラッグ",
 	"emailField.error.INVALID_EMAIL": "有効なメールアドレスを入力してください",

package/translation.cjs17.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "นำไปใช้",
 	"dateField.actions.cancel": "ยกเลิก",
 	"dateField.actions.clear": "ล้าง",
+	"dateField.placeholder": "วว-ดด-ปปปป",
 	"dropzone.input.title": "ลากและวางอินพุตไฟล์",
 	"dropzone.label.default": "<clickable>เรียกดู</clickable> หรือลากไฟล์มาที่นี่...",
 	"emailField.error.INVALID_EMAIL": "โปรดป้อนที่อยู่อีเมลที่ถูกต้อง",

package/translation.cjs2.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Anvend",
 	"dateField.actions.cancel": "Annuller",
 	"dateField.actions.clear": "Ryd",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Filinput via drag-and-drop",
 	"dropzone.label.default": "<clickable>Gennemse</clickable> eller træk filer her...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.cjs3.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Použít",
 	"dateField.actions.cancel": "Zrušit",
 	"dateField.actions.clear": "Vymazat",
+	"dateField.placeholder": "rrrr-mm-dd",
 	"dropzone.input.title": "Přetažení vstupu do souboru",
 	"dropzone.label.default": "<clickable>Procházejte</clickable> nebo přetáhněte soubory zde...",
 	"emailField.error.INVALID_EMAIL": "Zadejte platnou e-mailovou adresu",

package/translation.cjs4.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Toepassen",
 	"dateField.actions.cancel": "Annuleren",
 	"dateField.actions.clear": "Wissen",
+	"dateField.placeholder": "dd-mm-yyyy",
 	"dropzone.input.title": "Drag-en-drop bestandsinvoer",
 	"dropzone.label.default": "<clickable>Bladeren</clickable> of sleep bestanden hier naartoe...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.cjs5.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Appliquer",
 	"dateField.actions.cancel": "Annuler",
 	"dateField.actions.clear": "Effacer",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Ajout de fichiers par glisser-déposer",
 	"dropzone.label.default": "<clickable>Parcourir</clickable> ou faire glisser les fichiers ici...",
 	"emailField.error.INVALID_EMAIL": "Veuillez saisir une adresse e-mail valide",

package/translation.cjs6.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Käytä",
 	"dateField.actions.cancel": "Peruuta",
 	"dateField.actions.clear": "Tyhjennä",
+	"dateField.placeholder": "vvvv-kk-pp",
 	"dropzone.input.title": "Vedä ja pudota tiedostosyöte",
 	"dropzone.label.default": "<clickable>Selaa</clickable> tai vedä tiedostoja täältä...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.cjs7.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Alkalmaz",
 	"dateField.actions.cancel": "Mégse",
 	"dateField.actions.clear": "Törlés",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Húzza ide a fájl(oka)t",
 	"dropzone.label.default": "<clickable>Keresse meg</clickable> vagy húza ide a fájlokat…",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.cjs8.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Applica",
 	"dateField.actions.cancel": "Annulla",
 	"dateField.actions.clear": "Cancella",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Inserimento di file tramite Trascina e rilascia",
 	"dropzone.label.default": "<clickable>Sfoglia</clickable> o trascina i file qui...",
 	"emailField.error.INVALID_EMAIL": "Inserisci un indirizzo email valido",

package/translation.cjs9.js

@@ -9,6 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Bruk",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Tøm",
+	"dateField.placeholder": "åååå-mm-dd",
 	"dropzone.input.title": "Dra og slipp for å legge inn fil",
 	"dropzone.label.default": "<clickable>Bla gjennom</clickable> eller dra filer hit...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.esm.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Anwenden",
 	"dateField.actions.cancel": "Abbrechen",
 	"dateField.actions.clear": "Löschen",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Dateien per Drag & Drop hinzufügen",
 	"dropzone.label.default": "<clickable>Ordner durchsuchen</clickable> oder Dateien per Drag & Drop einfügen …",
 	"emailField.error.INVALID_EMAIL": "Bitte geben Sie eine gültige E-Mail-Adresse ein",

package/translation.esm10.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Zastosuj",
 	"dateField.actions.cancel": "Anuluj",
 	"dateField.actions.clear": "Wyczyść",
+	"dateField.placeholder": "rrrr-mm-dd",
 	"dropzone.input.title": "Przeciągnij i upuść dane pliku",
 	"dropzone.label.default": "<clickable>Przeglądaj</clickable> lub przeciągnij pliki tutaj...",
 	"emailField.error.INVALID_EMAIL": "Wprowadź poprawny adres e-mail",

package/translation.esm11.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Aplicar",
 	"dateField.actions.cancel": "Cancelar",
 	"dateField.actions.clear": "Apagar",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Arrastar-e-soltar entrada de ficheiro",
 	"dropzone.label.default": "<clickable>Procure</clickable> ou arraste os ficheiros aqui...",
 	"emailField.error.INVALID_EMAIL": "Introduza um endereço de e-mail válido",

package/translation.esm12.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Применить",
 	"dateField.actions.cancel": "Отмена",
 	"dateField.actions.clear": "Очистить",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Перетаскивание ввода файла",
 	"dropzone.label.default": "<clickable>Просмотрите</clickable> или перетащите файлы сюда...",
 	"emailField.error.INVALID_EMAIL": "Введите действительный адрес эл. почты",

package/translation.esm13.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Aplicare",
 	"dateField.actions.cancel": "Anulare",
 	"dateField.actions.clear": "Ștergere",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Intrare fișier drag-and-drop",
 	"dropzone.label.default": "<clickable>Răsfoiți</clickable> sau trageți fișiere aici...",
 	"emailField.error.INVALID_EMAIL": "Vă rugăm să introduceți o adresă de e-mail valabilă",

package/translation.esm14.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Aplicar",
 	"dateField.actions.cancel": "Cancelar",
 	"dateField.actions.clear": "Restablecer",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Entrada Arrastrar y soltar archivo",
 	"dropzone.label.default": "<clickable>Explore</clickable> o arrastre archivos aquí...",
 	"emailField.error.INVALID_EMAIL": "Introduzca una dirección de correo electrónico válida",

package/translation.esm15.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Tillämpa",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Rensa",
+	"dateField.placeholder": "åååå-mm-dd",
 	"dropzone.input.title": "Dra och släpp fil",
 	"dropzone.label.default": "<clickable>Bläddra</clickable> bland filerna eller dra dem hit...",
 	"emailField.error.INVALID_EMAIL": "Ange en giltig e-postadress",

package/translation.esm16.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "適用",
 	"dateField.actions.cancel": "キャンセル",
 	"dateField.actions.clear": "クリア",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "ドラッグ＆ドロップによるファイル入力",
 	"dropzone.label.default": "<clickable>ファイルを選択</clickable>またはここにファイルをドラッグ",
 	"emailField.error.INVALID_EMAIL": "有効なメールアドレスを入力してください",

package/translation.esm17.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "นำไปใช้",
 	"dateField.actions.cancel": "ยกเลิก",
 	"dateField.actions.clear": "ล้าง",
+	"dateField.placeholder": "วว-ดด-ปปปป",
 	"dropzone.input.title": "ลากและวางอินพุตไฟล์",
 	"dropzone.label.default": "<clickable>เรียกดู</clickable> หรือลากไฟล์มาที่นี่...",
 	"emailField.error.INVALID_EMAIL": "โปรดป้อนที่อยู่อีเมลที่ถูกต้อง",

package/translation.esm2.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Anvend",
 	"dateField.actions.cancel": "Annuller",
 	"dateField.actions.clear": "Ryd",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Filinput via drag-and-drop",
 	"dropzone.label.default": "<clickable>Gennemse</clickable> eller træk filer her...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.esm3.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Použít",
 	"dateField.actions.cancel": "Zrušit",
 	"dateField.actions.clear": "Vymazat",
+	"dateField.placeholder": "rrrr-mm-dd",
 	"dropzone.input.title": "Přetažení vstupu do souboru",
 	"dropzone.label.default": "<clickable>Procházejte</clickable> nebo přetáhněte soubory zde...",
 	"emailField.error.INVALID_EMAIL": "Zadejte platnou e-mailovou adresu",

package/translation.esm4.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Toepassen",
 	"dateField.actions.cancel": "Annuleren",
 	"dateField.actions.clear": "Wissen",
+	"dateField.placeholder": "dd-mm-yyyy",
 	"dropzone.input.title": "Drag-en-drop bestandsinvoer",
 	"dropzone.label.default": "<clickable>Bladeren</clickable> of sleep bestanden hier naartoe...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.esm5.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Appliquer",
 	"dateField.actions.cancel": "Annuler",
 	"dateField.actions.clear": "Effacer",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Ajout de fichiers par glisser-déposer",
 	"dropzone.label.default": "<clickable>Parcourir</clickable> ou faire glisser les fichiers ici...",
 	"emailField.error.INVALID_EMAIL": "Veuillez saisir une adresse e-mail valide",

package/translation.esm6.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Käytä",
 	"dateField.actions.cancel": "Peruuta",
 	"dateField.actions.clear": "Tyhjennä",
+	"dateField.placeholder": "vvvv-kk-pp",
 	"dropzone.input.title": "Vedä ja pudota tiedostosyöte",
 	"dropzone.label.default": "<clickable>Selaa</clickable> tai vedä tiedostoja täältä...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.esm7.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Alkalmaz",
 	"dateField.actions.cancel": "Mégse",
 	"dateField.actions.clear": "Törlés",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Húzza ide a fájl(oka)t",
 	"dropzone.label.default": "<clickable>Keresse meg</clickable> vagy húza ide a fájlokat…",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",

package/translation.esm8.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Applica",
 	"dateField.actions.cancel": "Annulla",
 	"dateField.actions.clear": "Cancella",
+	"dateField.placeholder": "yyyy-mm-dd",
 	"dropzone.input.title": "Inserimento di file tramite Trascina e rilascia",
 	"dropzone.label.default": "<clickable>Sfoglia</clickable> o trascina i file qui...",
 	"emailField.error.INVALID_EMAIL": "Inserisci un indirizzo email valido",

package/translation.esm9.js

@@ -7,6 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Bruk",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Tøm",
+	"dateField.placeholder": "åååå-mm-dd",
 	"dropzone.input.title": "Dra og slipp for å legge inn fil",
 	"dropzone.label.default": "<clickable>Bla gjennom</clickable> eller dra filer hit...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",