sellmate-design-system-react 1.1.3 → 1.2.0

package/dist/components/SActionModal/SActionModal.d.ts

@@ -5,6 +5,7 @@ export interface SActionModalButton {
     color?: SButtonColor;
     outline?: boolean;
     size?: SButtonSize;
+    disabled?: boolean;
     onClick?: () => void;
 }
 export interface SActionModalProps {

package/dist/components/SActionModal/SActionModal.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, forwardRef, useState, useCallback, useRef, useContext } from 'react';
+import { createContext, forwardRef, useState, useRef, useCallback, useContext } from 'react';
 import * as RDialog from '@radix-ui/react-dialog';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
@@ -3087,6 +3087,7 @@ function SModalContainer({
   style
 }) {
   const [shaking, setShaking] = useState(false);
+  const contentRef = useRef(null);
   const [portalContainer, setPortalContainer] = useState(null);
   const triggerShake = useCallback(() => {
     setShaking(false);
@@ -3101,7 +3102,12 @@ function SModalContainer({
     /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed inset-0 z-[1001] flex items-center justify-center", children: /* @__PURE__ */ jsxs(
       RDialog.Content,
       {
+        ref: contentRef,
         className: "pointer-events-auto outline-none data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out",
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+          contentRef.current?.focus({ preventScroll: true });
+        },
         onEscapeKeyDown: guardClose,
         onPointerDownOutside: guardClose,
         onInteractOutside: guardClose,
@@ -3349,6 +3355,7 @@ function SActionModal({
                 color: button.color ?? "primary",
                 outline: button.outline,
                 size: button.size ?? "md",
+                disabled: button.disabled,
                 onClick: () => {
                   button.onClick?.();
                   onOpenChange?.(false);