@cratis/components 2.6.0 → 2.6.2

package/dist/cjs/CommandForm/fields/CalendarField.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var commands = require('@cratis/arc.react/commands');
 var calendar = require('primereact/calendar');
+var useOverlayZIndex = require('../../useOverlayZIndex.js');
 
 /**
  * A date (or date-time) picker field bound to a `Date | null` property on a
@@ -17,7 +18,12 @@ var calendar = require('primereact/calendar');
  *                minDate={new Date()} />
  * ```
  */
-const CalendarField = commands.asCommandFormField((props) => (jsxRuntime.jsx(calendar.Calendar, { value: props.value, onChange: (e) => props.onChange(e.value ?? null), onBlur: props.onBlur, invalid: props.invalid, placeholder: props.placeholder, dateFormat: props.dateFormat, showIcon: props.showIcon, showTime: props.showTime, hourFormat: props.hourFormat, minDate: props.minDate, maxDate: props.maxDate, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
+const CalendarField = commands.asCommandFormField((props) => {
+    // Same overlay treatment as the Dropdown wrapper: the panel must escape
+    // dialog scroll containers and stay above modal dialogs.
+    useOverlayZIndex.useOverlayZIndex('p-datepicker');
+    return (jsxRuntime.jsx(calendar.Calendar, { value: props.value, onChange: (e) => props.onChange(e.value ?? null), onBlur: props.onBlur, invalid: props.invalid, placeholder: props.placeholder, dateFormat: props.dateFormat, showIcon: props.showIcon, showTime: props.showTime, hourFormat: props.hourFormat, minDate: props.minDate, maxDate: props.maxDate, appendTo: document.body, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }));
+}, {
     defaultValue: null,
     extractValue: (e) => e instanceof Date ? e : null
 });

package/dist/cjs/CommandForm/fields/CalendarField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarField.js","sources":["../../../../CommandForm/fields/CalendarField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","Calendar"],"mappings":";;;;;;AA6CA;;;;;;;;;;;;AAYG;AACI,MAAM,aAAa,GAAGA,2BAAkB,CAC3C,CAAC,KAAK,MACFC,cAAA,CAACC,iBAAQ,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAqC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,EACpF,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK,CAAC,YAAY,IAAI,GAAG,CAAC,GAAG;AACzD,CAAA;;;;"}
+{"version":3,"file":"CalendarField.js","sources":["../../../../CommandForm/fields/CalendarField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","useOverlayZIndex","_jsx","Calendar"],"mappings":";;;;;;;AA8CA;;;;;;;;;;;;AAYG;MACU,aAAa,GAAGA,2BAAkB,CAC3C,CAAC,KAAK,KAAI;;;IAGNC,iCAAgB,CAAC,cAAc,CAAC;AAEhC,IAAA,QACIC,cAAA,CAACC,iBAAQ,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAqC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,EACpF,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,QAAQ,CAAC,IAAI,EACvB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B;AAEV,CAAC,EACD;AACI,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK,CAAC,YAAY,IAAI,GAAG,CAAC,GAAG;AACzD,CAAA;;;;"}

package/dist/cjs/CommandForm/fields/DropdownField.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var dropdown = require('primereact/dropdown');
 var commands = require('@cratis/arc.react/commands');
+var Dropdown = require('../../Dropdown/Dropdown.js');
 
 /**
  * A single-select dropdown field bound to a `string` or `number` property
@@ -11,6 +11,9 @@ var commands = require('@cratis/arc.react/commands');
  * holds the bound value and which one holds the visible label. See
  * {@link InputTextField} for the full `value={c => c.prop}` binding model.
  *
+ * Renders through the library's own {@link Dropdown} wrapper so the panel
+ * escapes dialog scroll containers and stays above modal dialogs.
+ *
  * ```tsx
  * <DropdownField value={c => c.country}
  *                options={countries}
@@ -19,7 +22,7 @@ var commands = require('@cratis/arc.react/commands');
  *                title="Country" />
  * ```
  */
-const DropdownField = commands.asCommandFormField((props) => (jsxRuntime.jsx(dropdown.Dropdown, { value: props.value, onChange: (e) => props.onChange(e.value), onBlur: props.onBlur, options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, invalid: props.invalid, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
+const DropdownField = commands.asCommandFormField((props) => (jsxRuntime.jsx(Dropdown.Dropdown, { value: props.value, onChange: (e) => props.onChange(e.value), onBlur: props.onBlur, options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, invalid: props.invalid, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
     defaultValue: '',
     extractValue: (e) => e
 });

package/dist/cjs/CommandForm/fields/DropdownField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownField.js","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","Dropdown"],"mappings":";;;;;;AAoCA;;;;;;;;;;;;;;AAcG;AACI,MAAM,aAAa,GAAGA,2BAAkB,CAC3C,CAAC,KAAK,MACFC,eAACC,iBAAQ,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;;;"}
+{"version":3,"file":"DropdownField.js","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","Dropdown"],"mappings":";;;;;;AAqCA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,aAAa,GAAGA,2BAAkB,CAC3C,CAAC,KAAK,MACFC,eAACC,iBAAQ,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;;;"}

package/dist/cjs/CommandForm/fields/MultiSelectField.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var commands = require('@cratis/arc.react/commands');
 var multiselect = require('primereact/multiselect');
+var useOverlayZIndex = require('../../useOverlayZIndex.js');
 
 /**
  * A multi-select dropdown field bound to an `Array<string | number>`
@@ -16,7 +17,12 @@ var multiselect = require('primereact/multiselect');
  *                   display="chip" filter title="Tags" />
  * ```
  */
-const MultiSelectField = commands.asCommandFormField((props) => (jsxRuntime.jsx(multiselect.MultiSelect, { value: props.value, onChange: (e) => props.onChange(e.value ?? []), onBlur: props.onBlur, options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, display: props.display, maxSelectedLabels: props.maxSelectedLabels, filter: props.filter, showClear: props.showClear, invalid: props.invalid, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
+const MultiSelectField = commands.asCommandFormField((props) => {
+    // Same overlay treatment as the Dropdown wrapper: the panel must escape
+    // dialog scroll containers and stay above modal dialogs.
+    useOverlayZIndex.useOverlayZIndex('p-multiselect-panel');
+    return (jsxRuntime.jsx(multiselect.MultiSelect, { value: props.value, onChange: (e) => props.onChange(e.value ?? []), onBlur: props.onBlur, options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, display: props.display, maxSelectedLabels: props.maxSelectedLabels, filter: props.filter, showClear: props.showClear, invalid: props.invalid, appendTo: document.body, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }));
+}, {
     defaultValue: [],
     extractValue: (e) => {
         if (!Array.isArray(e)) {

package/dist/cjs/CommandForm/fields/MultiSelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectField.js","sources":["../../../../CommandForm/fields/MultiSelectField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","_jsx","MultiSelect"],"mappings":";;;;;;AAgDA;;;;;;;;;;;AAWG;AACI,MAAM,gBAAgB,GAAGA,2BAAkB,CAC9C,CAAC,KAAK,MACFC,eAACC,uBAAW,EAAA,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAgD,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,EAC7F,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAI;QACzB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;AACnB,YAAA,OAAO,EAAE;QACb;AAEA,QAAA,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAA8B,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,CAAC;IAC5G;AACH,CAAA;;;;"}
+{"version":3,"file":"MultiSelectField.js","sources":["../../../../CommandForm/fields/MultiSelectField.tsx"],"sourcesContent":[null],"names":["asCommandFormField","useOverlayZIndex","_jsx","MultiSelect"],"mappings":";;;;;;;AAiDA;;;;;;;;;;;AAWG;MACU,gBAAgB,GAAGA,2BAAkB,CAC9C,CAAC,KAAK,KAAI;;;IAGNC,iCAAgB,CAAC,qBAAqB,CAAC;AAEvC,IAAA,QACIC,cAAA,CAACC,uBAAW,EAAA,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAgD,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,EAC7F,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,QAAQ,CAAC,IAAI,EACvB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B;AAEV,CAAC,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAI;QACzB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;AACnB,YAAA,OAAO,EAAE;QACb;AAEA,QAAA,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAA8B,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,CAAC;IAC5G;AACH,CAAA;;;;"}

package/dist/cjs/useOverlayZIndex.js

@@ -5,19 +5,31 @@ var React = require('react');
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 /**
- * Hook to force a specific z-index on PrimeReact overlay components.
- * This is a workaround for PrimeReact's automatic z-index calculation
- * which can cause overlays to appear behind dialogs.
+ * Hook that keeps a PrimeReact overlay panel at or above a minimum z-index.
+ *
+ * PrimeReact computes overlay z-indexes relative to whatever is currently open — in an application that
+ * configures the PrimeReact z-index tiers this already stacks panels above dialogs correctly. This hook is
+ * the safety net for applications that do not: when PrimeReact's computed value is *below* the floor, the
+ * panel is raised to it.
+ *
+ * It is strictly raise-only. It must never lower a value PrimeReact computed, for two reasons: the computed
+ * value is what stacks the panel above an open dialog's mask, and PrimeReact's `ZIndexUtils.clear()`
+ * un-registers an overlay by reading its inline z-index back — overwriting it with a different number makes
+ * that lookup miss, leaks the registry entry, and every dialog opened afterwards escalates its mask's
+ * z-index further above the panels until dropdowns render behind the very dialogs that host them.
  *
  * @param className - The CSS class name to target (e.g., 'location-autocomplete-overlay')
- * @param zIndex - The desired z-index value (default: 10000)
+ * @param minimumZIndex - The floor the panel must not sit below (default: 10000)
  */
-function useOverlayZIndex(className, zIndex = 10000) {
+function useOverlayZIndex(className, minimumZIndex = 10000) {
     React.useEffect(() => {
         const observer = new MutationObserver(() => {
             const panel = document.querySelector(`.${className}`);
-            if (panel instanceof HTMLElement && panel.style.zIndex !== zIndex.toString()) {
-                panel.style.zIndex = zIndex.toString();
+            if (!(panel instanceof HTMLElement))
+                return;
+            const raised = raisedOverlayZIndex(panel.style.zIndex, minimumZIndex);
+            if (raised !== undefined) {
+                panel.style.zIndex = raised;
             }
         });
         observer.observe(document.body, {
@@ -27,8 +39,27 @@ function useOverlayZIndex(className, zIndex = 10000) {
             attributeFilter: ['style']
         });
         return () => observer.disconnect();
-    }, [className, zIndex]);
+    }, [className, minimumZIndex]);
+}
+/**
+ * Decides whether an overlay panel's inline z-index must be raised to the floor.
+ *
+ * Raise-only by design: a value PrimeReact computed at or above the floor is left untouched, both because
+ * it is what stacks the panel above an open dialog and because PrimeReact reads it back to un-register the
+ * overlay when it closes.
+ *
+ * @param currentZIndex - The panel's current inline z-index value, possibly empty.
+ * @param minimumZIndex - The floor the panel must not sit below.
+ * @returns The value to assign, or undefined when the current value must be left alone.
+ */
+function raisedOverlayZIndex(currentZIndex, minimumZIndex) {
+    const current = Number.parseInt(currentZIndex, 10);
+    if (Number.isNaN(current) || current < minimumZIndex) {
+        return minimumZIndex.toString();
+    }
+    return undefined;
 }
 
+exports.raisedOverlayZIndex = raisedOverlayZIndex;
 exports.useOverlayZIndex = useOverlayZIndex;
 //# sourceMappingURL=useOverlayZIndex.js.map

package/dist/cjs/useOverlayZIndex.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverlayZIndex.js","sources":["../../useOverlayZIndex.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;AAOG;SACa,gBAAgB,CAAC,SAAiB,EAAE,SAAiB,KAAK,EAAA;IACtEA,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAAC;AACrD,YAAA,IAAI,KAAK,YAAY,WAAW,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,EAAE,EAAE;gBAC1E,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE;YAC1C;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC5B,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO;AAC5B,SAAA,CAAC;AAEF,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACtC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAC3B;;;;"}
+{"version":3,"file":"useOverlayZIndex.js","sources":["../../useOverlayZIndex.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;;;;;;;;;;AAgBG;SACa,gBAAgB,CAAC,SAAiB,EAAE,gBAAwB,KAAK,EAAA;IAC7EA,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAAC;AACrD,YAAA,IAAI,EAAE,KAAK,YAAY,WAAW,CAAC;gBAAE;AAErC,YAAA,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,aAAa,CAAC;AACrE,YAAA,IAAI,MAAM,KAAK,SAAS,EAAE;AACtB,gBAAA,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;YAC/B;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC5B,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO;AAC5B,SAAA,CAAC;AAEF,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACtC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAClC;AAEA;;;;;;;;;;AAUG;AACG,SAAU,mBAAmB,CAAC,aAAqB,EAAE,aAAqB,EAAA;IAC5E,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC;IAClD,IAAI,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,OAAO,GAAG,aAAa,EAAE;AAClD,QAAA,OAAO,aAAa,CAAC,QAAQ,EAAE;IACnC;AAEA,IAAA,OAAO,SAAS;AACpB;;;;;"}

package/dist/esm/CommandForm/fields/CalendarField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarField.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/CalendarField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAsB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACnF,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,2BAA4B,SAAQ,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IAExE,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAGzB,OAAO,CAAC,EAAE,IAAI,CAAC;IAGf,OAAO,CAAC,EAAE,IAAI,CAAC;IAGf,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,EAAE,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAGzB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAGvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAeD,eAAO,MAAM,aAAa,+JAwBzB,CAAC"}
+{"version":3,"file":"CalendarField.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/CalendarField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAsB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACnF,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,2BAA4B,SAAQ,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;IAExE,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAGzB,OAAO,CAAC,EAAE,IAAI,CAAC;IAGf,OAAO,CAAC,EAAE,IAAI,CAAC;IAGf,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,EAAE,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAGzB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAGvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAeD,eAAO,MAAM,aAAa,+JA+BzB,CAAC"}

package/dist/esm/CommandForm/fields/CalendarField.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { asCommandFormField } from '@cratis/arc.react/commands';
 import { Calendar } from 'primereact/calendar';
+import { useOverlayZIndex } from '../../useOverlayZIndex.js';
 
 /**
  * A date (or date-time) picker field bound to a `Date | null` property on a
@@ -15,7 +16,12 @@ import { Calendar } from 'primereact/calendar';
  *                minDate={new Date()} />
  * ```
  */
-const CalendarField = asCommandFormField((props) => (jsx(Calendar, { value: props.value, onChange: (e) => props.onChange(e.value ?? null), onBlur: props.onBlur, invalid: props.invalid, placeholder: props.placeholder, dateFormat: props.dateFormat, showIcon: props.showIcon, showTime: props.showTime, hourFormat: props.hourFormat, minDate: props.minDate, maxDate: props.maxDate, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
+const CalendarField = asCommandFormField((props) => {
+    // Same overlay treatment as the Dropdown wrapper: the panel must escape
+    // dialog scroll containers and stay above modal dialogs.
+    useOverlayZIndex('p-datepicker');
+    return (jsx(Calendar, { value: props.value, onChange: (e) => props.onChange(e.value ?? null), onBlur: props.onBlur, invalid: props.invalid, placeholder: props.placeholder, dateFormat: props.dateFormat, showIcon: props.showIcon, showTime: props.showTime, hourFormat: props.hourFormat, minDate: props.minDate, maxDate: props.maxDate, appendTo: document.body, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }));
+}, {
     defaultValue: null,
     extractValue: (e) => e instanceof Date ? e : null
 });

package/dist/esm/CommandForm/fields/CalendarField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarField.js","sources":["../../../../CommandForm/fields/CalendarField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AA6CA;;;;;;;;;;;;AAYG;AACI,MAAM,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,MACFA,GAAA,CAAC,QAAQ,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAqC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,EACpF,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK,CAAC,YAAY,IAAI,GAAG,CAAC,GAAG;AACzD,CAAA;;;;"}
+{"version":3,"file":"CalendarField.js","sources":["../../../../CommandForm/fields/CalendarField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AA8CA;;;;;;;;;;;;AAYG;MACU,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,KAAI;;;IAGN,gBAAgB,CAAC,cAAc,CAAC;AAEhC,IAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAqC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,EACpF,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,QAAQ,CAAC,IAAI,EACvB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B;AAEV,CAAC,EACD;AACI,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK,CAAC,YAAY,IAAI,GAAG,CAAC,GAAG;AACzD,CAAA;;;;"}

package/dist/esm/CommandForm/fields/DropdownField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownField.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAKnF,UAAU,2BAA4B,SAAQ,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IAE5E,OAAO,EAAE,KAAK,CAAC;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,CAAC;IAG3C,WAAW,EAAE,MAAM,CAAC;IAGpB,WAAW,EAAE,MAAM,CAAC;IAGpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,EAAE,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAGzB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAGvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAiBD,eAAO,MAAM,aAAa,+JAqBzB,CAAC"}
+{"version":3,"file":"DropdownField.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAMnF,UAAU,2BAA4B,SAAQ,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC;IAE5E,OAAO,EAAE,KAAK,CAAC;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,CAAC;IAG3C,WAAW,EAAE,MAAM,CAAC;IAGpB,WAAW,EAAE,MAAM,CAAC;IAGpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,EAAE,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAGzB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAGvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAoBD,eAAO,MAAM,aAAa,+JAqBzB,CAAC"}

package/dist/esm/CommandForm/fields/DropdownField.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import { Dropdown } from 'primereact/dropdown';
 import { asCommandFormField } from '@cratis/arc.react/commands';
+import { Dropdown } from '../../Dropdown/Dropdown.js';
 
 /**
  * A single-select dropdown field bound to a `string` or `number` property
@@ -9,6 +9,9 @@ import { asCommandFormField } from '@cratis/arc.react/commands';
  * holds the bound value and which one holds the visible label. See
  * {@link InputTextField} for the full `value={c => c.prop}` binding model.
  *
+ * Renders through the library's own {@link Dropdown} wrapper so the panel
+ * escapes dialog scroll containers and stays above modal dialogs.
+ *
  * ```tsx
  * <DropdownField value={c => c.country}
  *                options={countries}

package/dist/esm/CommandForm/fields/DropdownField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownField.js","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAoCA;;;;;;;;;;;;;;AAcG;AACI,MAAM,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,MACFA,IAAC,QAAQ,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;;;"}
+{"version":3,"file":"DropdownField.js","sources":["../../../../CommandForm/fields/DropdownField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAqCA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,MACFA,IAAC,QAAQ,EAAA,EACL,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EACxC,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAK;AACjC,CAAA;;;;"}

package/dist/esm/CommandForm/fields/MultiSelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectField.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/MultiSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAsB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACnF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,8BAA+B,SAAQ,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAEtF,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAGxC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAG3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAG5B,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAG1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAcD,eAAO,MAAM,gBAAgB,kKA+B5B,CAAC"}
+{"version":3,"file":"MultiSelectField.d.ts","sourceRoot":"","sources":["../../../../CommandForm/fields/MultiSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAsB,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACnF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,8BAA+B,SAAQ,iBAAiB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAEtF,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAGxC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAG3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,MAAM,CAAC,EAAE,OAAO,CAAC;IAGjB,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAG5B,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAG1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAcD,eAAO,MAAM,gBAAgB,kKAsC5B,CAAC"}

package/dist/esm/CommandForm/fields/MultiSelectField.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { asCommandFormField } from '@cratis/arc.react/commands';
 import { MultiSelect } from 'primereact/multiselect';
+import { useOverlayZIndex } from '../../useOverlayZIndex.js';
 
 /**
  * A multi-select dropdown field bound to an `Array<string | number>`
@@ -14,7 +15,12 @@ import { MultiSelect } from 'primereact/multiselect';
  *                   display="chip" filter title="Tags" />
  * ```
  */
-const MultiSelectField = asCommandFormField((props) => (jsx(MultiSelect, { value: props.value, onChange: (e) => props.onChange(e.value ?? []), onBlur: props.onBlur, options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, display: props.display, maxSelectedLabels: props.maxSelectedLabels, filter: props.filter, showClear: props.showClear, invalid: props.invalid, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled })), {
+const MultiSelectField = asCommandFormField((props) => {
+    // Same overlay treatment as the Dropdown wrapper: the panel must escape
+    // dialog scroll containers and stay above modal dialogs.
+    useOverlayZIndex('p-multiselect-panel');
+    return (jsx(MultiSelect, { value: props.value, onChange: (e) => props.onChange(e.value ?? []), onBlur: props.onBlur, options: props.options, optionValue: props.optionValue, optionLabel: props.optionLabel, placeholder: props.placeholder, display: props.display, maxSelectedLabels: props.maxSelectedLabels, filter: props.filter, showClear: props.showClear, invalid: props.invalid, appendTo: document.body, className: props.className ? `w-full ${props.className}` : 'w-full', pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled }));
+}, {
     defaultValue: [],
     extractValue: (e) => {
         if (!Array.isArray(e)) {

package/dist/esm/CommandForm/fields/MultiSelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectField.js","sources":["../../../../CommandForm/fields/MultiSelectField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAgDA;;;;;;;;;;;AAWG;AACI,MAAM,gBAAgB,GAAG,kBAAkB,CAC9C,CAAC,KAAK,MACFA,IAAC,WAAW,EAAA,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAgD,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,EAC7F,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAI;QACzB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;AACnB,YAAA,OAAO,EAAE;QACb;AAEA,QAAA,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAA8B,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,CAAC;IAC5G;AACH,CAAA;;;;"}
+{"version":3,"file":"MultiSelectField.js","sources":["../../../../CommandForm/fields/MultiSelectField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAiDA;;;;;;;;;;;AAWG;MACU,gBAAgB,GAAG,kBAAkB,CAC9C,CAAC,KAAK,KAAI;;;IAGN,gBAAgB,CAAC,qBAAqB,CAAC;AAEvC,IAAA,QACIA,GAAA,CAAC,WAAW,EAAA,EACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAgD,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,EAC7F,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,QAAQ,CAAC,IAAI,EACvB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B;AAEV,CAAC,EACD;AACI,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,YAAY,EAAE,CAAC,CAAU,KAAI;QACzB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;AACnB,YAAA,OAAO,EAAE;QACb;AAEA,QAAA,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAA8B,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,CAAC;IAC5G;AACH,CAAA;;;;"}