@asteby/metacore-runtime-react 28.3.3 → 28.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @asteby/metacore-runtime-react
2
2
 
3
+ ## 28.3.4
4
+
5
+ ### Patch Changes
6
+
7
+ - 85ba41b: El popover del selector de íconos ya no se corta dentro de modales altos: su
8
+ alto se limita al espacio disponible que mide Radix (min 24rem / available
9
+ height) con layout flex (buscador fijo + lista que scrollea), abriendo hacia
10
+ abajo.
11
+
3
12
  ## 28.3.3
4
13
 
5
14
  ### Patch Changes
@@ -1 +1 @@
1
- {"version":3,"file":"icon-picker-field.d.ts","sourceRoot":"","sources":["../src/icon-picker-field.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AAQD,sFAAsF;AACtF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAE3D;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BAgJ/E"}
1
+ {"version":3,"file":"icon-picker-field.d.ts","sourceRoot":"","sources":["../src/icon-picker-field.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AAQD,sFAAsF;AACtF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAE3D;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BAsJ/E"}
@@ -52,10 +52,20 @@ export function IconPickerField({ field, value, onChange }) {
52
52
  setQuery('');
53
53
  setLimit(PAGE);
54
54
  }
55
- }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: field.key, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, className: "w-full justify-between font-normal", children: [_jsx("span", { className: "flex min-w-0 items-center gap-2", children: selected ? (_jsxs(_Fragment, { children: [_jsx(DynamicIcon, { name: selected, className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: selected })] })) : (_jsx("span", { className: "text-muted-foreground", children: "Selecciona un \u00EDcono\u2026" })) }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", align: "start", children: [_jsx("div", { className: "p-2", children: _jsx(Input, { autoFocus: true, value: query, onChange: (e) => {
55
+ }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: field.key, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, className: "w-full justify-between font-normal", children: [_jsx("span", { className: "flex min-w-0 items-center gap-2", children: selected ? (_jsxs(_Fragment, { children: [_jsx(DynamicIcon, { name: selected, className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: selected })] })) : (_jsx("span", { className: "text-muted-foreground", children: "Selecciona un \u00EDcono\u2026" })) }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent
56
+ // Cap the panel to the space Radix measured between the
57
+ // trigger and the viewport edge so it can NEVER overflow
58
+ // off-screen (the old fixed max-h clipped inside tall
59
+ // modals). Prefer opening downward; flip only if needed.
60
+ , {
61
+ // Cap the panel to the space Radix measured between the
62
+ // trigger and the viewport edge so it can NEVER overflow
63
+ // off-screen (the old fixed max-h clipped inside tall
64
+ // modals). Prefer opening downward; flip only if needed.
65
+ className: "flex max-h-[min(24rem,var(--radix-popover-content-available-height))] w-[--radix-popover-trigger-width] flex-col overflow-hidden p-0", align: "start", side: "bottom", sideOffset: 4, children: [_jsx("div", { className: "shrink-0 p-2", children: _jsx(Input, { autoFocus: true, value: query, onChange: (e) => {
56
66
  setQuery(e.target.value);
57
67
  setLimit(PAGE);
58
- }, placeholder: "Buscar \u00EDcono...", "aria-label": "Buscar \u00EDcono" }) }), _jsxs("div", { className: "max-h-64 overflow-y-auto", role: "listbox", "aria-label": "\u00CDconos", onScroll: (e) => {
68
+ }, placeholder: "Buscar \u00EDcono...", "aria-label": "Buscar \u00EDcono" }) }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", role: "listbox", "aria-label": "\u00CDconos", onScroll: (e) => {
59
69
  const el = e.currentTarget;
60
70
  // Near the bottom → reveal the next page.
61
71
  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 24 &&
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asteby/metacore-runtime-react",
3
- "version": "28.3.3",
3
+ "version": "28.3.4",
4
4
  "description": "React runtime for metacore hosts — renders addon contributions dynamically",
5
5
  "repository": {
6
6
  "type": "git",
@@ -129,10 +129,16 @@ export function IconPickerField({ field, value, onChange }: IconPickerFieldProps
129
129
  </Button>
130
130
  </PopoverTrigger>
131
131
  <PopoverContent
132
- className="w-[--radix-popover-trigger-width] p-0"
132
+ // Cap the panel to the space Radix measured between the
133
+ // trigger and the viewport edge so it can NEVER overflow
134
+ // off-screen (the old fixed max-h clipped inside tall
135
+ // modals). Prefer opening downward; flip only if needed.
136
+ className="flex max-h-[min(24rem,var(--radix-popover-content-available-height))] w-[--radix-popover-trigger-width] flex-col overflow-hidden p-0"
133
137
  align="start"
138
+ side="bottom"
139
+ sideOffset={4}
134
140
  >
135
- <div className="p-2">
141
+ <div className="shrink-0 p-2">
136
142
  <Input
137
143
  autoFocus
138
144
  value={query}
@@ -145,7 +151,7 @@ export function IconPickerField({ field, value, onChange }: IconPickerFieldProps
145
151
  />
146
152
  </div>
147
153
  <div
148
- className="max-h-64 overflow-y-auto"
154
+ className="min-h-0 flex-1 overflow-y-auto"
149
155
  role="listbox"
150
156
  aria-label="Íconos"
151
157
  onScroll={(e: React.UIEvent<HTMLDivElement>) => {