payload-intl 1.2.2 → 1.2.3

package/dist/components/inputs/variables/pickers/{NumericVariablePicker.d.ts.map → NumericVariableEditor.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"NumericVariablePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/pickers/NumericVariablePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAe5D,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,aAAa,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,QAAQ,GACT,EAAE,0BAA0B,2CA8C5B"}
+{"version":3,"file":"NumericVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/pickers/NumericVariableEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAe5D,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,aAAa,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,QAAQ,GACT,EAAE,0BAA0B,2CA6C5B"}

package/dist/components/inputs/variables/pickers/{NumericVariablePicker.js → NumericVariableEditor.js}

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToggleGroup } from 'radix-ui';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
 import { useEffect, useRef, useState } from 'react';
 import { isNumberElement, isPluralElement } from '../../../../utils/guards';
 import { PluralVariableEditor } from '../editors/PluralVariableEditor';
-import styles from './NumericVariablePicker.module.css';
+import styles from './NumericVariableEditor.module.css';
 const NUMERIC_TYPES = [
     'number',
     'plural'
 ];
-export function NumericVariablePicker({ element, onUpdate }) {
+export function NumericVariableEditor({ element, onUpdate }) {
     const [type, setType] = useState(()=>{
         if (isNumberElement(element)) return 'number';
         if (isPluralElement(element)) return 'plural';
@@ -24,12 +25,17 @@ export function NumericVariablePicker({ element, onUpdate }) {
     }, []);
     return /*#__PURE__*/ _jsxs("div", {
         children: [
-            /*#__PURE__*/ _jsx(ToggleGroup.Root, {
+            /*#__PURE__*/ _jsx(ToggleGroup, {
                 className: styles.toggleGroup,
-                onValueChange: (value)=>setType(value),
-                type: "single",
-                value: type,
-                children: NUMERIC_TYPES.map((type)=>/*#__PURE__*/ _jsx(ToggleGroup.Item, {
+                onValueChange: (newValue)=>{
+                    if (newValue.length === 0) return;
+                    const next = newValue.find((v)=>v !== type);
+                    if (next) setType(next);
+                },
+                value: type ? [
+                    type
+                ] : [],
+                children: NUMERIC_TYPES.map((type)=>/*#__PURE__*/ _jsx(Toggle, {
                         className: styles.toggleItem,
                         value: type,
                         children: type
@@ -47,4 +53,4 @@ export function NumericVariablePicker({ element, onUpdate }) {
     });
 }
 
-//# sourceMappingURL=NumericVariablePicker.js.map
+//# sourceMappingURL=NumericVariableEditor.js.map

package/dist/components/inputs/variables/pickers/NumericVariableEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/variables/pickers/NumericVariableEditor.tsx"],"sourcesContent":["import { Toggle } from '@base-ui/react/toggle';\nimport { ToggleGroup } from '@base-ui/react/toggle-group';\nimport { useEffect, useRef, useState } from 'react';\nimport type { NumberElement, PluralElement } from '@/types';\n\nimport { isNumberElement, isPluralElement } from '@/utils/guards';\n\nimport { PluralVariableEditor } from '../editors/PluralVariableEditor';\nimport styles from './NumericVariableEditor.module.css';\n\nconst NUMERIC_TYPES = [\n  'number',\n  'plural',\n  // \"selectordinal\"\n] as const;\n\ntype NumericType = (typeof NUMERIC_TYPES)[number];\n\nexport interface NumericVariableEditorProps {\n  element: NumberElement | PluralElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function NumericVariableEditor({\n  element,\n  onUpdate,\n}: NumericVariableEditorProps) {\n  const [type, setType] = useState<NumericType | undefined>(() => {\n    if (isNumberElement(element)) return 'number';\n    if (isPluralElement(element)) return 'plural';\n    return undefined;\n  });\n  const getValueRef = useRef<{ getValue: () => string }>(null);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent\n  useEffect(() => {\n    return () => {\n      if (!getValueRef.current) return;\n      onUpdate(getValueRef.current.getValue());\n    };\n  }, []);\n\n  return (\n    <div>\n      <ToggleGroup\n        className={styles.toggleGroup}\n        onValueChange={(newValue) => {\n          if (newValue.length === 0) return;\n          const next = newValue.find((v) => v !== type);\n          if (next) setType(next as NumericType);\n        }}\n        value={type ? [type] : []}\n      >\n        {NUMERIC_TYPES.map((type) => (\n          <Toggle className={styles.toggleItem} key={type} value={type}>\n            {type}\n          </Toggle>\n        ))}\n      </ToggleGroup>\n\n      <div className={styles.content}>\n        {type === 'plural' && (\n          <PluralVariableEditor\n            element={isPluralElement(element) ? element : undefined}\n            ref={getValueRef}\n            variableName={element.value}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["Toggle","ToggleGroup","useEffect","useRef","useState","isNumberElement","isPluralElement","PluralVariableEditor","styles","NUMERIC_TYPES","NumericVariableEditor","element","onUpdate","type","setType","undefined","getValueRef","current","getValue","div","className","toggleGroup","onValueChange","newValue","length","next","find","v","value","map","toggleItem","content","ref","variableName"],"mappings":";AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,eAAe,EAAEC,eAAe,QAAQ,iBAAiB;AAElE,SAASC,oBAAoB,QAAQ,kCAAkC;AACvE,OAAOC,YAAY,qCAAqC;AAExD,MAAMC,gBAAgB;IACpB;IACA;CAED;AASD,OAAO,SAASC,sBAAsB,EACpCC,OAAO,EACPC,QAAQ,EACmB;IAC3B,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAAkC;QACxD,IAAIC,gBAAgBM,UAAU,OAAO;QACrC,IAAIL,gBAAgBK,UAAU,OAAO;QACrC,OAAOI;IACT;IACA,MAAMC,cAAcb,OAAmC;IAEvD,0EAA0E;IAC1ED,UAAU;QACR,OAAO;YACL,IAAI,CAACc,YAAYC,OAAO,EAAE;YAC1BL,SAASI,YAAYC,OAAO,CAACC,QAAQ;QACvC;IACF,GAAG,EAAE;IAEL,qBACE,MAACC;;0BACC,KAAClB;gBACCmB,WAAWZ,OAAOa,WAAW;gBAC7BC,eAAe,CAACC;oBACd,IAAIA,SAASC,MAAM,KAAK,GAAG;oBAC3B,MAAMC,OAAOF,SAASG,IAAI,CAAC,CAACC,IAAMA,MAAMd;oBACxC,IAAIY,MAAMX,QAAQW;gBACpB;gBACAG,OAAOf,OAAO;oBAACA;iBAAK,GAAG,EAAE;0BAExBJ,cAAcoB,GAAG,CAAC,CAAChB,qBAClB,KAACb;wBAAOoB,WAAWZ,OAAOsB,UAAU;wBAAaF,OAAOf;kCACrDA;uBADwCA;;0BAM/C,KAACM;gBAAIC,WAAWZ,OAAOuB,OAAO;0BAC3BlB,SAAS,0BACR,KAACN;oBACCI,SAASL,gBAAgBK,WAAWA,UAAUI;oBAC9CiB,KAAKhB;oBACLiB,cAActB,QAAQiB,KAAK;;;;;AAMvC"}

package/dist/components/inputs/variables/pickers/{NumericVariablePicker.module.css → NumericVariableEditor.module.css}

@@ -8,16 +8,16 @@
   border: none;
 }
 
-.toggleItem[data-state="off"] {
+.toggleItem:not([data-pressed]) {
   cursor: pointer;
   opacity: 0.5;
 }
 
-.toggleItem[data-state="off"]:hover {
+.toggleItem:not([data-pressed]):hover {
   opacity: 1;
 }
 
-.toggleItem[data-state="on"] {
+.toggleItem[data-pressed] {
   background-color: var(--theme-elevation-800);
   color: var(--theme-elevation-0);
 }

package/dist/components/inputs/variables/pickers/TemporalVariablePicker.d.ts

@@ -0,0 +1,7 @@
+import type { DateElement, TimeElement } from '../../../../types';
+export interface TemporalVariablePickerProps {
+    element: DateElement | TimeElement;
+    onUpdate: (value: string) => void;
+}
+export declare function TemporalVariablePicker({ element, onUpdate, }: TemporalVariablePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TemporalVariablePicker.d.ts.map

package/dist/components/inputs/variables/pickers/TemporalVariablePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemporalVariablePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/pickers/TemporalVariablePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWxD,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,WAAW,GAAG,WAAW,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,QAAQ,GACT,EAAE,2BAA2B,2CAsD7B"}

package/dist/components/inputs/variables/pickers/TemporalVariablePicker.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { useEffect, useRef, useState } from 'react';
+import { isDateElement, isTimeElement } from '../../../../utils/guards';
+import { TemporalVariableEditor } from '../editors/TemporalVariableEditor';
+import styles from './TemporalVariablePicker.module.css';
+const TEMPORAL_TYPES = [
+    'date',
+    'time'
+];
+export function TemporalVariablePicker({ element, onUpdate }) {
+    const [type, setType] = useState(()=>{
+        if (isDateElement(element)) return 'date';
+        if (isTimeElement(element)) return 'time';
+        return undefined;
+    });
+    const getValueRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent
+    useEffect(()=>{
+        return ()=>{
+            if (!getValueRef.current) return;
+            onUpdate(getValueRef.current.getValue());
+        };
+    }, []);
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            /*#__PURE__*/ _jsx(ToggleGroup, {
+                className: styles.toggleGroup,
+                onValueChange: (newValue)=>{
+                    if (newValue.length === 0) return;
+                    const next = newValue.find((v)=>v !== type);
+                    if (next) setType(next);
+                },
+                value: type ? [
+                    type
+                ] : [],
+                children: TEMPORAL_TYPES.map((type)=>/*#__PURE__*/ _jsx(Toggle, {
+                        className: styles.toggleItem,
+                        value: type,
+                        children: type
+                    }, type))
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: styles.content,
+                children: type && /*#__PURE__*/ _jsx(TemporalVariableEditor, {
+                    element: type === 'date' ? isDateElement(element) ? element : undefined : isTimeElement(element) ? element : undefined,
+                    name: element.value,
+                    ref: getValueRef,
+                    type: type
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TemporalVariablePicker.js.map

package/dist/components/inputs/variables/pickers/TemporalVariablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/variables/pickers/TemporalVariablePicker.tsx"],"sourcesContent":["import { Toggle } from '@base-ui/react/toggle';\nimport { ToggleGroup } from '@base-ui/react/toggle-group';\nimport { useEffect, useRef, useState } from 'react';\nimport type { DateElement, TimeElement } from '@/types';\n\nimport { isDateElement, isTimeElement } from '@/utils/guards';\n\nimport { TemporalVariableEditor } from '../editors/TemporalVariableEditor';\nimport styles from './TemporalVariablePicker.module.css';\n\nconst TEMPORAL_TYPES = ['date', 'time'] as const;\n\ntype TemporalType = (typeof TEMPORAL_TYPES)[number];\n\nexport interface TemporalVariablePickerProps {\n  element: DateElement | TimeElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TemporalVariablePicker({\n  element,\n  onUpdate,\n}: TemporalVariablePickerProps) {\n  const [type, setType] = useState<TemporalType | undefined>(() => {\n    if (isDateElement(element)) return 'date';\n    if (isTimeElement(element)) return 'time';\n    return undefined;\n  });\n  const getValueRef = useRef<{ getValue: () => string }>(null);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent\n  useEffect(() => {\n    return () => {\n      if (!getValueRef.current) return;\n      onUpdate(getValueRef.current.getValue());\n    };\n  }, []);\n\n  return (\n    <div>\n      <ToggleGroup\n        className={styles.toggleGroup}\n        onValueChange={(newValue) => {\n          if (newValue.length === 0) return;\n          const next = newValue.find((v) => v !== type);\n          if (next) setType(next as TemporalType);\n        }}\n        value={type ? [type] : []}\n      >\n        {TEMPORAL_TYPES.map((type) => (\n          <Toggle className={styles.toggleItem} key={type} value={type}>\n            {type}\n          </Toggle>\n        ))}\n      </ToggleGroup>\n\n      <div className={styles.content}>\n        {type && (\n          <TemporalVariableEditor\n            element={\n              type === 'date'\n                ? isDateElement(element)\n                  ? element\n                  : undefined\n                : isTimeElement(element)\n                  ? element\n                  : undefined\n            }\n            name={element.value}\n            ref={getValueRef}\n            type={type}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["Toggle","ToggleGroup","useEffect","useRef","useState","isDateElement","isTimeElement","TemporalVariableEditor","styles","TEMPORAL_TYPES","TemporalVariablePicker","element","onUpdate","type","setType","undefined","getValueRef","current","getValue","div","className","toggleGroup","onValueChange","newValue","length","next","find","v","value","map","toggleItem","content","name","ref"],"mappings":";AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,aAAa,EAAEC,aAAa,QAAQ,iBAAiB;AAE9D,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IAAC;IAAQ;CAAO;AASvC,OAAO,SAASC,uBAAuB,EACrCC,OAAO,EACPC,QAAQ,EACoB;IAC5B,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAAmC;QACzD,IAAIC,cAAcM,UAAU,OAAO;QACnC,IAAIL,cAAcK,UAAU,OAAO;QACnC,OAAOI;IACT;IACA,MAAMC,cAAcb,OAAmC;IAEvD,0EAA0E;IAC1ED,UAAU;QACR,OAAO;YACL,IAAI,CAACc,YAAYC,OAAO,EAAE;YAC1BL,SAASI,YAAYC,OAAO,CAACC,QAAQ;QACvC;IACF,GAAG,EAAE;IAEL,qBACE,MAACC;;0BACC,KAAClB;gBACCmB,WAAWZ,OAAOa,WAAW;gBAC7BC,eAAe,CAACC;oBACd,IAAIA,SAASC,MAAM,KAAK,GAAG;oBAC3B,MAAMC,OAAOF,SAASG,IAAI,CAAC,CAACC,IAAMA,MAAMd;oBACxC,IAAIY,MAAMX,QAAQW;gBACpB;gBACAG,OAAOf,OAAO;oBAACA;iBAAK,GAAG,EAAE;0BAExBJ,eAAeoB,GAAG,CAAC,CAAChB,qBACnB,KAACb;wBAAOoB,WAAWZ,OAAOsB,UAAU;wBAAaF,OAAOf;kCACrDA;uBADwCA;;0BAM/C,KAACM;gBAAIC,WAAWZ,OAAOuB,OAAO;0BAC3BlB,sBACC,KAACN;oBACCI,SACEE,SAAS,SACLR,cAAcM,WACZA,UACAI,YACFT,cAAcK,WACZA,UACAI;oBAERiB,MAAMrB,QAAQiB,KAAK;oBACnBK,KAAKjB;oBACLH,MAAMA;;;;;AAMlB"}

package/dist/components/inputs/variables/pickers/{TemporalElementEditor.module.css → TemporalVariablePicker.module.css}

@@ -8,16 +8,16 @@
   border: none;
 }
 
-.toggleItem[data-state="off"] {
+.toggleItem:not([data-pressed]) {
   cursor: pointer;
   opacity: 0.5;
 }
 
-.toggleItem[data-state="off"]:hover {
+.toggleItem:not([data-pressed]):hover {
   opacity: 1;
 }
 
-.toggleItem[data-state="on"] {
+.toggleItem[data-pressed] {
   background-color: var(--theme-elevation-800);
   color: var(--theme-elevation-0);
 }

package/dist/components/layout/GroupStatusDot.d.ts

@@ -0,0 +1,6 @@
+interface GroupStatusDotProps {
+    path: string;
+}
+export declare function GroupStatusDot({ path }: GroupStatusDotProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GroupStatusDot.d.ts.map

package/dist/components/layout/GroupStatusDot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupStatusDot.d.ts","sourceRoot":"","sources":["../../../src/components/layout/GroupStatusDot.tsx"],"names":[],"mappings":"AAaA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE,mBAAmB,2CAK3D"}

package/dist/components/layout/GroupStatusDot.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWatch } from 'react-hook-form';
+import { useMessagesForm } from '../../components/MessagesFormProvider';
+import { StatusDot } from './StatusDot';
+function isFullyTranslated(values) {
+    if (typeof values === 'string') return values.length > 0;
+    if (values && typeof values === 'object') {
+        return Object.values(values).every(isFullyTranslated);
+    }
+    return false;
+}
+export function GroupStatusDot({ path }) {
+    const { control, activeLocale } = useMessagesForm();
+    const value = useWatch({
+        control,
+        name: `${activeLocale}.${path}`
+    });
+    const status = isFullyTranslated(value) ? 'translated' : 'missing';
+    return /*#__PURE__*/ _jsx(StatusDot, {
+        status: status
+    });
+}
+
+//# sourceMappingURL=GroupStatusDot.js.map

package/dist/components/layout/GroupStatusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/GroupStatusDot.tsx"],"sourcesContent":["import { useWatch } from 'react-hook-form';\nimport { useMessagesForm } from '@/components/MessagesFormProvider';\n\nimport { StatusDot } from './StatusDot';\n\nfunction isFullyTranslated(values: unknown): boolean {\n  if (typeof values === 'string') return values.length > 0;\n  if (values && typeof values === 'object') {\n    return Object.values(values).every(isFullyTranslated);\n  }\n  return false;\n}\n\ninterface GroupStatusDotProps {\n  path: string;\n}\n\nexport function GroupStatusDot({ path }: GroupStatusDotProps) {\n  const { control, activeLocale } = useMessagesForm();\n  const value = useWatch({ control, name: `${activeLocale}.${path}` as never });\n  const status = isFullyTranslated(value) ? 'translated' : 'missing';\n  return <StatusDot status={status} />;\n}\n"],"names":["useWatch","useMessagesForm","StatusDot","isFullyTranslated","values","length","Object","every","GroupStatusDot","path","control","activeLocale","value","name","status"],"mappings":";AAAA,SAASA,QAAQ,QAAQ,kBAAkB;AAC3C,SAASC,eAAe,QAAQ,oCAAoC;AAEpE,SAASC,SAAS,QAAQ,cAAc;AAExC,SAASC,kBAAkBC,MAAe;IACxC,IAAI,OAAOA,WAAW,UAAU,OAAOA,OAAOC,MAAM,GAAG;IACvD,IAAID,UAAU,OAAOA,WAAW,UAAU;QACxC,OAAOE,OAAOF,MAAM,CAACA,QAAQG,KAAK,CAACJ;IACrC;IACA,OAAO;AACT;AAMA,OAAO,SAASK,eAAe,EAAEC,IAAI,EAAuB;IAC1D,MAAM,EAAEC,OAAO,EAAEC,YAAY,EAAE,GAAGV;IAClC,MAAMW,QAAQZ,SAAS;QAAEU;QAASG,MAAM,GAAGF,aAAa,CAAC,EAAEF,MAAM;IAAU;IAC3E,MAAMK,SAASX,kBAAkBS,SAAS,eAAe;IACzD,qBAAO,KAACV;QAAUY,QAAQA;;AAC5B"}

package/dist/components/layout/MessageField.d.ts

@@ -4,7 +4,8 @@ interface MessageFieldProps {
     messageKey: string;
     path: string;
     hidden?: boolean;
+    showStatus?: boolean;
 }
-export declare function MessageField({ schema, messageKey, path, hidden, }: MessageFieldProps): React.ReactNode;
+export declare const MessageField: import("react").NamedExoticComponent<MessageFieldProps>;
 export {};
 //# sourceMappingURL=MessageField.d.ts.map

package/dist/components/layout/MessageField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageField.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessageField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAU,EACV,IAAI,EACJ,MAAM,GACP,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA8CrC"}
+{"version":3,"file":"MessageField.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessageField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAS7C,UAAU,iBAAiB;IACzB,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,yDAwDvB,CAAC"}

package/dist/components/layout/MessageField.js

@@ -1,21 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { useMessagesForm } from '../../components/MessageFormContext';
+import clsx from 'clsx';
+import { get } from 'lodash-es';
+import { memo, useMemo } from 'react';
+import { useFormState, useWatch } from 'react-hook-form';
+import { useMessagesForm } from '../../components/MessagesFormProvider';
+import { toWords } from '../../utils/format';
 import { parseMessageSchema } from '../../utils/schema';
 import { createValidator } from '../../utils/validate';
-import { MessageController } from '../MessageController';
+import { MessageFormField } from '../MessageFormField';
+import { GroupStatusDot } from './GroupStatusDot';
 import styles from './MessageField.module.css';
-export function MessageField({ schema, messageKey, path, hidden }) {
-    const { locales } = useMessagesForm();
+export const MessageField = /*#__PURE__*/ memo(function MessageField({ schema, messageKey, path, hidden, showStatus }) {
+    const { defaultLocale, activeLocale, control } = useMessagesForm();
     const config = useMemo(()=>parseMessageSchema(schema), [
         schema
     ]);
     const validator = useMemo(()=>createValidator(config.variables), [
         config.variables
     ]);
-    const [firstLocale, ...otherLocales] = locales;
-    if (!firstLocale) return null;
-    return /*#__PURE__*/ _jsxs("div", {
+    const multiline = schema.includes('\n');
+    const isDefaultLocale = activeLocale === defaultLocale;
+    const fieldPath = [
+        path,
+        messageKey
+    ].filter(Boolean).join('.');
+    const fullName = `${activeLocale}.${fieldPath}`;
+    const defaultValue = useWatch({
+        name: `${defaultLocale}.${fieldPath}`
+    });
+    const { errors } = useFormState({
+        control
+    });
+    const hasError = get(errors, fullName) !== undefined;
+    const content = /*#__PURE__*/ _jsxs("div", {
         style: {
             display: hidden ? 'none' : undefined
         },
@@ -23,35 +40,37 @@ export function MessageField({ schema, messageKey, path, hidden }) {
             config.description && /*#__PURE__*/ _jsx("p", {
                 children: config.description
             }),
-            otherLocales.length === 0 ? /*#__PURE__*/ _jsx(MessageController, {
-                locale: firstLocale,
-                name: [
-                    firstLocale,
-                    path,
-                    messageKey
-                ].join('.'),
+            /*#__PURE__*/ _jsx(MessageFormField, {
+                locale: activeLocale,
+                multiline: multiline,
+                name: fullName,
+                reference: !isDefaultLocale ? defaultValue : undefined,
                 validate: validator,
                 variables: config.variables
-            }) : /*#__PURE__*/ _jsx("div", {
-                className: [
-                    styles.localeRow,
-                    styles.localeRowScrollable
-                ].filter(Boolean).join(' '),
-                children: locales.map((locale)=>/*#__PURE__*/ _jsx(MessageController, {
-                        className: styles.localeItem,
-                        label: locale.toUpperCase(),
-                        locale: locale,
-                        name: [
-                            locale,
-                            path,
-                            messageKey
-                        ].join('.'),
-                        validate: validator,
-                        variables: config.variables
-                    }, locale))
             })
         ]
     });
-}
+    if (showStatus !== undefined) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: clsx(styles.row, hasError && styles.rowError),
+            children: [
+                /*#__PURE__*/ _jsxs("span", {
+                    className: styles.label,
+                    children: [
+                        toWords(messageKey),
+                        showStatus && /*#__PURE__*/ _jsx(GroupStatusDot, {
+                            path: fieldPath
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: styles.input,
+                    children: content
+                })
+            ]
+        });
+    }
+    return content;
+});
 
 //# sourceMappingURL=MessageField.js.map

package/dist/components/layout/MessageField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useMessagesForm } from '@/components/MessageFormContext';\nimport type { MessageSchema } from '@/types';\nimport { parseMessageSchema } from '@/utils/schema';\nimport { createValidator } from '@/utils/validate';\n\nimport { MessageController } from '../MessageController';\nimport styles from './MessageField.module.css';\n\ninterface MessageFieldProps {\n  schema: MessageSchema;\n  messageKey: string;\n  path: string;\n  hidden?: boolean;\n}\n\nexport function MessageField({\n  schema,\n  messageKey,\n  path,\n  hidden,\n}: MessageFieldProps): React.ReactNode {\n  const { locales } = useMessagesForm();\n\n  const config = useMemo(() => parseMessageSchema(schema), [schema]);\n\n  const validator = useMemo(\n    () => createValidator(config.variables),\n    [config.variables],\n  );\n\n  const [firstLocale, ...otherLocales] = locales;\n\n  if (!firstLocale) return null;\n\n  return (\n    <div style={{ display: hidden ? 'none' : undefined }}>\n      {config.description && <p>{config.description}</p>}\n\n      {otherLocales.length === 0 ? (\n        <MessageController\n          locale={firstLocale}\n          name={[firstLocale, path, messageKey].join('.')}\n          validate={validator}\n          variables={config.variables}\n        />\n      ) : (\n        <div\n          className={[styles.localeRow, styles.localeRowScrollable]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {locales.map((locale) => (\n            <MessageController\n              className={styles.localeItem}\n              key={locale}\n              label={locale.toUpperCase()}\n              locale={locale}\n              name={[locale, path, messageKey].join('.')}\n              validate={validator}\n              variables={config.variables}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useMemo","useMessagesForm","parseMessageSchema","createValidator","MessageController","styles","MessageField","schema","messageKey","path","hidden","locales","config","validator","variables","firstLocale","otherLocales","div","style","display","undefined","description","p","length","locale","name","join","validate","className","localeRow","localeRowScrollable","filter","Boolean","map","localeItem","label","toUpperCase"],"mappings":";AAAA,SAASA,OAAO,QAAQ,QAAQ;AAChC,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,kBAAkB,QAAQ,iBAAiB;AACpD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,OAAOC,YAAY,4BAA4B;AAS/C,OAAO,SAASC,aAAa,EAC3BC,MAAM,EACNC,UAAU,EACVC,IAAI,EACJC,MAAM,EACY;IAClB,MAAM,EAAEC,OAAO,EAAE,GAAGV;IAEpB,MAAMW,SAASZ,QAAQ,IAAME,mBAAmBK,SAAS;QAACA;KAAO;IAEjE,MAAMM,YAAYb,QAChB,IAAMG,gBAAgBS,OAAOE,SAAS,GACtC;QAACF,OAAOE,SAAS;KAAC;IAGpB,MAAM,CAACC,aAAa,GAAGC,aAAa,GAAGL;IAEvC,IAAI,CAACI,aAAa,OAAO;IAEzB,qBACE,MAACE;QAAIC,OAAO;YAAEC,SAAST,SAAS,SAASU;QAAU;;YAChDR,OAAOS,WAAW,kBAAI,KAACC;0BAAGV,OAAOS,WAAW;;YAE5CL,aAAaO,MAAM,KAAK,kBACvB,KAACnB;gBACCoB,QAAQT;gBACRU,MAAM;oBAACV;oBAAaN;oBAAMD;iBAAW,CAACkB,IAAI,CAAC;gBAC3CC,UAAUd;gBACVC,WAAWF,OAAOE,SAAS;+BAG7B,KAACG;gBACCW,WAAW;oBAACvB,OAAOwB,SAAS;oBAAExB,OAAOyB,mBAAmB;iBAAC,CACtDC,MAAM,CAACC,SACPN,IAAI,CAAC;0BAEPf,QAAQsB,GAAG,CAAC,CAACT,uBACZ,KAACpB;wBACCwB,WAAWvB,OAAO6B,UAAU;wBAE5BC,OAAOX,OAAOY,WAAW;wBACzBZ,QAAQA;wBACRC,MAAM;4BAACD;4BAAQf;4BAAMD;yBAAW,CAACkB,IAAI,CAAC;wBACtCC,UAAUd;wBACVC,WAAWF,OAAOE,SAAS;uBALtBU;;;;AAYnB"}
+{"version":3,"sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { get } from 'lodash-es';\nimport { memo, useMemo } from 'react';\nimport { useFormState, useWatch } from 'react-hook-form';\nimport { useMessagesForm } from '@/components/MessagesFormProvider';\nimport type { MessageSchema } from '@/types';\nimport { toWords } from '@/utils/format';\nimport { parseMessageSchema } from '@/utils/schema';\nimport { createValidator } from '@/utils/validate';\n\nimport { MessageFormField } from '../MessageFormField';\nimport { GroupStatusDot } from './GroupStatusDot';\nimport styles from './MessageField.module.css';\n\ninterface MessageFieldProps {\n  schema: MessageSchema;\n  messageKey: string;\n  path: string;\n  hidden?: boolean;\n  showStatus?: boolean;\n}\n\nexport const MessageField = memo(function MessageField({\n  schema,\n  messageKey,\n  path,\n  hidden,\n  showStatus,\n}: MessageFieldProps): React.ReactNode {\n  const { defaultLocale, activeLocale, control } = useMessagesForm();\n\n  const config = useMemo(() => parseMessageSchema(schema), [schema]);\n\n  const validator = useMemo(\n    () => createValidator(config.variables),\n    [config.variables],\n  );\n\n  const multiline = schema.includes('\\n');\n  const isDefaultLocale = activeLocale === defaultLocale;\n  const fieldPath = [path, messageKey].filter(Boolean).join('.');\n  const fullName = `${activeLocale}.${fieldPath}`;\n\n  const defaultValue = useWatch({ name: `${defaultLocale}.${fieldPath}` }) as\n    | string\n    | undefined;\n\n  const { errors } = useFormState({ control });\n  const hasError = get(errors, fullName) !== undefined;\n\n  const content = (\n    <div style={{ display: hidden ? 'none' : undefined }}>\n      {config.description && <p>{config.description}</p>}\n\n      <MessageFormField\n        locale={activeLocale}\n        multiline={multiline}\n        name={fullName}\n        reference={!isDefaultLocale ? defaultValue : undefined}\n        validate={validator}\n        variables={config.variables}\n      />\n    </div>\n  );\n\n  if (showStatus !== undefined) {\n    return (\n      <div className={clsx(styles.row, hasError && styles.rowError)}>\n        <span className={styles.label}>\n          {toWords(messageKey)}\n          {showStatus && <GroupStatusDot path={fieldPath} />}\n        </span>\n        <div className={styles.input}>{content}</div>\n      </div>\n    );\n  }\n\n  return content;\n});\n"],"names":["clsx","get","memo","useMemo","useFormState","useWatch","useMessagesForm","toWords","parseMessageSchema","createValidator","MessageFormField","GroupStatusDot","styles","MessageField","schema","messageKey","path","hidden","showStatus","defaultLocale","activeLocale","control","config","validator","variables","multiline","includes","isDefaultLocale","fieldPath","filter","Boolean","join","fullName","defaultValue","name","errors","hasError","undefined","content","div","style","display","description","p","locale","reference","validate","className","row","rowError","span","label","input"],"mappings":";AAAA,OAAOA,UAAU,OAAO;AACxB,SAASC,GAAG,QAAQ,YAAY;AAChC,SAASC,IAAI,EAAEC,OAAO,QAAQ,QAAQ;AACtC,SAASC,YAAY,EAAEC,QAAQ,QAAQ,kBAAkB;AACzD,SAASC,eAAe,QAAQ,oCAAoC;AAEpE,SAASC,OAAO,QAAQ,iBAAiB;AACzC,SAASC,kBAAkB,QAAQ,iBAAiB;AACpD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,YAAY,4BAA4B;AAU/C,OAAO,MAAMC,6BAAeX,KAAK,SAASW,aAAa,EACrDC,MAAM,EACNC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,UAAU,EACQ;IAClB,MAAM,EAAEC,aAAa,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGf;IAEjD,MAAMgB,SAASnB,QAAQ,IAAMK,mBAAmBM,SAAS;QAACA;KAAO;IAEjE,MAAMS,YAAYpB,QAChB,IAAMM,gBAAgBa,OAAOE,SAAS,GACtC;QAACF,OAAOE,SAAS;KAAC;IAGpB,MAAMC,YAAYX,OAAOY,QAAQ,CAAC;IAClC,MAAMC,kBAAkBP,iBAAiBD;IACzC,MAAMS,YAAY;QAACZ;QAAMD;KAAW,CAACc,MAAM,CAACC,SAASC,IAAI,CAAC;IAC1D,MAAMC,WAAW,GAAGZ,aAAa,CAAC,EAAEQ,WAAW;IAE/C,MAAMK,eAAe5B,SAAS;QAAE6B,MAAM,GAAGf,cAAc,CAAC,EAAES,WAAW;IAAC;IAItE,MAAM,EAAEO,MAAM,EAAE,GAAG/B,aAAa;QAAEiB;IAAQ;IAC1C,MAAMe,WAAWnC,IAAIkC,QAAQH,cAAcK;IAE3C,MAAMC,wBACJ,MAACC;QAAIC,OAAO;YAAEC,SAASxB,SAAS,SAASoB;QAAU;;YAChDf,OAAOoB,WAAW,kBAAI,KAACC;0BAAGrB,OAAOoB,WAAW;;0BAE7C,KAAChC;gBACCkC,QAAQxB;gBACRK,WAAWA;gBACXS,MAAMF;gBACNa,WAAW,CAAClB,kBAAkBM,eAAeI;gBAC7CS,UAAUvB;gBACVC,WAAWF,OAAOE,SAAS;;;;IAKjC,IAAIN,eAAemB,WAAW;QAC5B,qBACE,MAACE;YAAIQ,WAAW/C,KAAKY,OAAOoC,GAAG,EAAEZ,YAAYxB,OAAOqC,QAAQ;;8BAC1D,MAACC;oBAAKH,WAAWnC,OAAOuC,KAAK;;wBAC1B5C,QAAQQ;wBACRG,4BAAc,KAACP;4BAAeK,MAAMY;;;;8BAEvC,KAACW;oBAAIQ,WAAWnC,OAAOwC,KAAK;8BAAGd;;;;IAGrC;IAEA,OAAOA;AACT,GAAG"}

package/dist/components/layout/MessageField.module.css

@@ -1,19 +1,30 @@
-.localeRow {
-  margin-inline: -0.75rem;
+.row {
   display: flex;
-  min-width: 0;
+  align-items: flex-start;
   gap: 1rem;
-  padding-inline: 0.75rem;
+  padding-left: 0.75rem;
+  background-color: var(--theme-elevation-50);
+  border: 1px solid var(--theme-border-color);
+  border-radius: var(--style-radius-m);
 }
 
-.localeRowScrollable {
-  overflow-x: auto;
+.rowError {
+  border-color: var(--theme-error-400);
 }
 
-.localeItem {
-  flex: 1;
+.label {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 10ch;
+  padding-top: 0.35rem;
+  font-size: var(--font-size-large);
+  font-weight: 500;
 }
 
-.hidden {
-  display: none;
+.input {
+  flex: 1;
+  min-width: 0;
+  margin-block: -1px;
+  margin-right: -1px;
 }

package/dist/components/layout/MessagesTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesTabs.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTabs.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,UAAU,iBAAiB;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAGD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAoCrC"}
+{"version":3,"file":"MessagesTabs.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTabs.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C,UAAU,iBAAiB;IACzB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAGD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA+BrC"}

package/dist/components/layout/MessagesTabs.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@payloadcms/ui';
+import clsx from 'clsx';
 import { get } from 'lodash-es';
 import { useCallback } from 'react';
 import { useFormState } from 'react-hook-form';
-import { useMessagesForm } from '../../components/MessageFormContext';
+import { useMessagesForm } from '../../components/MessagesFormProvider';
 import { toWords } from '../../utils/format';
 import styles from './MessagesTabs.module.css';
 // TODO add hash for current tab to url
@@ -26,10 +27,7 @@ export function MessagesTabs({ schema, activeTab, setActiveTab }) {
         role: "tablist",
         children: Object.keys(schema).map((key)=>/*#__PURE__*/ _jsx(Button, {
                 buttonStyle: activeTab === key ? 'pill' : 'tab',
-                className: [
-                    styles.tab,
-                    hasErrors(key) ? activeTab === key ? styles.tabError : styles.tabErrorInactive : undefined
-                ].filter(Boolean).join(' '),
+                className: clsx(styles.tab, hasErrors(key) && activeTab === key && styles.tabError, hasErrors(key) && activeTab !== key && styles.tabErrorInactive),
                 onClick: ()=>setActiveTab(key),
                 size: "large",
                 type: "button",

package/dist/components/layout/MessagesTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout/MessagesTabs.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { get } from 'lodash-es';\nimport { useCallback } from 'react';\nimport { useFormState } from 'react-hook-form';\nimport { useMessagesForm } from '@/components/MessageFormContext';\nimport type { MessagesSchema } from '@/types';\nimport { toWords } from '@/utils/format';\nimport styles from './MessagesTabs.module.css';\n\ninterface MessagesTabsProps {\n  schema: MessagesSchema;\n  activeTab: string | undefined;\n  setActiveTab: (tab: string) => void;\n}\n\n// TODO add hash for current tab to url\nexport function MessagesTabs({\n  schema,\n  activeTab,\n  setActiveTab,\n}: MessagesTabsProps): React.ReactNode {\n  const { locales, control } = useMessagesForm();\n  const { errors } = useFormState({ control });\n\n  const hasErrors = useCallback(\n    (key: string) => {\n      return locales.some((locale) => get(errors, [locale, key]) !== undefined);\n    },\n    [errors, locales],\n  );\n\n  return (\n    <div className={styles.tabs} role=\"tablist\">\n      {Object.keys(schema).map((key) => (\n        <Button\n          buttonStyle={activeTab === key ? 'pill' : 'tab'}\n          className={[\n            styles.tab,\n            hasErrors(key)\n              ? activeTab === key\n                ? styles.tabError\n                : styles.tabErrorInactive\n              : undefined,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          key={key}\n          onClick={() => setActiveTab(key)}\n          size=\"large\"\n          type=\"button\"\n        >\n          {toWords(key)}\n        </Button>\n      ))}\n    </div>\n  );\n}\n"],"names":["Button","get","useCallback","useFormState","useMessagesForm","toWords","styles","MessagesTabs","schema","activeTab","setActiveTab","locales","control","errors","hasErrors","key","some","locale","undefined","div","className","tabs","role","Object","keys","map","buttonStyle","tab","tabError","tabErrorInactive","filter","Boolean","join","onClick","size","type"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,SAASC,GAAG,QAAQ,YAAY;AAChC,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,OAAO,QAAQ,iBAAiB;AACzC,OAAOC,YAAY,4BAA4B;AAQ/C,uCAAuC;AACvC,OAAO,SAASC,aAAa,EAC3BC,MAAM,EACNC,SAAS,EACTC,YAAY,EACM;IAClB,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGR;IAC7B,MAAM,EAAES,MAAM,EAAE,GAAGV,aAAa;QAAES;IAAQ;IAE1C,MAAME,YAAYZ,YAChB,CAACa;QACC,OAAOJ,QAAQK,IAAI,CAAC,CAACC,SAAWhB,IAAIY,QAAQ;gBAACI;gBAAQF;aAAI,MAAMG;IACjE,GACA;QAACL;QAAQF;KAAQ;IAGnB,qBACE,KAACQ;QAAIC,WAAWd,OAAOe,IAAI;QAAEC,MAAK;kBAC/BC,OAAOC,IAAI,CAAChB,QAAQiB,GAAG,CAAC,CAACV,oBACxB,KAACf;gBACC0B,aAAajB,cAAcM,MAAM,SAAS;gBAC1CK,WAAW;oBACTd,OAAOqB,GAAG;oBACVb,UAAUC,OACNN,cAAcM,MACZT,OAAOsB,QAAQ,GACftB,OAAOuB,gBAAgB,GACzBX;iBACL,CACEY,MAAM,CAACC,SACPC,IAAI,CAAC;gBAERC,SAAS,IAAMvB,aAAaK;gBAC5BmB,MAAK;gBACLC,MAAK;0BAEJ9B,QAAQU;eALJA;;AAUf"}
+{"version":3,"sources":["../../../src/components/layout/MessagesTabs.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport clsx from 'clsx';\nimport { get } from 'lodash-es';\nimport { useCallback } from 'react';\nimport { useFormState } from 'react-hook-form';\nimport { useMessagesForm } from '@/components/MessagesFormProvider';\nimport type { MessagesSchema } from '@/types';\nimport { toWords } from '@/utils/format';\nimport styles from './MessagesTabs.module.css';\n\ninterface MessagesTabsProps {\n  schema: MessagesSchema;\n  activeTab: string | undefined;\n  setActiveTab: (tab: string) => void;\n}\n\n// TODO add hash for current tab to url\nexport function MessagesTabs({\n  schema,\n  activeTab,\n  setActiveTab,\n}: MessagesTabsProps): React.ReactNode {\n  const { locales, control } = useMessagesForm();\n  const { errors } = useFormState({ control });\n\n  const hasErrors = useCallback(\n    (key: string) => {\n      return locales.some((locale) => get(errors, [locale, key]) !== undefined);\n    },\n    [errors, locales],\n  );\n\n  return (\n    <div className={styles.tabs} role=\"tablist\">\n      {Object.keys(schema).map((key) => (\n        <Button\n          buttonStyle={activeTab === key ? 'pill' : 'tab'}\n          className={clsx(\n            styles.tab,\n            hasErrors(key) && activeTab === key && styles.tabError,\n            hasErrors(key) && activeTab !== key && styles.tabErrorInactive,\n          )}\n          key={key}\n          onClick={() => setActiveTab(key)}\n          size=\"large\"\n          type=\"button\"\n        >\n          {toWords(key)}\n        </Button>\n      ))}\n    </div>\n  );\n}\n"],"names":["Button","clsx","get","useCallback","useFormState","useMessagesForm","toWords","styles","MessagesTabs","schema","activeTab","setActiveTab","locales","control","errors","hasErrors","key","some","locale","undefined","div","className","tabs","role","Object","keys","map","buttonStyle","tab","tabError","tabErrorInactive","onClick","size","type"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,OAAOC,UAAU,OAAO;AACxB,SAASC,GAAG,QAAQ,YAAY;AAChC,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,eAAe,QAAQ,oCAAoC;AAEpE,SAASC,OAAO,QAAQ,iBAAiB;AACzC,OAAOC,YAAY,4BAA4B;AAQ/C,uCAAuC;AACvC,OAAO,SAASC,aAAa,EAC3BC,MAAM,EACNC,SAAS,EACTC,YAAY,EACM;IAClB,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGR;IAC7B,MAAM,EAAES,MAAM,EAAE,GAAGV,aAAa;QAAES;IAAQ;IAE1C,MAAME,YAAYZ,YAChB,CAACa;QACC,OAAOJ,QAAQK,IAAI,CAAC,CAACC,SAAWhB,IAAIY,QAAQ;gBAACI;gBAAQF;aAAI,MAAMG;IACjE,GACA;QAACL;QAAQF;KAAQ;IAGnB,qBACE,KAACQ;QAAIC,WAAWd,OAAOe,IAAI;QAAEC,MAAK;kBAC/BC,OAAOC,IAAI,CAAChB,QAAQiB,GAAG,CAAC,CAACV,oBACxB,KAAChB;gBACC2B,aAAajB,cAAcM,MAAM,SAAS;gBAC1CK,WAAWpB,KACTM,OAAOqB,GAAG,EACVb,UAAUC,QAAQN,cAAcM,OAAOT,OAAOsB,QAAQ,EACtDd,UAAUC,QAAQN,cAAcM,OAAOT,OAAOuB,gBAAgB;gBAGhEC,SAAS,IAAMpB,aAAaK;gBAC5BgB,MAAK;gBACLC,MAAK;0BAEJ3B,QAAQU;eALJA;;AAUf"}

package/dist/components/layout/MessagesTree.d.ts

@@ -6,6 +6,6 @@ interface MessagesTreeProps {
     className?: string;
     hidden?: boolean;
 }
-export declare function MessagesTree({ path, schema, nestingLevel, className, hidden, }: MessagesTreeProps): React.ReactNode;
+export declare const MessagesTree: import("react").NamedExoticComponent<MessagesTreeProps>;
 export {};
 //# sourceMappingURL=MessagesTree.d.ts.map

package/dist/components/layout/MessagesTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesTree.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTree.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMxC,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,QAAQ,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,YAAgB,EAChB,SAAS,EACT,MAAM,GACP,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA8DrC"}
+{"version":3,"file":"MessagesTree.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTree.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAOxC,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,QAAQ,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAID,eAAO,MAAM,YAAY,yDAwDvB,CAAC"}

package/dist/components/layout/MessagesTree.js

@@ -1,66 +1,56 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapsible } from '@payloadcms/ui';
-import { get } from 'lodash-es';
-import { useCallback } from 'react';
-import { useFormState } from 'react-hook-form';
-import { useMessagesForm } from '../../components/MessageFormContext';
+import clsx from 'clsx';
+import { memo } from 'react';
+import { useMessagesForm } from '../../components/MessagesFormProvider';
 import { toWords } from '../../utils/format';
+import { GroupStatusDot } from './GroupStatusDot';
 import { MessageField } from './MessageField';
 import styles from './MessagesTree.module.css';
 // TODO fix sticky position on single locale form
-export function MessagesTree({ path, schema, nestingLevel = 0, className, hidden }) {
-    const { control, locales } = useMessagesForm();
-    const { errors } = useFormState({
-        control
-    });
-    const hasErrors = useCallback((key)=>{
-        return locales.some((locale)=>get(errors, [
-                locale,
-                path,
-                key
-            ].join('.')) !== undefined);
-    }, [
-        errors,
-        locales,
-        path
-    ]);
+export const MessagesTree = /*#__PURE__*/ memo(function MessagesTree({ path, schema, nestingLevel = 0, className, hidden }) {
+    const { activeLocale, defaultLocale } = useMessagesForm();
+    const showStatus = activeLocale !== defaultLocale;
     return /*#__PURE__*/ _jsx("div", {
-        className: [
-            styles.grid,
-            className
-        ].filter(Boolean).join(' '),
+        className: clsx(styles.grid, className),
         style: {
             display: hidden ? 'none' : undefined
         },
-        children: Object.entries(schema).map(([key, value])=>/*#__PURE__*/ _jsx("div", {
+        children: Object.entries(schema).map(([key, value])=>{
+            const fullPath = path ? [
+                path,
+                key
+            ].join('.') : key;
+            return typeof value === 'string' ? /*#__PURE__*/ _jsx(MessageField, {
+                messageKey: key,
+                path: path,
+                schema: value,
+                showStatus: showStatus
+            }, key) : /*#__PURE__*/ _jsx("div", {
                 className: styles.item,
                 style: {
                     '--nesting-level': nestingLevel
                 },
                 children: /*#__PURE__*/ _jsx(Collapsible, {
                     className: styles.collapsible,
-                    header: /*#__PURE__*/ _jsx("span", {
-                        className: [
-                            styles.header,
-                            hasErrors(key) ? styles.headerError : undefined
-                        ].filter(Boolean).join(' '),
-                        children: toWords(key)
+                    header: /*#__PURE__*/ _jsxs("span", {
+                        className: styles.header,
+                        children: [
+                            toWords(key),
+                            showStatus && /*#__PURE__*/ _jsx(GroupStatusDot, {
+                                path: fullPath
+                            })
+                        ]
                     }),
-                    children: typeof value === 'string' ? /*#__PURE__*/ _jsx(MessageField, {
-                        messageKey: key,
-                        path: path,
-                        schema: value
-                    }, key) : /*#__PURE__*/ _jsx(MessagesTree, {
+                    children: /*#__PURE__*/ _jsx(MessagesTree, {
                         nestingLevel: nestingLevel + 1,
-                        path: [
-                            path,
-                            key
-                        ].join('.'),
+                        path: fullPath,
                         schema: value
                     })
                 })
-            }, key))
+            }, key);
+        })
     });
-}
+});
 
 //# sourceMappingURL=MessagesTree.js.map