npm - @hexdspace/react - Versions diffs - 0.1.41 → 0.1.42 - Mend

@hexdspace/react 0.1.41 → 0.1.42

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.

Files changed (3) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -474,6 +474,7 @@ interface DialogOptions {
     modal: boolean;
     dismissible: boolean;
     zIndex: number;
+    resolveOnEnter?: boolean;
 }
 interface DialogInstance {
     id: string;
@@ -977,12 +978,13 @@ interface DialogProps<TPayload = unknown> extends Omit<React.HTMLAttributes<HTML
     onDismiss?: () => void;
     onResolve?: (result?: unknown) => void;
     onOpenChange?: (open: boolean) => void;
+    resolveOnEnter?: boolean;
     showClose?: boolean;
     closeLabel?: string;
     open?: boolean;
     defaultOpen?: boolean;
 }
-declare function Dialog<TPayload>({ id, template, payload, trigger, modal, dismissible, zIndex, maxWidthPx, onDismiss, onResolve, onOpenChange, showClose, closeLabel, open, defaultOpen, chrome, className, style, ...props }: DialogProps<TPayload>): react_jsx_runtime.JSX.Element;
+declare function Dialog<TPayload>({ id, template, payload, trigger, modal, dismissible, zIndex, maxWidthPx, onDismiss, onResolve, onOpenChange, resolveOnEnter, showClose, closeLabel, open, defaultOpen, chrome, className, style, onKeyDown, ...props }: DialogProps<TPayload>): react_jsx_runtime.JSX.Element;
 type ControlLikeProps = {
     id?: string;
@@ -1090,6 +1092,7 @@ type DropdownMenuContentProps = Omit<React.ComponentPropsWithoutRef<typeof Dropd
     className?: string;
     style?: React.CSSProperties;
     ref?: React.Ref<HTMLDivElement>;
+    onEntryFocus?: (event: Event) => void;
 };
 declare const dropdownMenuItemVariants: (props?: ({
     inset?: boolean | null | undefined;
@@ -1101,7 +1104,6 @@ interface DropdownMenuProps extends VariantProps<typeof dropdownMenuContentVaria
     children: React.ReactNode;
     open?: boolean;
     defaultOpen?: boolean;
-    keepMounted?: boolean;
     onOpenChange?: (open: boolean) => void;
     hoverOpen?: boolean;
     hoverCloseDelayMs?: number;
@@ -1118,7 +1120,7 @@ interface DropdownMenuProps extends VariantProps<typeof dropdownMenuContentVaria
     style?: React.CSSProperties;
     contentProps?: DropdownMenuContentProps;
 }
-declare function DropdownMenu({ trigger, children, open, defaultOpen, keepMounted, onOpenChange, hoverOpen, hoverCloseDelayMs, modal, side, align, sideOffset, alignOffset, collisionPadding, portalContainer, ariaLabel, ariaLabelledBy, chrome, orientation, className, style, contentProps, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenu({ trigger, children, open, defaultOpen, onOpenChange, hoverOpen, hoverCloseDelayMs, modal, side, align, sideOffset, alignOffset, collisionPadding, portalContainer, ariaLabel, ariaLabelledBy, chrome, orientation, className, style, contentProps, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
 interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu$1.Item>, Omit<VariantProps<typeof dropdownMenuItemVariants>, 'orientation'> {
 }
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.js CHANGED Viewed

@@ -1686,6 +1686,7 @@ function Dialog({
   onDismiss,
   onResolve,
   onOpenChange,
+  resolveOnEnter = true,
   showClose = true,
   closeLabel = "Close dialog",
   open: open2,
@@ -1693,6 +1694,7 @@ function Dialog({
   chrome,
   className,
   style,
+  onKeyDown,
   ...props
 }) {
   const fallbackId = React3.useId();
@@ -1734,6 +1736,39 @@ function Dialog({
   const overlayClassName = cn(dialogOverlayClass);
   const surfaceClassName = cn(dialogSurfaceVariants({ chrome }));
   const panelRef = React3.useRef(null);
+  const handleKeyDown = React3.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || !resolveOnEnter) return;
+      const isComposing = "isComposing" in event.nativeEvent ? event.nativeEvent.isComposing : false;
+      if (event.key !== "Enter" || isComposing || event.altKey || event.ctrlKey || event.metaKey) return;
+      if (event.shiftKey) return;
+      const target = event.target;
+      if (target) {
+        if (target.isContentEditable) return;
+        const tagName = target.tagName;
+        if (tagName === "TEXTAREA" || tagName === "SELECT") return;
+        if (target instanceof HTMLInputElement) {
+          const inputType = target.type;
+          if (!["button", "submit", "reset", "checkbox", "radio"].includes(inputType)) return;
+        }
+      }
+      const defaultAction = panelRef.current?.querySelector("[data-dialog-default]");
+      if (defaultAction) {
+        const isDisabled = defaultAction instanceof HTMLButtonElement && defaultAction.disabled || defaultAction.getAttribute("aria-disabled") === "true";
+        if (!isDisabled) {
+          event.preventDefault();
+          defaultAction.click();
+        }
+        return;
+      }
+      if (onResolve) {
+        event.preventDefault();
+        handleResolve(payload);
+      }
+    },
+    [handleResolve, onKeyDown, onResolve, payload, resolveOnEnter]
+  );
   return /* @__PURE__ */ jsxs3(DialogPrimitive.Root, { open: open2, defaultOpen, onOpenChange: handleOpenChange, modal, children: [
     trigger ? /* @__PURE__ */ jsx7(DialogPrimitive.Trigger, { asChild: true, children: trigger }) : null,
     /* @__PURE__ */ jsx7(DialogPrimitive.Portal, { forceMount: true, children: /* @__PURE__ */ jsx7(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
@@ -1776,6 +1811,7 @@ function Dialog({
               panelRef.current?.focus();
             });
           },
+          onKeyDown: handleKeyDown,
           ...props,
           children: /* @__PURE__ */ jsx7(
             motion.div,
@@ -1864,7 +1900,15 @@ var ConfirmDialog = (props) => {
     p.message ? /* @__PURE__ */ jsx8(DialogPrimitive2.Description, { className: "mt-2 text-sm opacity-80", children: p.message }) : null,
     /* @__PURE__ */ jsxs4("div", { className: "mt-5 flex items-center justify-end gap-4", children: [
       /* @__PURE__ */ jsx8(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button, { variant: "secondary", children: p.cancelText ?? "Cancel" }) }),
-      /* @__PURE__ */ jsx8(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button, { variant: confirmVariant, onClick: () => props.onResolve?.({ confirmed: true }), children: p.confirmText ?? "Confirm" }) })
+      /* @__PURE__ */ jsx8(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx8(
+        Button,
+        {
+          variant: confirmVariant,
+          "data-dialog-default": true,
+          onClick: () => props.onResolve?.({ confirmed: true }),
+          children: p.confirmText ?? "Confirm"
+        }
+      ) })
     ] })
   ] });
 };
@@ -1948,7 +1992,7 @@ var OpenDialogUseCase = class {
   }
   async execute(cmd) {
     const id = uuid();
-    const options = cmd.options ?? getDefaultOptions();
+    const options = { ...getDefaultOptions(), ...cmd.options };
     if (!options.zIndex) {
       options.zIndex = 2e3;
     }
@@ -1967,7 +2011,8 @@ function getDefaultOptions() {
   return {
     modal: true,
     dismissible: true,
-    zIndex: 2500
+    zIndex: 2500,
+    resolveOnEnter: true
   };
 }
@@ -2120,6 +2165,7 @@ var DialogHost = () => {
         payload: dialog.payload,
         modal: dialog.options.modal,
         dismissible: dialog.options.dismissible,
+        resolveOnEnter: dialog.options.resolveOnEnter,
         zIndex: dialog.options.zIndex + index,
         open: !isClosing,
         onResolve: (result) => scheduleClose(dialog.id, "resolve", result),
@@ -4531,7 +4577,6 @@ function DropdownMenu({
   children,
   open: open2,
   defaultOpen,
-  keepMounted = false,
   onOpenChange,
   hoverOpen = false,
   hoverCloseDelayMs = 50,
@@ -4637,15 +4682,7 @@ function DropdownMenu({
   );
   const onPointerDownOutside = (event) => {
     restContentProps.onPointerDownOutside?.(event);
-    if (keepMounted) {
-      const target = event.target;
-      const isTriggerEvent = target instanceof Node && triggerRef.current?.contains(target);
-      if (!resolvedOpen || isTriggerEvent) {
-        event.preventDefault();
-      }
-    }
   };
-  const keepMountedClassName = keepMounted && !resolvedOpen ? "pointer-events-none" : void 0;
   const initialMotionState = {
     opacity: 0,
     scale: 0.98,
@@ -4658,22 +4695,12 @@ function DropdownMenu({
     x: 0,
     y: 0
   };
-  const closedMotionState = {
-    opacity: 0,
-    scale: 0.98,
-    x: "var(--menu-x)",
-    y: "var(--menu-y)"
-  };
-  const motionEase = keepMounted ? resolvedOpen ? "easeOut" : "easeIn" : "easeOut";
   const onInteractOutside = (event) => {
     restContentProps.onInteractOutside?.(event);
-    if (keepMounted) {
-      const target = event.target;
-      const isTriggerEvent = target instanceof Node && triggerRef.current?.contains(target);
-      if (!resolvedOpen || isTriggerEvent) {
-        event.preventDefault();
-      }
-    }
+  };
+  const onEntryFocus = (event) => {
+    restContentProps.onEntryFocus?.(event);
+    event.preventDefault();
   };
   const resolvedContentProps = hoverOpen ? {
     ...restContentProps,
@@ -4692,11 +4719,14 @@ function DropdownMenu({
       closeTimer.clear();
     },
     onPointerDownOutside,
+    onEntryFocus,
     onInteractOutside
   } : {
     ...restContentProps,
     onKeyDown: handleContentKeyDown,
-    ...keepMounted ? { onPointerDownOutside, onInteractOutside } : void 0
+    onEntryFocus,
+    onPointerDownOutside,
+    onInteractOutside
   };
   const contentNode = /* @__PURE__ */ jsx22(
     DropdownMenuPrimitive.Content,
@@ -4714,17 +4744,15 @@ function DropdownMenu({
       children: /* @__PURE__ */ jsx22(
         motion4.div,
         {
-          "aria-hidden": keepMounted ? !resolvedOpen : void 0,
           className: cn(
             dropdownMenuContentVariants({ chrome, orientation }),
-            keepMountedClassName,
             className,
             contentClassName
           ),
           ref: composedContentRef,
           initial: initialMotionState,
-          animate: keepMounted ? resolvedOpen ? openMotionState : closedMotionState : openMotionState,
-          exit: keepMounted ? void 0 : {
+          animate: openMotionState,
+          exit: {
             opacity: 0,
             scale: 0.98,
             x: "var(--menu-x)",
@@ -4733,7 +4761,7 @@ function DropdownMenu({
           },
           transition: {
             duration: motionDuration,
-            ease: motionEase
+            ease: "easeOut"
           },
           style: { ...style, ...contentStyle },
           children
@@ -4743,7 +4771,7 @@ function DropdownMenu({
   );
   return /* @__PURE__ */ jsx22(DropdownMenuOrientationContext.Provider, { value: resolvedItemsOrientation, children: /* @__PURE__ */ jsxs11(DropdownMenuPrimitive.Root, { open: resolvedOpen, onOpenChange: handleOpenChange, modal, children: [
     /* @__PURE__ */ jsx22(DropdownMenuPrimitive.Trigger, { asChild: true, children: resolvedTrigger }),
-    /* @__PURE__ */ jsx22(DropdownMenuPrimitive.Portal, { forceMount: true, container: portalContainer, children: keepMounted ? contentNode : /* @__PURE__ */ jsx22(AnimatePresence4, { children: resolvedOpen ? contentNode : null }) })
+    /* @__PURE__ */ jsx22(DropdownMenuPrimitive.Portal, { forceMount: true, container: portalContainer, children: /* @__PURE__ */ jsx22(AnimatePresence4, { children: resolvedOpen ? contentNode : null }) })
   ] }) });
 }
 var DropdownMenuItem = React13.forwardRef(

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",