payload-intl 1.3.2 → 1.4.0

package/dist/components/input/variables/VariableIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/input/variables/VariableIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oCAAoC,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AASrD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IAChE,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,kDAmBjE"}

package/dist/components/input/variables/VariableIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/input/variables/VariableIcon.tsx"],"sourcesContent":["import { TYPE } from '@formatjs/icu-messageformat-parser';\nimport type { IconProps } from '@tabler/icons-react';\nimport {\n  IconAntennaBars5,\n  IconCalendar,\n  IconClock,\n  IconHash,\n  IconLayoutList,\n} from '@tabler/icons-react';\n\nexport interface VariableIconProps extends Omit<IconProps, 'type'> {\n  type: TYPE;\n}\n\nexport function VariableIcon({ type, ...props }: VariableIconProps) {\n  switch (type) {\n    case TYPE.literal:\n    case TYPE.argument:\n    case TYPE.pound:\n      return null;\n    case TYPE.number:\n      return <IconHash {...props} />;\n    case TYPE.date:\n      return <IconCalendar {...props} />;\n    case TYPE.time:\n      return <IconClock {...props} />;\n    case TYPE.select:\n      return <IconLayoutList {...props} />;\n    case TYPE.plural:\n      return <IconAntennaBars5 {...props} />;\n    case TYPE.tag:\n      return null;\n  }\n}\n"],"names":["TYPE","IconAntennaBars5","IconCalendar","IconClock","IconHash","IconLayoutList","VariableIcon","type","props","literal","argument","pound","number","date","time","select","plural","tag"],"mappings":";AAAA,SAASA,IAAI,QAAQ,qCAAqC;AAE1D,SACEC,gBAAgB,EAChBC,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,cAAc,QACT,sBAAsB;AAM7B,OAAO,SAASC,aAAa,EAAEC,IAAI,EAAE,GAAGC,OAA0B;IAChE,OAAQD;QACN,KAAKP,KAAKS,OAAO;QACjB,KAAKT,KAAKU,QAAQ;QAClB,KAAKV,KAAKW,KAAK;YACb,OAAO;QACT,KAAKX,KAAKY,MAAM;YACd,qBAAO,KAACR;gBAAU,GAAGI,KAAK;;QAC5B,KAAKR,KAAKa,IAAI;YACZ,qBAAO,KAACX;gBAAc,GAAGM,KAAK;;QAChC,KAAKR,KAAKc,IAAI;YACZ,qBAAO,KAACX;gBAAW,GAAGK,KAAK;;QAC7B,KAAKR,KAAKe,MAAM;YACd,qBAAO,KAACV;gBAAgB,GAAGG,KAAK;;QAClC,KAAKR,KAAKgB,MAAM;YACd,qBAAO,KAACf;gBAAkB,GAAGO,KAAK;;QACpC,KAAKR,KAAKiB,GAAG;YACX,OAAO;IACX;AACF"}

package/dist/components/input/variables/VariableNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableNode.d.ts","sourceRoot":"","sources":["../../../../src/components/input/variables/VariableNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACd,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,KAAK,8BAA8B,EACpC,MAAM,4BAA4B,CAAC;AAIpC,qBAAa,mBAAoB,SAAQ,oBAAoB;IAC3D,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,mBAAmB,GAAG,mBAAmB;IAS5D,MAAM,CAAC,UAAU,CACf,cAAc,EAAE,8BAA8B,GAC7C,mBAAmB;IAQtB,UAAU,IAAI,8BAA8B;IAO5C,cAAc,IAAI,MAAM;IAKxB,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;CAW3E"}

package/dist/components/input/variables/VariableNode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/input/variables/VariableNode.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  EditorConfig,\n  LexicalEditor,\n} from '@payloadcms/richtext-lexical/lexical';\nimport {\n  BeautifulMentionNode,\n  type SerializedBeautifulMentionNode,\n} from 'lexical-beautiful-mentions';\n\nimport { VariableChip } from './VariableChip';\n\nexport class VariableMentionNode extends BeautifulMentionNode {\n  static getType(): string {\n    return 'variableMention';\n  }\n\n  static clone(node: VariableMentionNode): VariableMentionNode {\n    return new VariableMentionNode(\n      node.__trigger,\n      node.__value,\n      node.__data,\n      node.__key,\n    );\n  }\n\n  static importJSON(\n    serializedNode: SerializedBeautifulMentionNode,\n  ): VariableMentionNode {\n    return new VariableMentionNode(\n      serializedNode.trigger,\n      serializedNode.value,\n      serializedNode.data,\n    );\n  }\n\n  exportJSON(): SerializedBeautifulMentionNode {\n    return {\n      ...super.exportJSON(),\n      type: 'variableMention',\n    };\n  }\n\n  getTextContent(): string {\n    const icu = this.__data?.icu;\n    return typeof icu === 'string' ? icu : `{${this.__value}}`;\n  }\n\n  decorate(_editor: LexicalEditor, _config: EditorConfig): React.JSX.Element {\n    const data = this.__data;\n    return (\n      <VariableChip\n        icu={this.getTextContent()}\n        label={typeof data?.label === 'string' ? data.label : this.__value}\n        name={this.__value}\n        nodeKey={this.__key}\n      />\n    );\n  }\n}\n"],"names":["BeautifulMentionNode","VariableChip","VariableMentionNode","getType","clone","node","__trigger","__value","__data","__key","importJSON","serializedNode","trigger","value","data","exportJSON","type","getTextContent","icu","decorate","_editor","_config","label","name","nodeKey"],"mappings":"AAAA;;AAMA,SACEA,oBAAoB,QAEf,6BAA6B;AAEpC,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,OAAO,MAAMC,4BAA4BF;IACvC,OAAOG,UAAkB;QACvB,OAAO;IACT;IAEA,OAAOC,MAAMC,IAAyB,EAAuB;QAC3D,OAAO,IAAIH,oBACTG,KAAKC,SAAS,EACdD,KAAKE,OAAO,EACZF,KAAKG,MAAM,EACXH,KAAKI,KAAK;IAEd;IAEA,OAAOC,WACLC,cAA8C,EACzB;QACrB,OAAO,IAAIT,oBACTS,eAAeC,OAAO,EACtBD,eAAeE,KAAK,EACpBF,eAAeG,IAAI;IAEvB;IAEAC,aAA6C;QAC3C,OAAO;YACL,GAAG,KAAK,CAACA,YAAY;YACrBC,MAAM;QACR;IACF;IAEAC,iBAAyB;QACvB,MAAMC,MAAM,IAAI,CAACV,MAAM,EAAEU;QACzB,OAAO,OAAOA,QAAQ,WAAWA,MAAM,CAAC,CAAC,EAAE,IAAI,CAACX,OAAO,CAAC,CAAC,CAAC;IAC5D;IAEAY,SAASC,OAAsB,EAAEC,OAAqB,EAAqB;QACzE,MAAMP,OAAO,IAAI,CAACN,MAAM;QACxB,qBACE,KAACP;YACCiB,KAAK,IAAI,CAACD,cAAc;YACxBK,OAAO,OAAOR,MAAMQ,UAAU,WAAWR,KAAKQ,KAAK,GAAG,IAAI,CAACf,OAAO;YAClEgB,MAAM,IAAI,CAAChB,OAAO;YAClBiB,SAAS,IAAI,CAACf,KAAK;;IAGzB;AACF"}

