@axzydev/axzy_ui_system 1.3.6 → 1.4.1

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.3.6",
+  "version": "1.4.1",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/molecules/date-picker/datePicker.tsx

@@ -292,6 +292,7 @@ export default function ITDatePicker({
         createPortal(
           <div
             ref={panelRef}
+            data-it-floating="true"
             className={clsx(
               calendarClassName,
               range ? "w-[320px]" : "w-[280px]"

package/src/components/molecules/dropdown-menu/dropdown-menu.tsx

@@ -172,6 +172,7 @@ export default function ITDropdownMenu({
         createPortal(
           <div
             ref={panelRef}
+            data-it-floating="true"
             role="menu"
             aria-label={triggerLabel}
             style={panelStyle}

package/src/components/molecules/multi-select/multi-select.tsx

@@ -323,6 +323,7 @@ export default function ITMultiSelect({
           createPortal(
             <div
               ref={panelRef}
+              data-it-floating="true"
               role="listbox"
               aria-multiselectable="true"
               style={panelStyle}

package/src/components/molecules/search-select/search-select.tsx

@@ -283,6 +283,7 @@ export default function ITSearchSelect({
           createPortal(
             <div
               ref={panelRef}
+              data-it-floating="true"
               style={panelStyle}
               className="bg-white dark:bg-slate-900 border border-secondary-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top"
             >

package/src/components/molecules/time-picker/timePicker.tsx

@@ -217,6 +217,7 @@ export default function ITTimePicker({
       {isOpen && !disabled && createPortal(
         <div 
           ref={dropdownRef}
+          data-it-floating="true"
           className="bg-white border border-secondary-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
           style={panelStyle}
         >

package/src/components/organisms/dialog/dialog.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta } from '@storybook/react';
 import ITDialog from '@/components/organisms/dialog/dialog';
+import ITSearchSelect from '@/components/molecules/search-select/search-select';
 import { useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
 import ITButton from '@/components/atoms/button/button';
 
 const meta = {
@@ -76,3 +78,49 @@ export const LongContent: any = {
     className: 'w-[600px]',
   } as any,
 };
+
+// Dialog opened on mount but controlled, so an unexpected close is observable.
+const DialogWithSearchSelect = () => {
+  const [fruit, setFruit] = useState('');
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <ITDialog isOpen={isOpen} onClose={() => setIsOpen(false)} title="Fruta favorita">
+      <ITSearchSelect
+        label="Fruta"
+        placeholder="Busca una fruta..."
+        options={[
+          { value: 'apple', label: 'Apple' },
+          { value: 'banana', label: 'Banana' },
+        ]}
+        value={fruit}
+        onChange={(next) => setFruit(String(next))}
+      />
+    </ITDialog>
+  );
+};
+
+/**
+ * Regression test: floating panels (selects, pickers, menus) are portaled to
+ * `<body>`, so they live outside the dialog DOM. Picking an option there must
+ * not count as a click outside the dialog.
+ *
+ * Note the whole dialog and its dropdown are portaled, so they are queried
+ * from `document.body` instead of the story canvas.
+ */
+export const FloatingPanelInsideDialog: any = {
+  render: () => <DialogWithSearchSelect />,
+  play: async () => {
+    const view = within(document.body);
+
+    const input = await view.findByPlaceholderText('Busca una fruta...');
+    await userEvent.click(input);
+
+    await userEvent.click(await view.findByText('Banana'));
+
+    // The dialog must still be mounted after picking an option.
+    await expect(view.getByText('Fruta favorita')).toBeVisible();
+    await expect((input as HTMLInputElement).value).toBe('Banana');
+  },
+};
+

package/src/hooks/useClickOutside.ts

@@ -14,6 +14,12 @@ const useClickOutside = (
       // child overlay or its contents.
       if (clickedDialog && clickedDialog !== currentDialog) return;
 
+      // Floating panels (select/date/time pickers, menus) are portaled to
+      // <body>, so they sit outside the DOM of the dialog/drawer that opened
+      // them. Picking an option there must not count as an outside click.
+      const clickedFloating = target?.closest("[data-it-floating]");
+      if (clickedFloating && !ref.current?.contains(clickedFloating)) return;
+
       if (ref.current && !ref.current.contains(event.target as Node)) {
         callback();
       }

package/src/hooks/useFloatingPanel.ts

@@ -57,7 +57,10 @@ export function useFloatingPanel(
     const flipAbove = spaceBelow < panelHeight + offset && spaceAbove > spaceBelow;
 
     const width = matchWidth ? rect.width : undefined;
-    const panelWidth = panelRef.current?.offsetWidth ?? width ?? 0;
+    // With matchWidth the final width is the anchor's. Measuring the panel
+    // here would read its pre-style width (a full-width block on first
+    // paint) and clamp `left` to the viewport edge until the next update.
+    const panelWidth = width ?? panelRef.current?.offsetWidth ?? 0;
     let left =
       align === "end" && panelWidth
         ? rect.right - panelWidth

package/src/showcases/FeedbackShowcases.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import {
   ITDialog,
   ITButton,
+  ITSearchSelect,
   ITSlideToggle,
   ITToast,
   ITInput,
@@ -18,8 +19,9 @@ import { ShowcaseLayout } from "./ShowcaseLayout";
 export const DialogShowcase = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [useFormHeader, setUseFormHeader] = useState(true);
+  const [auditor, setAuditor] = useState("");
 
-  const code = `<ITDialog\n  isOpen={${isOpen}}\n  onClose={() => setIsOpen(false)}\n  title="Confirmación de Auditoría"\n  useFormHeader={${useFormHeader}}\n>\n  <p>¿Estás seguro de registrar esta auditoría?</p>\n</ITDialog>`;
+  const code = `<ITDialog\n  isOpen={${isOpen}}\n  onClose={() => setIsOpen(false)}\n  title="Confirmación de Auditoría"\n  useFormHeader={${useFormHeader}}\n>\n  <p>¿Estás seguro de registrar esta auditoría?</p>\n  <ITSearchSelect placeholder="Selecciona un auditor" ... />\n</ITDialog>`;
 
   return (
     <ShowcaseLayout
@@ -39,6 +41,19 @@ export const DialogShowcase = () => {
               <p className="text-sm text-slate-600 dark:text-slate-300">
                 Se guardará un registro inmutable en los logs de la blockchain corporativa. Esta acción es irreversible.
               </p>
+              {/* Los paneles flotantes (selects, pickers, menús) se renderizan en
+                  un portal fuera del diálogo: elegir una opción no debe cerrarlo. */}
+              <ITSearchSelect
+                label="Auditor responsable"
+                placeholder="Busca un auditor..."
+                options={[
+                  { value: "ana", label: "Ana Torres" },
+                  { value: "luis", label: "Luis Paredes" },
+                  { value: "marta", label: "Marta Ruiz" },
+                ]}
+                value={auditor}
+                onChange={(next) => setAuditor(String(next))}
+              />
               <div className="flex justify-end gap-3 pt-4 border-t">
                 <ITButton label="Cancelar" variant="ghost" onClick={() => setIsOpen(false)} />
                 <ITButton label="Autorizar" color="success" onClick={() => { alert("Transacción firmada!"); setIsOpen(false); }} />