@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/Modal.tsx

@@ -21,6 +21,7 @@ import {
   createInteractOutside,
   ariaHideOutside,
   FocusScope,
+  useUNSAFE_PortalContext,
 } from '@proyecto-viviana/solidaria'
 import {
   type RenderChildren,
@@ -51,6 +52,9 @@ interface InternalModalContextValue {
 
 const InternalModalContext = createContext<InternalModalContextValue | null>(null)
 
+// Stack of visible modals, used to ensure only the top-most modal dismisses on Escape/outside interaction.
+const visibleModals: Array<() => Element | null> = []
+
 // ============================================
 // TYPES
 // ============================================
@@ -90,6 +94,7 @@ export interface ModalProps extends ModalOverlayProps {}
 // Re-export from contexts for backwards compatibility
 export { OverlayTriggerStateContext, type OverlayTriggerState } from './contexts'
 export { useOverlayTriggerState } from './contexts'
+export const ModalContext = OverlayTriggerStateContext;
 
 // ============================================
 // MODAL OVERLAY COMPONENT
@@ -197,6 +202,8 @@ export function ModalOverlay(props: ModalOverlayProps): JSX.Element {
     isDismissable: local.isDismissable,
     isKeyboardDismissDisabled: local.isKeyboardDismissDisabled,
   }
+  const portalContext = useUNSAFE_PortalContext()
+  const portalContainer = () => portalContext.getContainer?.() ?? undefined
 
   // Resolve children - handle both static JSX and render functions
   // IMPORTANT: We access props.children directly (not local.children) to preserve
@@ -211,7 +218,7 @@ export function ModalOverlay(props: ModalOverlayProps): JSX.Element {
 
   return (
     <Show when={isOpen() || local.isExiting}>
-      <Portal>
+      <Portal mount={portalContainer()}>
         <OverlayTriggerStateContext.Provider value={state}>
           <InternalModalContext.Provider value={internalModalContext}>
             <div
@@ -319,6 +326,7 @@ function ModalContent(props: ModalProps & { internalContext: InternalModalContex
   ])
 
   let modalRef!: HTMLDivElement
+  const modalRefAccessor = () => modalRef ?? null
 
   // Get state from parent OverlayTriggerStateContext (provided by ModalOverlay)
   const parentState = useContext(OverlayTriggerStateContext)
@@ -333,6 +341,24 @@ function ModalContent(props: ModalProps & { internalContext: InternalModalContex
     return parentState?.isOpen ?? false
   }
 
+  // Keep this modal in a global stack so nested modals dismiss in top-down order.
+  createEffect(() => {
+    if (!isOpen()) return
+
+    if (!visibleModals.includes(modalRefAccessor)) {
+      visibleModals.push(modalRefAccessor)
+    }
+
+    onCleanup(() => {
+      const index = visibleModals.indexOf(modalRefAccessor)
+      if (index >= 0) {
+        visibleModals.splice(index, 1)
+      }
+    })
+  })
+
+  const isTopMostModal = () => visibleModals[visibleModals.length - 1] === modalRefAccessor
+
   const close = () => {
     if (local.isOpen !== undefined) {
       local.onOpenChange?.(false)
@@ -360,9 +386,11 @@ function ModalContent(props: ModalProps & { internalContext: InternalModalContex
     if (!isOpen() || !isDismissable()) return
 
     createInteractOutside({
-      ref: () => modalRef ?? null,
+      ref: modalRefAccessor,
       onInteractOutside: () => {
-        close()
+        if (isTopMostModal()) {
+          close()
+        }
       },
       isDisabled: false,
     })
@@ -373,7 +401,7 @@ function ModalContent(props: ModalProps & { internalContext: InternalModalContex
     if (!isOpen() || isKeyboardDismissDisabled()) return
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (e.key === 'Escape' && !e.isComposing && isTopMostModal()) {
         e.preventDefault()
         e.stopPropagation()
         close()

package/src/NumberField.tsx

@@ -140,9 +140,11 @@ interface NumberFieldContextValue {
   isInvalid: boolean;
   isRequired: boolean;
   isReadOnly: boolean;
+  setInputRef: (el: HTMLInputElement) => void;
 }
 
 export const NumberFieldContext = createContext<NumberFieldContextValue | null>(null);
+export const NumberFieldStateContext = createContext<NumberFieldState | null>(null);
 
 // ============================================
 // COMPONENTS
@@ -156,7 +158,30 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
     props,
     ['children', 'class', 'style', 'slot'],
     ['value', 'defaultValue', 'onChange', 'minValue', 'maxValue', 'step', 'locale', 'formatOptions'],
-    ['label', 'aria-label', 'aria-labelledby', 'aria-describedby', 'isDisabled', 'isReadOnly', 'isRequired', 'isInvalid', 'description', 'errorMessage', 'id', 'autoFocus', 'name']
+    [
+      'label',
+      'aria-label',
+      'aria-labelledby',
+      'aria-describedby',
+      'isDisabled',
+      'isReadOnly',
+      'isRequired',
+      'isInvalid',
+      'description',
+      'errorMessage',
+      'id',
+      'autoFocus',
+      'name',
+      'form',
+      'onFocus',
+      'onBlur',
+      'onFocusChange',
+      'onKeyDown',
+      'onKeyUp',
+      'onPaste',
+      'onCopy',
+      'onCut',
+    ]
   );
 
   // Create number field state
@@ -195,17 +220,83 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
 
   // Ref for the input
   let inputRef: HTMLInputElement | undefined;
+  const setInputRef = (el: HTMLInputElement) => {
+    inputRef = el;
+  };
 
   // Create number field aria props
-  const {
-    labelProps,
-    groupProps,
-    inputProps,
-    incrementButtonProps,
-    decrementButtonProps,
-    descriptionProps,
-    errorMessageProps,
-  } = createNumberField(ariaProps, state, () => inputRef ?? null);
+  const numberFieldAria = createNumberField(
+    {
+      get label() {
+        return ariaProps.label;
+      },
+      get 'aria-label'() {
+        return ariaProps['aria-label'];
+      },
+      get 'aria-labelledby'() {
+        return ariaProps['aria-labelledby'];
+      },
+      get 'aria-describedby'() {
+        return ariaProps['aria-describedby'];
+      },
+      get isDisabled() {
+        return ariaProps.isDisabled;
+      },
+      get isReadOnly() {
+        return ariaProps.isReadOnly;
+      },
+      get isRequired() {
+        return ariaProps.isRequired;
+      },
+      get isInvalid() {
+        return ariaProps.isInvalid;
+      },
+      get description() {
+        return ariaProps.description;
+      },
+      get errorMessage() {
+        return ariaProps.errorMessage;
+      },
+      get id() {
+        return ariaProps.id;
+      },
+      get autoFocus() {
+        return ariaProps.autoFocus;
+      },
+      get name() {
+        return ariaProps.name;
+      },
+      get form() {
+        return ariaProps.form;
+      },
+      get onFocus() {
+        return ariaProps.onFocus;
+      },
+      get onBlur() {
+        return ariaProps.onBlur;
+      },
+      get onFocusChange() {
+        return ariaProps.onFocusChange;
+      },
+      get onKeyDown() {
+        return ariaProps.onKeyDown;
+      },
+      get onKeyUp() {
+        return ariaProps.onKeyUp;
+      },
+      get onPaste() {
+        return ariaProps.onPaste;
+      },
+      get onCopy() {
+        return ariaProps.onCopy;
+      },
+      get onCut() {
+        return ariaProps.onCut;
+      },
+    },
+    state,
+    () => inputRef ?? null
+  );
 
   // Render props values
   const renderValues = createMemo<NumberFieldRenderProps>(() => ({
@@ -230,35 +321,60 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
   // Filter DOM props
   const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
 
+  const contextValue: NumberFieldContextValue = {
+    state,
+    get inputProps() {
+      return numberFieldAria.inputProps;
+    },
+    get incrementButtonProps() {
+      return numberFieldAria.incrementButtonProps;
+    },
+    get decrementButtonProps() {
+      return numberFieldAria.decrementButtonProps;
+    },
+    get labelProps() {
+      return numberFieldAria.labelProps;
+    },
+    get groupProps() {
+      return numberFieldAria.groupProps;
+    },
+    get descriptionProps() {
+      return numberFieldAria.descriptionProps;
+    },
+    get errorMessageProps() {
+      return numberFieldAria.errorMessageProps;
+    },
+    get isDisabled() {
+      return ariaProps.isDisabled ?? false;
+    },
+    get isInvalid() {
+      return ariaProps.isInvalid ?? false;
+    },
+    get isRequired() {
+      return ariaProps.isRequired ?? false;
+    },
+    get isReadOnly() {
+      return ariaProps.isReadOnly ?? false;
+    },
+    setInputRef,
+  };
+
   return (
-    <NumberFieldContext.Provider
-      value={{
-        state,
-        inputProps,
-        incrementButtonProps,
-        decrementButtonProps,
-        labelProps,
-        groupProps,
-        descriptionProps,
-        errorMessageProps,
-        isDisabled: ariaProps.isDisabled ?? false,
-        isInvalid: ariaProps.isInvalid ?? false,
-        isRequired: ariaProps.isRequired ?? false,
-        isReadOnly: ariaProps.isReadOnly ?? false,
-      }}
-    >
-      <div
-        {...domProps()}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        data-disabled={ariaProps.isDisabled || undefined}
-        data-invalid={ariaProps.isInvalid || undefined}
-        data-required={ariaProps.isRequired || undefined}
-        data-readonly={ariaProps.isReadOnly || undefined}
-      >
-        {renderProps.renderChildren()}
-      </div>
-    </NumberFieldContext.Provider>
+    <NumberFieldStateContext.Provider value={state}>
+      <NumberFieldContext.Provider value={contextValue}>
+        <div
+          {...domProps()}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-disabled={ariaProps.isDisabled || undefined}
+          data-invalid={ariaProps.isInvalid || undefined}
+          data-required={ariaProps.isRequired || undefined}
+          data-readonly={ariaProps.isReadOnly || undefined}
+        >
+          {renderProps.renderChildren()}
+        </div>
+      </NumberFieldContext.Provider>
+    </NumberFieldStateContext.Provider>
   );
 }
 
@@ -312,7 +428,7 @@ export function NumberFieldGroup(props: { children?: JSX.Element; class?: string
  * The input element for a number field.
  */
 export function NumberFieldInput(props: NumberFieldInputProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot']);
 
   const context = useContext(NumberFieldContext);
   if (!context) {
@@ -364,6 +480,8 @@ export function NumberFieldInput(props: NumberFieldInputProps): JSX.Element {
 
   return (
     <input
+      {...domProps}
+      ref={context.setInputRef}
       {...cleanInputProps()}
       {...cleanFocusProps()}
       {...cleanHoverProps()}
@@ -382,7 +500,7 @@ export function NumberFieldInput(props: NumberFieldInputProps): JSX.Element {
  * The increment button for a number field.
  */
 export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
 
   const context = useContext(NumberFieldContext);
   if (!context) {
@@ -395,7 +513,7 @@ export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProp
       return context.isDisabled || !context.state.canIncrement();
     },
     onPress: () => {
-      context.state.increment();
+      (context.incrementButtonProps.onClick as ((e?: MouseEvent) => void) | undefined)?.();
     },
   });
 
@@ -442,6 +560,7 @@ export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProp
 
   return (
     <button
+      {...domProps}
       {...cleanButtonProps()}
       {...cleanPressProps()}
       {...cleanHoverProps()}
@@ -460,7 +579,7 @@ export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProp
  * The decrement button for a number field.
  */
 export function NumberFieldDecrementButton(props: NumberFieldDecrementButtonProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
 
   const context = useContext(NumberFieldContext);
   if (!context) {
@@ -473,7 +592,7 @@ export function NumberFieldDecrementButton(props: NumberFieldDecrementButtonProp
       return context.isDisabled || !context.state.canDecrement();
     },
     onPress: () => {
-      context.state.decrement();
+      (context.decrementButtonProps.onClick as ((e?: MouseEvent) => void) | undefined)?.();
     },
   });
 
@@ -520,6 +639,7 @@ export function NumberFieldDecrementButton(props: NumberFieldDecrementButtonProp
 
   return (
     <button
+      {...domProps}
       {...cleanButtonProps()}
       {...cleanPressProps()}
       {...cleanHoverProps()}