package/dist/components/input/variables/VariableSuggestion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableSuggestion.d.ts","sourceRoot":"","sources":["../../../../src/components/input/variables/VariableSuggestion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,8BAA8B,EAC9B,0BAA0B,EAC3B,MAAM,4BAA4B,CAAC;AAKpC,eAAO,MAAM,WAAW,sIAKtB,CAAC;AAEH,eAAO,MAAM,eAAe,uIAoB1B,CAAC"}

package/dist/components/input/variables/VariableSuggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/input/variables/VariableSuggestion.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type {\n  BeautifulMentionsMenuItemProps,\n  BeautifulMentionsMenuProps,\n} from 'lexical-beautiful-mentions';\nimport { forwardRef } from 'react';\n\nimport styles from './VariableSuggestion.module.css';\n\nexport const MentionMenu = forwardRef<\n  HTMLUListElement,\n  BeautifulMentionsMenuProps\n>(({ loading: _, ...props }, ref) => (\n  <ul {...props} className={styles.list} ref={ref} />\n));\n\nexport const MentionMenuItem = forwardRef<\n  HTMLLIElement,\n  BeautifulMentionsMenuItemProps\n>((props, ref) => (\n  <li\n    aria-selected={props.selected}\n    className={clsx(styles.item, props.selected && styles.itemSelected)}\n    onClick={props.onClick}\n    onKeyDown={props.onKeyDown}\n    onMouseDown={props.onMouseDown}\n    onMouseEnter={props.onMouseEnter}\n    ref={ref}\n    // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: standard WAI-ARIA listbox/option pattern\n    role=\"option\"\n    tabIndex={-1}\n  >\n    {typeof props.item.data?.label === 'string'\n      ? props.item.data.label\n      : props.item.displayValue}\n  </li>\n));\n"],"names":["clsx","forwardRef","styles","MentionMenu","loading","_","props","ref","ul","className","list","MentionMenuItem","li","aria-selected","selected","item","itemSelected","onClick","onKeyDown","onMouseDown","onMouseEnter","role","tabIndex","data","label","displayValue"],"mappings":";AAAA,OAAOA,UAAU,OAAO;AAKxB,SAASC,UAAU,QAAQ,QAAQ;AAEnC,OAAOC,YAAY,kCAAkC;AAErD,OAAO,MAAMC,4BAAcF,WAGzB,CAAC,EAAEG,SAASC,CAAC,EAAE,GAAGC,OAAO,EAAEC,oBAC3B,KAACC;QAAI,GAAGF,KAAK;QAAEG,WAAWP,OAAOQ,IAAI;QAAEH,KAAKA;QAC3C;AAEH,OAAO,MAAMI,gCAAkBV,WAG7B,CAACK,OAAOC,oBACR,KAACK;QACCC,iBAAeP,MAAMQ,QAAQ;QAC7BL,WAAWT,KAAKE,OAAOa,IAAI,EAAET,MAAMQ,QAAQ,IAAIZ,OAAOc,YAAY;QAClEC,SAASX,MAAMW,OAAO;QACtBC,WAAWZ,MAAMY,SAAS;QAC1BC,aAAab,MAAMa,WAAW;QAC9BC,cAAcd,MAAMc,YAAY;QAChCb,KAAKA;QACL,4GAA4G;QAC5Gc,MAAK;QACLC,UAAU,CAAC;kBAEV,OAAOhB,MAAMS,IAAI,CAACQ,IAAI,EAAEC,UAAU,WAC/BlB,MAAMS,IAAI,CAACQ,IAAI,CAACC,KAAK,GACrBlB,MAAMS,IAAI,CAACU,YAAY;QAE5B"}

package/dist/components/input/variables/editors/PluralVariableEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluralVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/variables/editors/PluralVariableEditor.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAM7C,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,aAAa,GAAG,SAAS,CAAC;IACnC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;QAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAID,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EACZ,OAAO,EACP,GAAG,GACJ,EAAE,yBAAyB,2CAyK3B"}

package/dist/components/{inputs → input}/variables/editors/PluralVariableEditor.js

@@ -4,7 +4,7 @@ import { TYPE } from '@formatjs/icu-messageformat-parser';
 import { IconX } from '@tabler/icons-react';
 import { Fragment, useImperativeHandle, useMemo } from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
-import { parseICUMessage, serializeICUMessage } from '../../../../utils/icu-tranform';
+import { parseICUMessage, serializeICUMessage } from '../../../../icu';
 import styles from './PluralVariableEditor.module.css';
 const NAMED_PLURAL_OPTIONS = [
     'zero',

package/dist/components/input/variables/editors/PluralVariableEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/input/variables/editors/PluralVariableEditor.tsx"],"sourcesContent":["import { Popover } from '@base-ui/react/popover';\nimport { TYPE } from '@formatjs/icu-messageformat-parser';\nimport { IconX } from '@tabler/icons-react';\nimport { Fragment, useImperativeHandle, useMemo } from 'react';\nimport { Controller, useFieldArray, useForm } from 'react-hook-form';\nimport { parseICUMessage, serializeICUMessage } from '@/icu';\nimport type { PluralElement } from '@/types';\n\nimport styles from './PluralVariableEditor.module.css';\n\nconst NAMED_PLURAL_OPTIONS = ['zero', 'one', 'two', 'few', 'many'] as const;\n\nexport interface PluralVariableEditorProps {\n  variableName: string;\n  element: PluralElement | undefined;\n  ref: React.Ref<{ getValue: () => string }>;\n}\n\n// TODO add support for selectordinal (\"pluralType\": \"ordinal\")\n\nexport function PluralVariableEditor({\n  variableName,\n  element,\n  ref,\n}: PluralVariableEditorProps) {\n  const config = useMemo<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n  }>(() => {\n    const { other, ...options } = element?.options ?? {};\n    return {\n      offset: element?.offset ?? 0,\n      options: Object.entries(options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n      other: serializeICUMessage(other ? other.value : []),\n    };\n  }, [element]);\n\n  const { control, register, getValues } = useForm<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n    customValue?: number;\n  }>({\n    defaultValues: config,\n  });\n\n  useImperativeHandle(ref, () => ({\n    getValue: () => {\n      const values = getValues();\n      const updatedElement: PluralElement = {\n        type: TYPE.plural,\n        value: variableName,\n        offset: values.offset,\n        pluralType: element?.pluralType ?? 'cardinal',\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      return serializeICUMessage([updatedElement]);\n    },\n  }));\n\n  const options = useFieldArray({\n    control,\n    name: 'options',\n  });\n\n  return (\n    <div className={styles.root}>\n      <fieldset className={styles.optionsFieldset}>\n        <legend>Options</legend>\n        {options.fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <label htmlFor={`options.${index}`}>{field.name}</label>\n            {/* // TODO add support for variable mentions */}\n            <input\n              className={styles.input}\n              type=\"text\"\n              {...register(`options.${index}.content`, { required: true })}\n            />\n            <button\n              className={styles.removeButton}\n              onClick={() => options.remove(index)}\n              type=\"button\"\n            >\n              <IconX size={16} />\n            </button>\n          </Fragment>\n        ))}\n\n        <label htmlFor=\"other\">other</label>\n        {/* // TODO add support for variable mentions */}\n        <input\n          className={styles.inputSpan2}\n          type=\"text\"\n          {...register('other', { required: true })}\n        />\n      </fieldset>\n      <div className={styles.controlsGrid}>\n        <label className={styles.offsetLabel}>\n          offset\n          <input\n            className={styles.offsetInput}\n            placeholder=\"0\"\n            type=\"numeric\"\n            {...register('offset')}\n          />\n        </label>\n        <Popover.Root>\n          <Popover.Trigger>Add Option</Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Positioner sideOffset={4}>\n              <Popover.Popup className={styles.popoverContent}>\n                <div className={styles.optionsList}>\n                  {NAMED_PLURAL_OPTIONS.filter((option) =>\n                    options.fields.every((field) => field.name !== option),\n                  ).map((option) => (\n                    <Popover.Close\n                      className={styles.optionItem}\n                      key={option}\n                      onClick={() => {\n                        // TODO ensure the fields are always in the same order as staticPluralOptions\n                        options.append(\n                          {\n                            name: option,\n                            content: '',\n                          },\n                          {\n                            shouldFocus: true,\n                          },\n                        );\n                      }}\n                    >\n                      {option}\n                    </Popover.Close>\n                  ))}\n                </div>\n\n                <div className={styles.customInputGroup}>\n                  <label htmlFor=\"customValue\">custom</label>\n                  <Controller\n                    control={control}\n                    name=\"customValue\"\n                    render={({ field }) => (\n                      <input\n                        className={styles.customInput}\n                        min={0}\n                        onChange={({ currentTarget: { value } }) => {\n                          const number = Number(value);\n                          if (Number.isNaN(number)) return;\n                          if (number < 0) return;\n                          field.onChange(number);\n                        }}\n                        onKeyDown={(e) => {\n                          if (e.key !== 'Enter') return;\n                          if (field.value === undefined) return;\n                          const isUnique = !options.fields.some(\n                            (existingField) =>\n                              existingField.name === `=${field.value}`,\n                          );\n                          if (!isUnique) return; // TODO maybe show error?\n                          options.append(\n                            {\n                              name: `=${field.value}`,\n                              content: '',\n                            },\n                            {\n                              shouldFocus: true,\n                            },\n                          );\n                          field.onChange(undefined);\n                        }}\n                        placeholder=\"=0\"\n                        type=\"numeric\"\n                        value={field.value ?? ''}\n                      />\n                    )}\n                  />\n                </div>\n              </Popover.Popup>\n            </Popover.Positioner>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n    </div>\n  );\n}\n"],"names":["Popover","TYPE","IconX","Fragment","useImperativeHandle","useMemo","Controller","useFieldArray","useForm","parseICUMessage","serializeICUMessage","styles","NAMED_PLURAL_OPTIONS","PluralVariableEditor","variableName","element","ref","config","other","options","offset","Object","entries","map","name","option","content","value","control","register","getValues","defaultValues","getValue","values","updatedElement","type","plural","pluralType","fromEntries","div","className","root","fieldset","optionsFieldset","legend","fields","field","index","label","htmlFor","input","required","button","removeButton","onClick","remove","size","id","inputSpan2","controlsGrid","offsetLabel","offsetInput","placeholder","Root","Trigger","Portal","Positioner","sideOffset","Popup","popoverContent","optionsList","filter","every","Close","optionItem","append","shouldFocus","customInputGroup","render","customInput","min","onChange","currentTarget","number","Number","isNaN","onKeyDown","e","key","undefined","isUnique","some","existingField"],"mappings":"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"}

package/dist/components/input/variables/editors/SelectVariableEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/variables/editors/SelectVariableEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,QAAQ,GACT,EAAE,yBAAyB,2CAqD3B"}

package/dist/components/{inputs → input}/variables/editors/SelectVariableEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import { parseICUMessage, serializeICUMessage } from '../../../../utils/icu-tranform';
+import { parseICUMessage, serializeICUMessage } from '../../../../icu';
 import styles from './SelectVariableEditor.module.css';
 export function SelectVariableEditor({ element, onUpdate }) {
     const options = useMemo(()=>Object.entries(element.options).map(([name, option])=>({

package/dist/components/input/variables/editors/SelectVariableEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/input/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { useFieldArray, useForm } from 'react-hook-form';\nimport { parseICUMessage, serializeICUMessage } from '@/icu';\nimport type { SelectElement } from '@/types';\n\nimport styles from './SelectVariableEditor.module.css';\n\nexport interface SelectVariableEditorProps {\n  element: SelectElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function SelectVariableEditor({\n  element,\n  onUpdate,\n}: SelectVariableEditorProps) {\n  const options = useMemo<{ name: string; content: string }[]>(\n    () =>\n      Object.entries(element.options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n    [element],\n  );\n\n  const { control, register, getValues } = useForm<{\n    options: { name: string; content: string }[];\n  }>({\n    defaultValues: { options },\n  });\n  const { fields } = useFieldArray({\n    control,\n    name: 'options',\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent\n  useEffect(() => {\n    return () => {\n      const values = getValues();\n      const updatedElement: SelectElement = {\n        ...element,\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  return (\n    <div className={styles.root}>\n      {fields.map((field, index) => (\n        <div className={styles.field} key={field.name}>\n          <label className={styles.label} htmlFor={`options.${index}.content`}>\n            {field.name}\n          </label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            className={styles.input}\n            {...register(`options.${index}.content`)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["useEffect","useMemo","useFieldArray","useForm","parseICUMessage","serializeICUMessage","styles","SelectVariableEditor","element","onUpdate","options","Object","entries","map","name","option","content","value","control","register","getValues","defaultValues","fields","values","updatedElement","fromEntries","div","className","root","field","index","label","htmlFor","input"],"mappings":";AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAC3C,SAASC,aAAa,EAAEC,OAAO,QAAQ,kBAAkB;AACzD,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,QAAQ;AAG7D,OAAOC,YAAY,oCAAoC;AAOvD,OAAO,SAASC,qBAAqB,EACnCC,OAAO,EACPC,QAAQ,EACkB;IAC1B,MAAMC,UAAUT,QACd,IACEU,OAAOC,OAAO,CAACJ,QAAQE,OAAO,EAAEG,GAAG,CAAC,CAAC,CAACC,MAAMC,OAAO,GAAM,CAAA;gBACvDD;gBACAE,SAASX,oBAAoBU,OAAOE,KAAK;YAC3C,CAAA,IACF;QAACT;KAAQ;IAGX,MAAM,EAAEU,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGjB,QAEtC;QACDkB,eAAe;YAAEX;QAAQ;IAC3B;IACA,MAAM,EAAEY,MAAM,EAAE,GAAGpB,cAAc;QAC/BgB;QACAJ,MAAM;IACR;IAEA,0EAA0E;IAC1Ed,UAAU;QACR,OAAO;YACL,MAAMuB,SAASH;YACf,MAAMI,iBAAgC;gBACpC,GAAGhB,OAAO;gBACVE,SAASC,OAAOc,WAAW,CACzBF,OAAOb,OAAO,CAACG,GAAG,CAAC,CAAC,EAAEC,IAAI,EAAEE,OAAO,EAAE,GAAK;wBACxCF;wBACA;4BAAEG,OAAOb,gBAAgBY;wBAAS;qBACnC;YAEL;YACAP,SAASJ,oBAAoB;gBAACmB;aAAe;QAC/C;IACF,GAAG,EAAE;IAEL,qBACE,KAACE;QAAIC,WAAWrB,OAAOsB,IAAI;kBACxBN,OAAOT,GAAG,CAAC,CAACgB,OAAOC,sBAClB,MAACJ;gBAAIC,WAAWrB,OAAOuB,KAAK;;kCAC1B,KAACE;wBAAMJ,WAAWrB,OAAOyB,KAAK;wBAAEC,SAAS,CAAC,QAAQ,EAAEF,MAAM,QAAQ,CAAC;kCAChED,MAAMf,IAAI;;kCAGb,KAACmB;wBACCN,WAAWrB,OAAO2B,KAAK;wBACtB,GAAGd,SAAS,CAAC,QAAQ,EAAEW,MAAM,QAAQ,CAAC,CAAC;;;eAPTD,MAAMf,IAAI;;AAarD"}

package/dist/components/input/variables/editors/TagVariableEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/variables/editors/TagVariableEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,QAAQ,GACT,EAAE,sBAAsB,2CA2BxB"}

package/dist/components/{inputs → input}/variables/editors/TagVariableEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
-import { parseICUMessage, serializeICUMessage } from '../../../../utils/icu-tranform';
+import { parseICUMessage, serializeICUMessage } from '../../../../icu';
 import styles from './TagVariableEditor.module.css';
 export function TagVariableEditor({ element, onUpdate }) {
     const content = useMemo(()=>serializeICUMessage(element.children), [

package/dist/components/input/variables/editors/TagVariableEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/input/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { parseICUMessage, serializeICUMessage } from '@/icu';\nimport type { TagElement } from '@/types';\n\nimport styles from './TagVariableEditor.module.css';\n\nexport interface TagVariableEditorProps {\n  element: TagElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TagVariableEditor({\n  element,\n  onUpdate,\n}: TagVariableEditorProps) {\n  const content = useMemo<string>(\n    () => serializeICUMessage(element.children),\n    [element],\n  );\n\n  const { register, getValues } = useForm<{ content: string }>({\n    defaultValues: { content },\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: useEffectEvent\n  useEffect(() => {\n    return () => {\n      const { content } = getValues();\n      // TODO find better solution for this\n      const updatedElement: TagElement = {\n        ...element,\n        children: parseICUMessage(content),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  // TODO add support for variable mentions\n  return (\n    <textarea className={styles.textarea} {...register('content')} rows={1} />\n  );\n}\n"],"names":["useEffect","useMemo","useForm","parseICUMessage","serializeICUMessage","styles","TagVariableEditor","element","onUpdate","content","children","register","getValues","defaultValues","updatedElement","textarea","className","rows"],"mappings":";AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAC3C,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,QAAQ;AAG7D,OAAOC,YAAY,iCAAiC;AAOpD,OAAO,SAASC,kBAAkB,EAChCC,OAAO,EACPC,QAAQ,EACe;IACvB,MAAMC,UAAUR,QACd,IAAMG,oBAAoBG,QAAQG,QAAQ,GAC1C;QAACH;KAAQ;IAGX,MAAM,EAAEI,QAAQ,EAAEC,SAAS,EAAE,GAAGV,QAA6B;QAC3DW,eAAe;YAAEJ;QAAQ;IAC3B;IAEA,0EAA0E;IAC1ET,UAAU;QACR,OAAO;YACL,MAAM,EAAES,OAAO,EAAE,GAAGG;YACpB,qCAAqC;YACrC,MAAME,iBAA6B;gBACjC,GAAGP,OAAO;gBACVG,UAAUP,gBAAgBM;YAC5B;YACAD,SAASJ,oBAAoB;gBAACU;aAAe;QAC/C;IACF,GAAG,EAAE;IAEL,yCAAyC;IACzC,qBACE,KAACC;QAASC,WAAWX,OAAOU,QAAQ;QAAG,GAAGJ,SAAS,UAAU;QAAEM,MAAM;;AAEzE"}

package/dist/components/input/variables/editors/TemporalVariableEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemporalVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/variables/editors/TemporalVariableEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAExD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAAC;IAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;QAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,GAAG,GACJ,EAAE,2BAA2B,2CAS7B"}

package/dist/components/input/variables/editors/TemporalVariableEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/input/variables/editors/TemporalVariableEditor.tsx"],"sourcesContent":["import { useImperativeHandle } from 'react';\nimport type { DateElement, TimeElement } from '@/types';\n\nexport interface TemporalVariableEditorProps {\n  type: 'date' | 'time';\n  name: string;\n  element: DateElement | TimeElement | undefined;\n  ref: React.Ref<{ getValue: () => string }>;\n}\n\nexport function TemporalVariableEditor({\n  type,\n  ref,\n}: TemporalVariableEditorProps) {\n  useImperativeHandle(ref, () => ({\n    getValue: () => {\n      // TODO\n      return '';\n    },\n  }));\n\n  return <>{type === 'date' ? 'DateElementEditor' : 'TimeElementEditor'}</>;\n}\n"],"names":["useImperativeHandle","TemporalVariableEditor","type","ref","getValue"],"mappings":";AAAA,SAASA,mBAAmB,QAAQ,QAAQ;AAU5C,OAAO,SAASC,uBAAuB,EACrCC,IAAI,EACJC,GAAG,EACyB;IAC5BH,oBAAoBG,KAAK,IAAO,CAAA;YAC9BC,UAAU;gBACR,OAAO;gBACP,OAAO;YACT;QACF,CAAA;IAEA,qBAAO;kBAAGF,SAAS,SAAS,sBAAsB;;AACpD"}

package/dist/components/input/variables/pickers/NumericVariableEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumericVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/variables/pickers/NumericVariableEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAa5D,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 → input}/variables/pickers/NumericVariableEditor.js

@@ -2,7 +2,7 @@ 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 { isNumberElement, isPluralElement } from '../../../../utils/guards';
+import { isNumberElement, isPluralElement } from '../../../../icu';
 import { PluralVariableEditor } from '../editors/PluralVariableEditor';
 import styles from './NumericVariableEditor.module.css';
 const NUMERIC_TYPES = [

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/input/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 { isNumberElement, isPluralElement } from '@/icu';\nimport type { NumberElement, PluralElement } from '@/types';\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;AACpD,SAASC,eAAe,EAAEC,eAAe,QAAQ,QAAQ;AAGzD,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/input/variables/pickers/TemporalVariablePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemporalVariablePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/variables/pickers/TemporalVariablePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AASxD,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 → input}/variables/pickers/TemporalVariablePicker.js

@@ -2,7 +2,7 @@ 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 { isDateElement, isTimeElement } from '../../../../icu';
 import { TemporalVariableEditor } from '../editors/TemporalVariableEditor';
 import styles from './TemporalVariablePicker.module.css';
 const TEMPORAL_TYPES = [

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/input/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 { isDateElement, isTimeElement } from '@/icu';\nimport type { DateElement, TimeElement } from '@/types';\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;AACpD,SAASC,aAAa,EAAEC,aAAa,QAAQ,QAAQ;AAGrD,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/layout/MessageField.d.ts

@@ -1,10 +1,11 @@
-import type { MessageSchema } from '../../types';
+import { type Control } from 'react-hook-form';
+import type { Messages } from '../../types';
 interface MessageFieldProps {
-    schema: MessageSchema;
+    schema: string;
     messageKey: string;
     path: string;
-    hidden?: boolean;
-    showStatus?: boolean;
+    control: Control<Messages>;
+    reference: string | undefined;
 }
 export declare const MessageField: import("react").NamedExoticComponent<MessageFieldProps>;
 export {};

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":"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"}
+{"version":3,"file":"MessageField.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessageField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,OAAO,EAA4B,MAAM,iBAAiB,CAAC;AAGzE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,yDAwDvB,CAAC"}

package/dist/components/layout/MessageField.js

@@ -1,17 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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 { MessageFormField } from '../MessageFormField';
-import { GroupStatusDot } from './GroupStatusDot';
+import { Controller, useFormState } from 'react-hook-form';
+import { toWords } from '../../components/input/utils';
+import { createValidator, parseMessageSchema } from '../../icu';
+import { MessageInput } from '../input/MessageInput';
+import { ReferencePopover } from '../input/ReferencePopover';
 import styles from './MessageField.module.css';
-export const MessageField = /*#__PURE__*/ memo(function MessageField({ schema, messageKey, path, hidden, showStatus }) {
-    const { defaultLocale, activeLocale, control } = useMessagesForm();
+export const MessageField = /*#__PURE__*/ memo(function MessageField({ schema, messageKey, path, control, reference }) {
     const config = useMemo(()=>parseMessageSchema(schema), [
         schema
     ]);
@@ -19,58 +15,55 @@ export const MessageField = /*#__PURE__*/ memo(function MessageField({ schema, m
         config.variables
     ]);
     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
-        },
+    const hasError = get(errors, fieldPath) !== undefined;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: styles.root,
+        "data-error": hasError,
         children: [
-            config.description && /*#__PURE__*/ _jsx("p", {
-                children: config.description
+            /*#__PURE__*/ _jsx("span", {
+                className: styles.label,
+                children: toWords(messageKey)
             }),
-            /*#__PURE__*/ _jsx(MessageFormField, {
-                locale: activeLocale,
-                multiline: multiline,
-                name: fullName,
-                reference: !isDefaultLocale ? defaultValue : undefined,
-                validate: validator,
-                variables: config.variables
+            /*#__PURE__*/ _jsx(Controller, {
+                control: control,
+                name: fieldPath,
+                render: ({ field, fieldState })=>/*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(ReferencePopover, {
+                                reference: reference,
+                                children: /*#__PURE__*/ _jsx("fieldset", {
+                                    className: styles.fieldset,
+                                    "data-error": fieldState.error !== undefined,
+                                    children: /*#__PURE__*/ _jsx(MessageInput, {
+                                        error: fieldState.error !== undefined,
+                                        multiline: multiline,
+                                        onBlur: field.onBlur,
+                                        onChange: field.onChange,
+                                        value: field.value || '',
+                                        variables: config.variables
+                                    })
+                                })
+                            }),
+                            fieldState.error?.message && /*#__PURE__*/ _jsx("p", {
+                                className: styles.errorMessage,
+                                children: fieldState.error.message
+                            })
+                        ]
+                    }),
+                rules: {
+                    required: true,
+                    validate: validator
+                }
             })
         ]
     });
-    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 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"}
+{"version":3,"sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import { get } from 'lodash-es';\nimport { memo, useMemo } from 'react';\nimport { type Control, Controller, useFormState } from 'react-hook-form';\nimport { toWords } from '@/components/input/utils';\nimport { createValidator, parseMessageSchema } from '@/icu';\nimport type { Messages } from '@/types';\nimport { MessageInput } from '../input/MessageInput';\nimport { ReferencePopover } from '../input/ReferencePopover';\nimport styles from './MessageField.module.css';\n\ninterface MessageFieldProps {\n  schema: string;\n  messageKey: string;\n  path: string;\n  control: Control<Messages>;\n  reference: string | undefined;\n}\n\nexport const MessageField = memo(function MessageField({\n  schema,\n  messageKey,\n  path,\n  control,\n  reference,\n}: MessageFieldProps): React.ReactNode {\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 fieldPath = [path, messageKey].filter(Boolean).join('.');\n\n  const { errors } = useFormState({ control });\n  const hasError = get(errors, fieldPath) !== undefined;\n\n  return (\n    <div className={styles.root} data-error={hasError}>\n      <span className={styles.label}>{toWords(messageKey)}</span>\n\n      <Controller\n        control={control}\n        name={fieldPath}\n        render={({ field, fieldState }) => (\n          <>\n            <ReferencePopover reference={reference}>\n              <fieldset\n                className={styles.fieldset}\n                data-error={fieldState.error !== undefined}\n              >\n                <MessageInput\n                  error={fieldState.error !== undefined}\n                  multiline={multiline}\n                  onBlur={field.onBlur}\n                  onChange={field.onChange}\n                  value={(field.value as unknown as string) || ''}\n                  variables={config.variables}\n                />\n              </fieldset>\n            </ReferencePopover>\n            {fieldState.error?.message && (\n              <p className={styles.errorMessage}>{fieldState.error.message}</p>\n            )}\n          </>\n        )}\n        rules={{\n          required: true,\n          validate: validator,\n        }}\n      />\n    </div>\n  );\n});\n"],"names":["get","memo","useMemo","Controller","useFormState","toWords","createValidator","parseMessageSchema","MessageInput","ReferencePopover","styles","MessageField","schema","messageKey","path","control","reference","config","validator","variables","multiline","includes","fieldPath","filter","Boolean","join","errors","hasError","undefined","div","className","root","data-error","span","label","name","render","field","fieldState","fieldset","error","onBlur","onChange","value","message","p","errorMessage","rules","required","validate"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,IAAI,EAAEC,OAAO,QAAQ,QAAQ;AACtC,SAAuBC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AACzE,SAASC,OAAO,QAAQ,2BAA2B;AACnD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,QAAQ;AAE5D,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,OAAOC,YAAY,4BAA4B;AAU/C,OAAO,MAAMC,6BAAeV,KAAK,SAASU,aAAa,EACrDC,MAAM,EACNC,UAAU,EACVC,IAAI,EACJC,OAAO,EACPC,SAAS,EACS;IAClB,MAAMC,SAASf,QAAQ,IAAMK,mBAAmBK,SAAS;QAACA;KAAO;IAEjE,MAAMM,YAAYhB,QAChB,IAAMI,gBAAgBW,OAAOE,SAAS,GACtC;QAACF,OAAOE,SAAS;KAAC;IAGpB,MAAMC,YAAYR,OAAOS,QAAQ,CAAC;IAClC,MAAMC,YAAY;QAACR;QAAMD;KAAW,CAACU,MAAM,CAACC,SAASC,IAAI,CAAC;IAE1D,MAAM,EAAEC,MAAM,EAAE,GAAGtB,aAAa;QAAEW;IAAQ;IAC1C,MAAMY,WAAW3B,IAAI0B,QAAQJ,eAAeM;IAE5C,qBACE,MAACC;QAAIC,WAAWpB,OAAOqB,IAAI;QAAEC,cAAYL;;0BACvC,KAACM;gBAAKH,WAAWpB,OAAOwB,KAAK;0BAAG7B,QAAQQ;;0BAExC,KAACV;gBACCY,SAASA;gBACToB,MAAMb;gBACNc,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B;;0CACE,KAAC7B;gCAAiBO,WAAWA;0CAC3B,cAAA,KAACuB;oCACCT,WAAWpB,OAAO6B,QAAQ;oCAC1BP,cAAYM,WAAWE,KAAK,KAAKZ;8CAEjC,cAAA,KAACpB;wCACCgC,OAAOF,WAAWE,KAAK,KAAKZ;wCAC5BR,WAAWA;wCACXqB,QAAQJ,MAAMI,MAAM;wCACpBC,UAAUL,MAAMK,QAAQ;wCACxBC,OAAO,AAACN,MAAMM,KAAK,IAA0B;wCAC7CxB,WAAWF,OAAOE,SAAS;;;;4BAIhCmB,WAAWE,KAAK,EAAEI,yBACjB,KAACC;gCAAEf,WAAWpB,OAAOoC,YAAY;0CAAGR,WAAWE,KAAK,CAACI,OAAO;;;;gBAIlEG,OAAO;oBACLC,UAAU;oBACVC,UAAU/B;gBACZ;;;;AAIR,GAAG"}

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

@@ -1,4 +1,4 @@
-.row {
+.root {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
@@ -6,10 +6,10 @@
   background-color: var(--theme-elevation-50);
   border: 1px solid var(--theme-border-color);
   border-radius: var(--style-radius-m);
-}
 
-.rowError {
-  border-color: var(--theme-error-400);
+  &[data-error="true"] {
+    border-color: var(--theme-error-400);
+  }
 }
 
 .label {
@@ -22,9 +22,21 @@
   font-weight: 500;
 }
 
-.input {
+.fieldset {
   flex: 1;
   min-width: 0;
   margin-block: -1px;
   margin-right: -1px;
+  margin-inline: 0;
+  padding: 0;
+  border: none;
+
+  &[data-error="true"] {
+    border-color: var(--theme-error-400);
+  }
+}
+
+.errorMessage {
+  font-size: var(--font-size-base);
+  color: var(--theme-error-400);
 }

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":"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"}
+{"version":3,"file":"MessagesTabs.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,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,CA8BrC"}

package/dist/components/layout/MessagesTabs.js

@@ -1,33 +1,23 @@
 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/MessagesFormProvider';
-import { toWords } from '../../utils/format';
+import { toWords } from '../../components/input/utils';
 import styles from './MessagesTabs.module.css';
 // TODO add hash for current tab to url
 export function MessagesTabs({ schema, activeTab, setActiveTab }) {
-    const { locales, control } = useMessagesForm();
-    const { errors } = useFormState({
-        control
-    });
-    const hasErrors = useCallback((key)=>{
-        return locales.some((locale)=>get(errors, [
-                locale,
-                key
-            ]) !== undefined);
-    }, [
-        errors,
-        locales
-    ]);
+    // const { errors } = useFormState({ control });
+    // const hasErrors = useCallback(
+    //   (key: string) => {
+    //     return locales.some((locale) => get(errors, [locale, key]) !== undefined);
+    //   },
+    //   [errors, locales],
+    // );
     return /*#__PURE__*/ _jsx("div", {
         className: styles.tabs,
         role: "tablist",
         children: Object.keys(schema).map((key)=>/*#__PURE__*/ _jsx(Button, {
                 buttonStyle: activeTab === key ? 'pill' : 'tab',
-                className: clsx(styles.tab, hasErrors(key) && activeTab === key && styles.tabError, hasErrors(key) && activeTab !== key && styles.tabErrorInactive),
+                className: clsx(styles.tab),
                 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 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"}
+{"version":3,"sources":["../../../src/components/layout/MessagesTabs.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport clsx from 'clsx';\nimport { toWords } from '@/components/input/utils';\nimport type { MessagesSchema } from '@/types';\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 { 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","toWords","styles","MessagesTabs","schema","activeTab","setActiveTab","div","className","tabs","role","Object","keys","map","key","buttonStyle","tab","onClick","size","type"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,OAAOC,UAAU,OAAO;AACxB,SAASC,OAAO,QAAQ,2BAA2B;AAEnD,OAAOC,YAAY,4BAA4B;AAQ/C,uCAAuC;AACvC,OAAO,SAASC,aAAa,EAC3BC,MAAM,EACNC,SAAS,EACTC,YAAY,EACM;IAClB,gDAAgD;IAEhD,iCAAiC;IACjC,uBAAuB;IACvB,iFAAiF;IACjF,OAAO;IACP,uBAAuB;IACvB,KAAK;IAEL,qBACE,KAACC;QAAIC,WAAWN,OAAOO,IAAI;QAAEC,MAAK;kBAC/BC,OAAOC,IAAI,CAACR,QAAQS,GAAG,CAAC,CAACC,oBACxB,KAACf;gBACCgB,aAAaV,cAAcS,MAAM,SAAS;gBAC1CN,WAAWR,KACTE,OAAOc,GAAG;gBAKZC,SAAS,IAAMX,aAAaQ;gBAC5BI,MAAK;gBACLC,MAAK;0BAEJlB,QAAQa;eALJA;;AAUf"}

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

@@ -1,10 +1,12 @@
-import type { Messages } from '../../types';
+import type { Control } from 'react-hook-form';
+import type { Messages, MessagesSchema } from '../../types';
 interface MessagesTreeProps {
     path: string;
-    nestingLevel: number;
-    schema: Messages;
-    className?: string;
-    hidden?: boolean;
+    nestingLevel?: number;
+    schema: MessagesSchema;
+    control: Control<Messages>;
+    defaultValues?: Messages | undefined;
+    hiddenGroups?: string[];
 }
 export declare const MessagesTree: import("react").NamedExoticComponent<MessagesTreeProps>;
 export {};

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":"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"}
+{"version":3,"file":"MessagesTree.d.ts","sourceRoot":"","sources":["../../../src/components/layout/MessagesTree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAIxD,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC3B,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,yDA0DvB,CAAC"}

package/dist/components/layout/MessagesTree.js

@@ -1,31 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Collapsible } from '@payloadcms/ui';
-import clsx from 'clsx';
 import { memo } from 'react';
-import { useMessagesForm } from '../../components/MessagesFormProvider';
-import { toWords } from '../../utils/format';
-import { GroupStatusDot } from './GroupStatusDot';
+import { toWords } from '../../components/input/utils';
 import { MessageField } from './MessageField';
 import styles from './MessagesTree.module.css';
-// TODO fix sticky position on single locale form
-export const MessagesTree = /*#__PURE__*/ memo(function MessagesTree({ path, schema, nestingLevel = 0, className, hidden }) {
-    const { activeLocale, defaultLocale } = useMessagesForm();
-    const showStatus = activeLocale !== defaultLocale;
+export const MessagesTree = /*#__PURE__*/ memo(function MessagesTree({ path, schema, nestingLevel = 0, control, defaultValues, hiddenGroups = [] }) {
     return /*#__PURE__*/ _jsx("div", {
-        className: clsx(styles.grid, className),
-        style: {
-            display: hidden ? 'none' : undefined
-        },
+        className: styles.root,
         children: Object.entries(schema).map(([key, value])=>{
+            if (hiddenGroups.includes(key)) return null;
             const fullPath = path ? [
                 path,
                 key
             ].join('.') : key;
             return typeof value === 'string' ? /*#__PURE__*/ _jsx(MessageField, {
+                control: control,
                 messageKey: key,
                 path: path,
-                schema: value,
-                showStatus: showStatus
+                reference: typeof defaultValues?.[key] === 'string' ? defaultValues[key] : undefined,
+                schema: value
             }, key) : /*#__PURE__*/ _jsx("div", {
                 className: styles.item,
                 style: {
@@ -33,16 +26,13 @@ export const MessagesTree = /*#__PURE__*/ memo(function MessagesTree({ path, sch
                 },
                 children: /*#__PURE__*/ _jsx(Collapsible, {
                     className: styles.collapsible,
-                    header: /*#__PURE__*/ _jsxs("span", {
+                    header: /*#__PURE__*/ _jsx("span", {
                         className: styles.header,
-                        children: [
-                            toWords(key),
-                            showStatus && /*#__PURE__*/ _jsx(GroupStatusDot, {
-                                path: fullPath
-                            })
-                        ]
+                        children: toWords(key)
                     }),
                     children: /*#__PURE__*/ _jsx(MessagesTree, {
+                        control: control,
+                        defaultValues: typeof defaultValues?.[key] === 'object' ? defaultValues[key] : undefined,
                         nestingLevel: nestingLevel + 1,
                         path: fullPath,
                         schema: value