@trackunit/react-form-components 1.23.8 → 1.24.7

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.8",
+  "version": "1.24.7",
   "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.2",
     "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.29",
-    "@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.6",
+    "@trackunit/css-class-variance-utilities": "1.12.2",
+    "@trackunit/react-components": "1.23.3",
+    "@trackunit/ui-icons": "1.12.3",
+    "@trackunit/shared-utils": "1.14.2",
+    "@trackunit/ui-design-tokens": "1.12.2",
+    "@trackunit/i18n-library-translation": "1.20.4",
     "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.cjs10.js

@@ -9,7 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Zastosuj",
 	"dateField.actions.cancel": "Anuluj",
 	"dateField.actions.clear": "Wyczyść",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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.cjs15.js

@@ -9,7 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Tillämpa",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Rensa",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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.cjs17.js

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

package/translation.cjs3.js

@@ -9,7 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Použít",
 	"dateField.actions.cancel": "Zrušit",
 	"dateField.actions.clear": "Vymazat",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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,7 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Toepassen",
 	"dateField.actions.cancel": "Annuleren",
 	"dateField.actions.clear": "Wissen",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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.cjs6.js

@@ -9,7 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Käytä",
 	"dateField.actions.cancel": "Peruuta",
 	"dateField.actions.clear": "Tyhjennä",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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.cjs9.js

@@ -9,7 +9,7 @@ var translation = {
 	"dateField.actions.apply": "Bruk",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Tøm",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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.esm10.js

@@ -7,7 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Zastosuj",
 	"dateField.actions.cancel": "Anuluj",
 	"dateField.actions.clear": "Wyczyść",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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.esm15.js

@@ -7,7 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Tillämpa",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Rensa",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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.esm17.js

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

package/translation.esm3.js

@@ -7,7 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Použít",
 	"dateField.actions.cancel": "Zrušit",
 	"dateField.actions.clear": "Vymazat",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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,7 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Toepassen",
 	"dateField.actions.cancel": "Annuleren",
 	"dateField.actions.clear": "Wissen",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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.esm6.js

@@ -7,7 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Käytä",
 	"dateField.actions.cancel": "Peruuta",
 	"dateField.actions.clear": "Tyhjennä",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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.esm9.js

@@ -7,7 +7,7 @@ var translation = {
 	"dateField.actions.apply": "Bruk",
 	"dateField.actions.cancel": "Avbryt",
 	"dateField.actions.clear": "Tøm",
-	"dateField.placeholder": "yyyy-mm-dd",
+	"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",