payload-intl 1.2.2 → 1.2.4

package/dist/components/inputs/MessageInput.module.css

@@ -1,25 +1,44 @@
 .editor {
   position: relative;
+  display: grid;
+  align-items: center;
   min-height: 2rem;
   font-size: var(--font-size-large);
 }
 
+.readOnly {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.multiline {
+  min-height: 4rem;
+}
+
 .menuAnchor {
   z-index: 50;
 }
 
 .contentEditable {
   outline: none;
+  border-radius: var(--style-radius-m);
+  background-color: var(--theme-elevation-0);
+  border: 1px solid var(--theme-elevation-300);
+  padding-block: 0.25rem;
+  padding-inline: 0.75rem;
+  height: 100%;
 }
 
 .contentEditable:focus {
   outline: none;
+  border-color: var(--theme-elevation-600);
 }
 
-.contentEditable > :first-child {
-  margin-top: 0;
+.contentEditableError {
+  border-color: var(--theme-error-400);
+  background-color: var(--theme-error-100);
 }
 
-.contentEditable > :last-child {
-  margin-bottom: 0;
+.contentEditable p {
+  margin: 0;
 }

package/dist/components/inputs/ReferencePopover.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+export interface ReferencePopoverProps {
+    reference?: string;
+    children: ReactElement;
+}
+export declare function ReferencePopover({ reference, children, }: ReferencePopoverProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReferencePopover.d.ts.map

package/dist/components/inputs/ReferencePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferencePopover.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/ReferencePopover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,GACT,EAAE,qBAAqB,2CAqBvB"}

package/dist/components/inputs/ReferencePopover.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from '@base-ui/react/popover';
+import { IconX } from '@tabler/icons-react';
+import styles from './ReferencePopover.module.css';
+export function ReferencePopover({ reference, children }) {
+    if (!reference) return children;
+    return /*#__PURE__*/ _jsxs(Popover.Root, {
+        children: [
+            /*#__PURE__*/ _jsx(Popover.Trigger, {
+                nativeButton: false,
+                render: children
+            }),
+            /*#__PURE__*/ _jsx(Popover.Portal, {
+                children: /*#__PURE__*/ _jsx(Popover.Positioner, {
+                    align: "start",
+                    side: "top",
+                    sideOffset: 4,
+                    children: /*#__PURE__*/ _jsxs(Popover.Popup, {
+                        className: styles.popup,
+                        initialFocus: false,
+                        onMouseDown: (e)=>e.preventDefault(),
+                        children: [
+                            /*#__PURE__*/ _jsx(Popover.Close, {
+                                className: styles.dismiss,
+                                type: "button",
+                                children: /*#__PURE__*/ _jsx(IconX, {
+                                    size: 14
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: styles.text,
+                                children: reference
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ReferencePopover.js.map

package/dist/components/inputs/ReferencePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inputs/ReferencePopover.tsx"],"sourcesContent":["import { Popover } from '@base-ui/react/popover';\n\nimport { IconX } from '@tabler/icons-react';\nimport type { ReactElement } from 'react';\n\nimport styles from './ReferencePopover.module.css';\n\nexport interface ReferencePopoverProps {\n  reference?: string;\n  children: ReactElement;\n}\n\nexport function ReferencePopover({\n  reference,\n  children,\n}: ReferencePopoverProps) {\n  if (!reference) return children;\n  return (\n    <Popover.Root>\n      <Popover.Trigger nativeButton={false} render={children} />\n      <Popover.Portal>\n        <Popover.Positioner align=\"start\" side=\"top\" sideOffset={4}>\n          <Popover.Popup\n            className={styles.popup}\n            initialFocus={false}\n            onMouseDown={(e) => e.preventDefault()}\n          >\n            <Popover.Close className={styles.dismiss} type=\"button\">\n              <IconX size={14} />\n            </Popover.Close>\n            <p className={styles.text}>{reference}</p>\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["Popover","IconX","styles","ReferencePopover","reference","children","Root","Trigger","nativeButton","render","Portal","Positioner","align","side","sideOffset","Popup","className","popup","initialFocus","onMouseDown","e","preventDefault","Close","dismiss","type","size","p","text"],"mappings":";AAAA,SAASA,OAAO,QAAQ,yBAAyB;AAEjD,SAASC,KAAK,QAAQ,sBAAsB;AAG5C,OAAOC,YAAY,gCAAgC;AAOnD,OAAO,SAASC,iBAAiB,EAC/BC,SAAS,EACTC,QAAQ,EACc;IACtB,IAAI,CAACD,WAAW,OAAOC;IACvB,qBACE,MAACL,QAAQM,IAAI;;0BACX,KAACN,QAAQO,OAAO;gBAACC,cAAc;gBAAOC,QAAQJ;;0BAC9C,KAACL,QAAQU,MAAM;0BACb,cAAA,KAACV,QAAQW,UAAU;oBAACC,OAAM;oBAAQC,MAAK;oBAAMC,YAAY;8BACvD,cAAA,MAACd,QAAQe,KAAK;wBACZC,WAAWd,OAAOe,KAAK;wBACvBC,cAAc;wBACdC,aAAa,CAACC,IAAMA,EAAEC,cAAc;;0CAEpC,KAACrB,QAAQsB,KAAK;gCAACN,WAAWd,OAAOqB,OAAO;gCAAEC,MAAK;0CAC7C,cAAA,KAACvB;oCAAMwB,MAAM;;;0CAEf,KAACC;gCAAEV,WAAWd,OAAOyB,IAAI;0CAAGvB;;;;;;;;AAMxC"}

package/dist/components/inputs/ReferencePopover.module.css

@@ -0,0 +1,70 @@
+.popup {
+  z-index: 50;
+  position: relative;
+  max-height: 8rem;
+  overflow-y: auto;
+  border-radius: var(--style-radius-m);
+  border: 1px solid var(--theme-border-color);
+  background-color: var(--theme-elevation-50);
+  padding: 0.5rem 2rem 0.5rem 0.75rem;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.popup[data-open] {
+  animation: popoverIn 150ms ease-out;
+}
+
+.popup[data-closed] {
+  animation: popoverOut 100ms ease-in;
+}
+
+@keyframes popoverIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popoverOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+.dismiss {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0.125rem;
+  border-radius: var(--style-radius-s);
+  color: var(--theme-elevation-500);
+}
+
+.dismiss:hover {
+  color: var(--theme-elevation-800);
+}
+
+.text {
+  margin: 0;
+  font-size: var(--font-size-small);
+  color: var(--theme-elevation-500);
+  white-space: pre-wrap;
+  word-break: break-word;
+}

package/dist/components/inputs/SingleLinePlugin.d.ts

@@ -0,0 +1,2 @@
+export declare function SingleLinePlugin(): null;
+//# sourceMappingURL=SingleLinePlugin.d.ts.map

package/dist/components/inputs/SingleLinePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleLinePlugin.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SingleLinePlugin.tsx"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,SA2B/B"}

package/dist/components/inputs/SingleLinePlugin.js

@@ -0,0 +1,24 @@
+import { COMMAND_PRIORITY_HIGH, INSERT_LINE_BREAK_COMMAND, INSERT_PARAGRAPH_COMMAND, LineBreakNode } from '@payloadcms/richtext-lexical/lexical';
+import { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+export function SingleLinePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(()=>{
+        const unregisterLineBreak = editor.registerCommand(INSERT_LINE_BREAK_COMMAND, ()=>true, COMMAND_PRIORITY_HIGH);
+        const unregisterParagraph = editor.registerCommand(INSERT_PARAGRAPH_COMMAND, ()=>true, COMMAND_PRIORITY_HIGH);
+        // Catch line breaks inserted via paste or other means
+        const unregisterTransform = editor.registerNodeTransform(LineBreakNode, (node)=>{
+            node.remove();
+        });
+        return ()=>{
+            unregisterLineBreak();
+            unregisterParagraph();
+            unregisterTransform();
+        };
+    }, [
+        editor
+    ]);
+    return null;
+}
+
+//# sourceMappingURL=SingleLinePlugin.js.map

package/dist/components/inputs/SingleLinePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inputs/SingleLinePlugin.tsx"],"sourcesContent":["import {\n  COMMAND_PRIORITY_HIGH,\n  INSERT_LINE_BREAK_COMMAND,\n  INSERT_PARAGRAPH_COMMAND,\n  LineBreakNode,\n} from '@payloadcms/richtext-lexical/lexical';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport { useEffect } from 'react';\n\nexport function SingleLinePlugin() {\n  const [editor] = useLexicalComposerContext();\n  useEffect(() => {\n    const unregisterLineBreak = editor.registerCommand(\n      INSERT_LINE_BREAK_COMMAND,\n      () => true,\n      COMMAND_PRIORITY_HIGH,\n    );\n    const unregisterParagraph = editor.registerCommand(\n      INSERT_PARAGRAPH_COMMAND,\n      () => true,\n      COMMAND_PRIORITY_HIGH,\n    );\n    // Catch line breaks inserted via paste or other means\n    const unregisterTransform = editor.registerNodeTransform(\n      LineBreakNode,\n      (node) => {\n        node.remove();\n      },\n    );\n    return () => {\n      unregisterLineBreak();\n      unregisterParagraph();\n      unregisterTransform();\n    };\n  }, [editor]);\n  return null;\n}\n"],"names":["COMMAND_PRIORITY_HIGH","INSERT_LINE_BREAK_COMMAND","INSERT_PARAGRAPH_COMMAND","LineBreakNode","useLexicalComposerContext","useEffect","SingleLinePlugin","editor","unregisterLineBreak","registerCommand","unregisterParagraph","unregisterTransform","registerNodeTransform","node","remove"],"mappings":"AAAA,SACEA,qBAAqB,EACrBC,yBAAyB,EACzBC,wBAAwB,EACxBC,aAAa,QACR,uCAAuC;AAC9C,SAASC,yBAAyB,QAAQ,oEAAoE;AAC9G,SAASC,SAAS,QAAQ,QAAQ;AAElC,OAAO,SAASC;IACd,MAAM,CAACC,OAAO,GAAGH;IACjBC,UAAU;QACR,MAAMG,sBAAsBD,OAAOE,eAAe,CAChDR,2BACA,IAAM,MACND;QAEF,MAAMU,sBAAsBH,OAAOE,eAAe,CAChDP,0BACA,IAAM,MACNF;QAEF,sDAAsD;QACtD,MAAMW,sBAAsBJ,OAAOK,qBAAqB,CACtDT,eACA,CAACU;YACCA,KAAKC,MAAM;QACb;QAEF,OAAO;YACLN;YACAE;YACAC;QACF;IACF,GAAG;QAACJ;KAAO;IACX,OAAO;AACT"}

package/dist/components/inputs/variables/VariableChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableChip.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAwBpE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAkE5E"}
+{"version":3,"file":"VariableChip.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAwBpE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAqE5E"}

package/dist/components/inputs/variables/VariableChip.js

@@ -1,15 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from '@base-ui/react/popover';
 import { $getNodeByKey } from '@payloadcms/richtext-lexical/lexical';
 import { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';
-import { Popover } from 'radix-ui';
+import clsx from 'clsx';
 import { useMemo } from 'react';
 import { isArgumentElement, isNumericElement, isSelectElement, isTagElement, isTemporalElement } from '../../../utils/guards';
 import { parseICUMessage } from '../../../utils/icu-tranform';
 import { SelectVariableEditor } from './editors/SelectVariableEditor';
 import { TagVariableEditor } from './editors/TagVariableEditor';
-import { NumericVariablePicker } from './pickers/NumericVariablePicker';
-import { TemporalElementEditor } from './pickers/TemporalElementEditor';
+import { NumericVariableEditor } from './pickers/NumericVariableEditor';
+import { TemporalVariablePicker } from './pickers/TemporalVariablePicker';
 import styles from './VariableChip.module.css';
 const TEMPORAL_ELEMENTS_FLAG = false;
 // TODO replace popover with portal below input field
@@ -44,42 +45,40 @@ export function VariableChip({ name, label, icu, nodeKey }) {
     return /*#__PURE__*/ _jsxs(Popover.Root, {
         children: [
             /*#__PURE__*/ _jsx(Popover.Trigger, {
-                asChild: true,
-                children: /*#__PURE__*/ _jsx("button", {
-                    className: [
-                        styles.chip,
-                        isDisabled ? styles.chipDisabled : undefined
-                    ].filter(Boolean).join(' '),
+                render: /*#__PURE__*/ _jsx("button", {
+                    className: clsx(styles.chip, isDisabled && styles.chipDisabled),
                     "data-icu": icu,
                     "data-variable": name,
-                    type: "button",
-                    children: label
-                })
+                    type: "button"
+                }),
+                children: label
             }),
             /*#__PURE__*/ _jsx(Popover.Portal, {
-                children: /*#__PURE__*/ _jsxs(Popover.Content, {
+                children: /*#__PURE__*/ _jsx(Popover.Positioner, {
                     align: "start",
-                    className: styles.popoverContent,
                     side: "bottom",
                     sideOffset: 5,
-                    children: [
-                        isNumericElement(element) && /*#__PURE__*/ _jsx(NumericVariablePicker, {
-                            element: element,
-                            onUpdate: handleUpdate
-                        }),
-                        isSelectElement(element) && /*#__PURE__*/ _jsx(SelectVariableEditor, {
-                            element: element,
-                            onUpdate: handleUpdate
-                        }),
-                        TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && /*#__PURE__*/ _jsx(TemporalElementEditor, {
-                            element: element,
-                            onUpdate: handleUpdate
-                        }),
-                        isTagElement(element) && /*#__PURE__*/ _jsx(TagVariableEditor, {
-                            element: element,
-                            onUpdate: handleUpdate
-                        })
-                    ]
+                    children: /*#__PURE__*/ _jsxs(Popover.Popup, {
+                        className: styles.popoverContent,
+                        children: [
+                            isNumericElement(element) && /*#__PURE__*/ _jsx(NumericVariableEditor, {
+                                element: element,
+                                onUpdate: handleUpdate
+                            }),
+                            isSelectElement(element) && /*#__PURE__*/ _jsx(SelectVariableEditor, {
+                                element: element,
+                                onUpdate: handleUpdate
+                            }),
+                            TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && /*#__PURE__*/ _jsx(TemporalVariablePicker, {
+                                element: element,
+                                onUpdate: handleUpdate
+                            }),
+                            isTagElement(element) && /*#__PURE__*/ _jsx(TagVariableEditor, {
+                                element: element,
+                                onUpdate: handleUpdate
+                            })
+                        ]
+                    })
                 })
             })
         ]

package/dist/components/inputs/variables/VariableChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"sourcesContent":["'use client';\n\nimport type { NodeKey } from '@payloadcms/richtext-lexical/lexical';\nimport { $getNodeByKey } from '@payloadcms/richtext-lexical/lexical';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport type { BeautifulMentionNode } from 'lexical-beautiful-mentions';\nimport { Popover } from 'radix-ui';\nimport { useMemo } from 'react';\n\nimport {\n  isArgumentElement,\n  isNumericElement,\n  isSelectElement,\n  isTagElement,\n  isTemporalElement,\n} from '@/utils/guards';\nimport { parseICUMessage } from '@/utils/icu-tranform';\n\nimport { SelectVariableEditor } from './editors/SelectVariableEditor';\nimport { TagVariableEditor } from './editors/TagVariableEditor';\nimport { NumericVariablePicker } from './pickers/NumericVariablePicker';\nimport { TemporalElementEditor } from './pickers/TemporalElementEditor';\nimport styles from './VariableChip.module.css';\n\nconst TEMPORAL_ELEMENTS_FLAG = false;\n\nexport interface VariableChipProps {\n  name: string;\n  label: string;\n  icu: string;\n  nodeKey: NodeKey;\n}\n\n// TODO replace popover with portal below input field\n\nexport function VariableChip({ name, label, icu, nodeKey }: VariableChipProps) {\n  const [editor] = useLexicalComposerContext();\n\n  const handleUpdate = (value: string) => {\n    editor.update(() => {\n      const node = $getNodeByKey(nodeKey) as BeautifulMentionNode | null;\n      if (node) {\n        node.setData({ ...node.getData(), icu: value });\n      }\n    });\n  };\n\n  const element = useMemo(() => {\n    try {\n      const [part] = parseICUMessage(icu);\n      if (!part) throw new Error('No part found');\n      return part;\n    } catch (error) {\n      console.error(error);\n      throw new Error(`Invalid ICU: ${icu}`, { cause: error });\n    }\n  }, [icu]);\n\n  const isDisabled =\n    isArgumentElement(element) ||\n    (isTemporalElement(element) && !TEMPORAL_ELEMENTS_FLAG);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <button\n          className={[styles.chip, isDisabled ? styles.chipDisabled : undefined]\n            .filter(Boolean)\n            .join(' ')}\n          data-icu={icu}\n          data-variable={name}\n          type=\"button\"\n        >\n          {/* <VariableIcon type={element.type} className=\"size-4\" /> */}\n          {label}\n        </button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          align=\"start\"\n          className={styles.popoverContent}\n          side=\"bottom\"\n          sideOffset={5}\n        >\n          {isNumericElement(element) && (\n            <NumericVariablePicker element={element} onUpdate={handleUpdate} />\n          )}\n          {isSelectElement(element) && (\n            <SelectVariableEditor element={element} onUpdate={handleUpdate} />\n          )}\n          {TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && (\n            <TemporalElementEditor element={element} onUpdate={handleUpdate} />\n          )}\n\n          {isTagElement(element) && (\n            <TagVariableEditor element={element} onUpdate={handleUpdate} />\n          )}\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["$getNodeByKey","useLexicalComposerContext","Popover","useMemo","isArgumentElement","isNumericElement","isSelectElement","isTagElement","isTemporalElement","parseICUMessage","SelectVariableEditor","TagVariableEditor","NumericVariablePicker","TemporalElementEditor","styles","TEMPORAL_ELEMENTS_FLAG","VariableChip","name","label","icu","nodeKey","editor","handleUpdate","value","update","node","setData","getData","element","part","Error","error","console","cause","isDisabled","Root","Trigger","asChild","button","className","chip","chipDisabled","undefined","filter","Boolean","join","data-icu","data-variable","type","Portal","Content","align","popoverContent","side","sideOffset","onUpdate"],"mappings":"AAAA;;AAGA,SAASA,aAAa,QAAQ,uCAAuC;AACrE,SAASC,yBAAyB,QAAQ,oEAAoE;AAE9G,SAASC,OAAO,QAAQ,WAAW;AACnC,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZC,iBAAiB,QACZ,iBAAiB;AACxB,SAASC,eAAe,QAAQ,uBAAuB;AAEvD,SAASC,oBAAoB,QAAQ,iCAAiC;AACtE,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,yBAAyB;AAS/B,qDAAqD;AAErD,OAAO,SAASC,aAAa,EAAEC,IAAI,EAAEC,KAAK,EAAEC,GAAG,EAAEC,OAAO,EAAqB;IAC3E,MAAM,CAACC,OAAO,GAAGpB;IAEjB,MAAMqB,eAAe,CAACC;QACpBF,OAAOG,MAAM,CAAC;YACZ,MAAMC,OAAOzB,cAAcoB;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CAAC;oBAAE,GAAGD,KAAKE,OAAO,EAAE;oBAAER,KAAKI;gBAAM;YAC/C;QACF;IACF;IAEA,MAAMK,UAAUzB,QAAQ;QACtB,IAAI;YACF,MAAM,CAAC0B,KAAK,GAAGpB,gBAAgBU;YAC/B,IAAI,CAACU,MAAM,MAAM,IAAIC,MAAM;YAC3B,OAAOD;QACT,EAAE,OAAOE,OAAO;YACdC,QAAQD,KAAK,CAACA;YACd,MAAM,IAAID,MAAM,CAAC,aAAa,EAAEX,KAAK,EAAE;gBAAEc,OAAOF;YAAM;QACxD;IACF,GAAG;QAACZ;KAAI;IAER,MAAMe,aACJ9B,kBAAkBwB,YACjBpB,kBAAkBoB,YAAY,CAACb;IAElC,qBACE,MAACb,QAAQiC,IAAI;;0BACX,KAACjC,QAAQkC,OAAO;gBAACC,OAAO;0BACtB,cAAA,KAACC;oBACCC,WAAW;wBAACzB,OAAO0B,IAAI;wBAAEN,aAAapB,OAAO2B,YAAY,GAAGC;qBAAU,CACnEC,MAAM,CAACC,SACPC,IAAI,CAAC;oBACRC,YAAU3B;oBACV4B,iBAAe9B;oBACf+B,MAAK;8BAGJ9B;;;0BAGL,KAAChB,QAAQ+C,MAAM;0BACb,cAAA,MAAC/C,QAAQgD,OAAO;oBACdC,OAAM;oBACNZ,WAAWzB,OAAOsC,cAAc;oBAChCC,MAAK;oBACLC,YAAY;;wBAEXjD,iBAAiBuB,0BAChB,KAAChB;4BAAsBgB,SAASA;4BAAS2B,UAAUjC;;wBAEpDhB,gBAAgBsB,0BACf,KAAClB;4BAAqBkB,SAASA;4BAAS2B,UAAUjC;;wBAEnDP,0BAA0BP,kBAAkBoB,0BAC3C,KAACf;4BAAsBe,SAASA;4BAAS2B,UAAUjC;;wBAGpDf,aAAaqB,0BACZ,KAACjB;4BAAkBiB,SAASA;4BAAS2B,UAAUjC;;;;;;;AAM3D"}
+{"version":3,"sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"sourcesContent":["'use client';\n\nimport { Popover } from '@base-ui/react/popover';\nimport type { NodeKey } from '@payloadcms/richtext-lexical/lexical';\nimport { $getNodeByKey } from '@payloadcms/richtext-lexical/lexical';\nimport { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\nimport clsx from 'clsx';\nimport type { BeautifulMentionNode } from 'lexical-beautiful-mentions';\nimport { useMemo } from 'react';\n\nimport {\n  isArgumentElement,\n  isNumericElement,\n  isSelectElement,\n  isTagElement,\n  isTemporalElement,\n} from '@/utils/guards';\nimport { parseICUMessage } from '@/utils/icu-tranform';\n\nimport { SelectVariableEditor } from './editors/SelectVariableEditor';\nimport { TagVariableEditor } from './editors/TagVariableEditor';\nimport { NumericVariableEditor } from './pickers/NumericVariableEditor';\nimport { TemporalVariablePicker } from './pickers/TemporalVariablePicker';\nimport styles from './VariableChip.module.css';\n\nconst TEMPORAL_ELEMENTS_FLAG = false;\n\nexport interface VariableChipProps {\n  name: string;\n  label: string;\n  icu: string;\n  nodeKey: NodeKey;\n}\n\n// TODO replace popover with portal below input field\n\nexport function VariableChip({ name, label, icu, nodeKey }: VariableChipProps) {\n  const [editor] = useLexicalComposerContext();\n\n  const handleUpdate = (value: string) => {\n    editor.update(() => {\n      const node = $getNodeByKey(nodeKey) as BeautifulMentionNode | null;\n      if (node) {\n        node.setData({ ...node.getData(), icu: value });\n      }\n    });\n  };\n\n  const element = useMemo(() => {\n    try {\n      const [part] = parseICUMessage(icu);\n      if (!part) throw new Error('No part found');\n      return part;\n    } catch (error) {\n      console.error(error);\n      throw new Error(`Invalid ICU: ${icu}`, { cause: error });\n    }\n  }, [icu]);\n\n  const isDisabled =\n    isArgumentElement(element) ||\n    (isTemporalElement(element) && !TEMPORAL_ELEMENTS_FLAG);\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger\n        render={\n          <button\n            className={clsx(styles.chip, isDisabled && styles.chipDisabled)}\n            data-icu={icu}\n            data-variable={name}\n            type=\"button\"\n          />\n        }\n      >\n        {/* <VariableIcon type={element.type} className=\"size-4\" /> */}\n        {label}\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner align=\"start\" side=\"bottom\" sideOffset={5}>\n          <Popover.Popup className={styles.popoverContent}>\n            {isNumericElement(element) && (\n              <NumericVariableEditor\n                element={element}\n                onUpdate={handleUpdate}\n              />\n            )}\n            {isSelectElement(element) && (\n              <SelectVariableEditor element={element} onUpdate={handleUpdate} />\n            )}\n            {TEMPORAL_ELEMENTS_FLAG && isTemporalElement(element) && (\n              <TemporalVariablePicker\n                element={element}\n                onUpdate={handleUpdate}\n              />\n            )}\n\n            {isTagElement(element) && (\n              <TagVariableEditor element={element} onUpdate={handleUpdate} />\n            )}\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"names":["Popover","$getNodeByKey","useLexicalComposerContext","clsx","useMemo","isArgumentElement","isNumericElement","isSelectElement","isTagElement","isTemporalElement","parseICUMessage","SelectVariableEditor","TagVariableEditor","NumericVariableEditor","TemporalVariablePicker","styles","TEMPORAL_ELEMENTS_FLAG","VariableChip","name","label","icu","nodeKey","editor","handleUpdate","value","update","node","setData","getData","element","part","Error","error","console","cause","isDisabled","Root","Trigger","render","button","className","chip","chipDisabled","data-icu","data-variable","type","Portal","Positioner","align","side","sideOffset","Popup","popoverContent","onUpdate"],"mappings":"AAAA;;AAEA,SAASA,OAAO,QAAQ,yBAAyB;AAEjD,SAASC,aAAa,QAAQ,uCAAuC;AACrE,SAASC,yBAAyB,QAAQ,oEAAoE;AAC9G,OAAOC,UAAU,OAAO;AAExB,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZC,iBAAiB,QACZ,iBAAiB;AACxB,SAASC,eAAe,QAAQ,uBAAuB;AAEvD,SAASC,oBAAoB,QAAQ,iCAAiC;AACtE,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,qBAAqB,QAAQ,kCAAkC;AACxE,SAASC,sBAAsB,QAAQ,mCAAmC;AAC1E,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,yBAAyB;AAS/B,qDAAqD;AAErD,OAAO,SAASC,aAAa,EAAEC,IAAI,EAAEC,KAAK,EAAEC,GAAG,EAAEC,OAAO,EAAqB;IAC3E,MAAM,CAACC,OAAO,GAAGpB;IAEjB,MAAMqB,eAAe,CAACC;QACpBF,OAAOG,MAAM,CAAC;YACZ,MAAMC,OAAOzB,cAAcoB;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CAAC;oBAAE,GAAGD,KAAKE,OAAO,EAAE;oBAAER,KAAKI;gBAAM;YAC/C;QACF;IACF;IAEA,MAAMK,UAAUzB,QAAQ;QACtB,IAAI;YACF,MAAM,CAAC0B,KAAK,GAAGpB,gBAAgBU;YAC/B,IAAI,CAACU,MAAM,MAAM,IAAIC,MAAM;YAC3B,OAAOD;QACT,EAAE,OAAOE,OAAO;YACdC,QAAQD,KAAK,CAACA;YACd,MAAM,IAAID,MAAM,CAAC,aAAa,EAAEX,KAAK,EAAE;gBAAEc,OAAOF;YAAM;QACxD;IACF,GAAG;QAACZ;KAAI;IAER,MAAMe,aACJ9B,kBAAkBwB,YACjBpB,kBAAkBoB,YAAY,CAACb;IAElC,qBACE,MAAChB,QAAQoC,IAAI;;0BACX,KAACpC,QAAQqC,OAAO;gBACdC,sBACE,KAACC;oBACCC,WAAWrC,KAAKY,OAAO0B,IAAI,EAAEN,cAAcpB,OAAO2B,YAAY;oBAC9DC,YAAUvB;oBACVwB,iBAAe1B;oBACf2B,MAAK;;0BAKR1B;;0BAEH,KAACnB,QAAQ8C,MAAM;0BACb,cAAA,KAAC9C,QAAQ+C,UAAU;oBAACC,OAAM;oBAAQC,MAAK;oBAASC,YAAY;8BAC1D,cAAA,MAAClD,QAAQmD,KAAK;wBAACX,WAAWzB,OAAOqC,cAAc;;4BAC5C9C,iBAAiBuB,0BAChB,KAAChB;gCACCgB,SAASA;gCACTwB,UAAU9B;;4BAGbhB,gBAAgBsB,0BACf,KAAClB;gCAAqBkB,SAASA;gCAASwB,UAAU9B;;4BAEnDP,0BAA0BP,kBAAkBoB,0BAC3C,KAACf;gCACCe,SAASA;gCACTwB,UAAU9B;;4BAIbf,aAAaqB,0BACZ,KAACjB;gCAAkBiB,SAASA;gCAASwB,UAAU9B;;;;;;;;AAO7D"}

package/dist/components/inputs/variables/VariableChip.module.css

@@ -20,7 +20,7 @@
 .popoverContent {
   z-index: 50;
   display: grid;
-  transform-origin: var(--radix-hover-card-content-transform-origin);
+  transform-origin: var(--transform-origin);
   overflow: clip;
   border-radius: var(--style-radius-m);
   border: 1px solid var(--theme-border-color);
@@ -35,11 +35,11 @@
   display: none;
 }
 
-.popoverContent[data-state="open"] {
+.popoverContent[data-open] {
   animation: popoverIn 150ms ease-out;
 }
 
-.popoverContent[data-state="closed"] {
+.popoverContent[data-closed] {
   animation: popoverOut 150ms ease-in;
 }
 

package/dist/components/inputs/variables/VariableSuggestion.d.ts

@@ -0,0 +1,4 @@
+import type { BeautifulMentionsMenuItemProps, BeautifulMentionsMenuProps } from 'lexical-beautiful-mentions';
+export declare const MentionMenu: import("react").ForwardRefExoticComponent<Omit<BeautifulMentionsMenuProps, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+export declare const MentionMenuItem: import("react").ForwardRefExoticComponent<Omit<BeautifulMentionsMenuItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+//# sourceMappingURL=VariableSuggestion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableSuggestion.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/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/inputs/variables/VariableSuggestion.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './VariableSuggestion.module.css';
+export const MentionMenu = /*#__PURE__*/ forwardRef(({ loading: _, ...props }, ref)=>/*#__PURE__*/ _jsx("ul", {
+        ...props,
+        className: styles.list,
+        ref: ref
+    }));
+export const MentionMenuItem = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx("li", {
+        "aria-selected": props.selected,
+        className: clsx(styles.item, props.selected && styles.itemSelected),
+        onClick: props.onClick,
+        onKeyDown: props.onKeyDown,
+        onMouseDown: props.onMouseDown,
+        onMouseEnter: props.onMouseEnter,
+        ref: ref,
+        // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: standard WAI-ARIA listbox/option pattern
+        role: "option",
+        tabIndex: -1,
+        children: typeof props.item.data?.label === 'string' ? props.item.data.label : props.item.displayValue
+    }));
+
+//# sourceMappingURL=VariableSuggestion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/inputs/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/inputs/variables/editors/PluralVariableEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PluralVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7C,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,2CAuK3B"}
+{"version":3,"file":"PluralVariableEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7C,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/variables/editors/PluralVariableEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from '@base-ui/react/popover';
 import { TYPE } from '@formatjs/icu-messageformat-parser';
 import { IconX } from '@tabler/icons-react';
-import { Popover } from 'radix-ui';
 import { Fragment, useImperativeHandle, useMemo } from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { parseICUMessage, serializeICUMessage } from '../../../../utils/icu-tranform';
@@ -121,66 +121,68 @@ export function PluralVariableEditor({ variableName, element, ref }) {
                                 children: "Add Option"
                             }),
                             /*#__PURE__*/ _jsx(Popover.Portal, {
-                                children: /*#__PURE__*/ _jsxs(Popover.Content, {
-                                    className: styles.popoverContent,
+                                children: /*#__PURE__*/ _jsx(Popover.Positioner, {
                                     sideOffset: 4,
-                                    children: [
-                                        /*#__PURE__*/ _jsx("div", {
-                                            className: styles.optionsList,
-                                            children: NAMED_PLURAL_OPTIONS.filter((option)=>options.fields.every((field)=>field.name !== option)).map((option)=>/*#__PURE__*/ _jsx(Popover.Close, {
-                                                    className: styles.optionItem,
-                                                    onClick: ()=>{
-                                                        // TODO ensure the fields are always in the same order as staticPluralOptions
-                                                        options.append({
-                                                            name: option,
-                                                            content: ''
-                                                        }, {
-                                                            shouldFocus: true
-                                                        });
-                                                    },
-                                                    children: option
-                                                }, option))
-                                        }),
-                                        /*#__PURE__*/ _jsxs("div", {
-                                            className: styles.customInputGroup,
-                                            children: [
-                                                /*#__PURE__*/ _jsx("label", {
-                                                    htmlFor: "customValue",
-                                                    children: "custom"
-                                                }),
-                                                /*#__PURE__*/ _jsx(Controller, {
-                                                    control: control,
-                                                    name: "customValue",
-                                                    render: ({ field })=>/*#__PURE__*/ _jsx("input", {
-                                                            className: styles.customInput,
-                                                            min: 0,
-                                                            onChange: ({ currentTarget: { value } })=>{
-                                                                const number = Number(value);
-                                                                if (Number.isNaN(number)) return;
-                                                                if (number < 0) return;
-                                                                field.onChange(number);
-                                                            },
-                                                            onKeyDown: (e)=>{
-                                                                if (e.key !== 'Enter') return;
-                                                                if (field.value === undefined) return;
-                                                                const isUnique = !options.fields.some((existingField)=>existingField.name === `=${field.value}`);
-                                                                if (!isUnique) return; // TODO maybe show error?
-                                                                options.append({
-                                                                    name: `=${field.value}`,
-                                                                    content: ''
-                                                                }, {
-                                                                    shouldFocus: true
-                                                                });
-                                                                field.onChange(undefined);
-                                                            },
-                                                            placeholder: "=0",
-                                                            type: "numeric",
-                                                            value: field.value ?? ''
-                                                        })
-                                                })
-                                            ]
-                                        })
-                                    ]
+                                    children: /*#__PURE__*/ _jsxs(Popover.Popup, {
+                                        className: styles.popoverContent,
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: styles.optionsList,
+                                                children: NAMED_PLURAL_OPTIONS.filter((option)=>options.fields.every((field)=>field.name !== option)).map((option)=>/*#__PURE__*/ _jsx(Popover.Close, {
+                                                        className: styles.optionItem,
+                                                        onClick: ()=>{
+                                                            // TODO ensure the fields are always in the same order as staticPluralOptions
+                                                            options.append({
+                                                                name: option,
+                                                                content: ''
+                                                            }, {
+                                                                shouldFocus: true
+                                                            });
+                                                        },
+                                                        children: option
+                                                    }, option))
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: styles.customInputGroup,
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("label", {
+                                                        htmlFor: "customValue",
+                                                        children: "custom"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Controller, {
+                                                        control: control,
+                                                        name: "customValue",
+                                                        render: ({ field })=>/*#__PURE__*/ _jsx("input", {
+                                                                className: styles.customInput,
+                                                                min: 0,
+                                                                onChange: ({ currentTarget: { value } })=>{
+                                                                    const number = Number(value);
+                                                                    if (Number.isNaN(number)) return;
+                                                                    if (number < 0) return;
+                                                                    field.onChange(number);
+                                                                },
+                                                                onKeyDown: (e)=>{
+                                                                    if (e.key !== 'Enter') return;
+                                                                    if (field.value === undefined) return;
+                                                                    const isUnique = !options.fields.some((existingField)=>existingField.name === `=${field.value}`);
+                                                                    if (!isUnique) return; // TODO maybe show error?
+                                                                    options.append({
+                                                                        name: `=${field.value}`,
+                                                                        content: ''
+                                                                    }, {
+                                                                        shouldFocus: true
+                                                                    });
+                                                                    field.onChange(undefined);
+                                                                },
+                                                                placeholder: "=0",
+                                                                type: "numeric",
+                                                                value: field.value ?? ''
+                                                            })
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
                                 })
                             })
                         ]