@scripso-homepad/ui 0.4.38 → 0.4.40

package/dist/web/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, TdHTMLAttributes, HTMLAttributes, ThHTMLAttributes, ButtonHTMLAttributes, RefObject } from 'react';
+import { ReactNode, TdHTMLAttributes, HTMLAttributes, ThHTMLAttributes, ButtonHTMLAttributes, RefObject, PointerEvent, MouseEvent } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { ToasterProps } from 'sonner';
 export { toast } from 'sonner';
@@ -551,6 +551,17 @@ declare function useMediaQuery(query: string): boolean;
 type OutsideTarget<T extends HTMLElement> = RefObject<T | null> | Array<RefObject<T | null>>;
 declare function useOnClickOutside<T extends HTMLElement>(ref: OutsideTarget<T>, handler: () => void, enabled?: boolean): void;
 
+type BackdropDismissHandlers = {
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+};
+/**
+ * Dismiss only on a true outside click: pointer must both press and release
+ * on the backdrop. Dragging from inside the dialog and releasing outside
+ * must not close.
+ */
+declare function useBackdropDismiss(onDismiss: () => void, enabled?: boolean): BackdropDismissHandlers;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarCollapseIcon, SidebarExpandIcon, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
+export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarCollapseIcon, SidebarExpandIcon, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useBackdropDismiss, useMediaQuery, useOnClickOutside };

package/dist/web/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, TdHTMLAttributes, HTMLAttributes, ThHTMLAttributes, ButtonHTMLAttributes, RefObject } from 'react';
+import { ReactNode, TdHTMLAttributes, HTMLAttributes, ThHTMLAttributes, ButtonHTMLAttributes, RefObject, PointerEvent, MouseEvent } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { ToasterProps } from 'sonner';
 export { toast } from 'sonner';
@@ -551,6 +551,17 @@ declare function useMediaQuery(query: string): boolean;
 type OutsideTarget<T extends HTMLElement> = RefObject<T | null> | Array<RefObject<T | null>>;
 declare function useOnClickOutside<T extends HTMLElement>(ref: OutsideTarget<T>, handler: () => void, enabled?: boolean): void;
 
+type BackdropDismissHandlers = {
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+};
+/**
+ * Dismiss only on a true outside click: pointer must both press and release
+ * on the backdrop. Dragging from inside the dialog and releasing outside
+ * must not close.
+ */
+declare function useBackdropDismiss(onDismiss: () => void, enabled?: boolean): BackdropDismissHandlers;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarCollapseIcon, SidebarExpandIcon, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
+export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarCollapseIcon, SidebarExpandIcon, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useBackdropDismiss, useMediaQuery, useOnClickOutside };

package/dist/web/index.js

@@ -30394,6 +30394,26 @@ function TableIconText({ icon, children, className }) {
 
 // src/web/components/Modal.tsx
 var import_react_dom2 = __toESM(require_react_dom(), 1);
+function useBackdropDismiss(onDismiss, enabled = true) {
+  const pointerDownOnBackdropRef = useRef(false);
+  const onPointerDown = useCallback(
+    (event) => {
+      pointerDownOnBackdropRef.current = enabled && event.target === event.currentTarget;
+    },
+    [enabled]
+  );
+  const onClick = useCallback(
+    (event) => {
+      const shouldDismiss = enabled && pointerDownOnBackdropRef.current && event.target === event.currentTarget;
+      pointerDownOnBackdropRef.current = false;
+      if (shouldDismiss) {
+        onDismiss();
+      }
+    },
+    [enabled, onDismiss]
+  );
+  return { onPointerDown, onClick };
+}
 var footerAlignClasses = {
   left: "justify-start",
   center: "justify-center",
@@ -30422,6 +30442,7 @@ function Modal({
   contentClassName,
   buttonClassName
 }) {
+  const backdropDismiss = useBackdropDismiss(onCancel, closeOnBackdrop);
   useEffect(() => {
     if (!open) {
       return;
@@ -30450,11 +30471,8 @@ function Modal({
     "div",
     {
       className: "fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40",
-      onClick: closeOnBackdrop ? (event) => {
-        if (event.target === event.currentTarget) {
-          onCancel();
-        }
-      } : void 0,
+      onPointerDown: backdropDismiss.onPointerDown,
+      onClick: backdropDismiss.onClick,
       role: "presentation",
       children: /* @__PURE__ */ jsxs(
         "div",
@@ -30467,9 +30485,6 @@ function Modal({
             "flex max-h-[min(90dvh,calc(100dvh-2rem))] w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6",
             containerClassName
           ),
-          onClick: (event) => {
-            event.stopPropagation();
-          },
           children: [
             /* @__PURE__ */ jsxs("header", { className: cn("flex shrink-0", icon ? "items-center gap-2.5" : void 0), children: [
               icon ? /* @__PURE__ */ jsx(
@@ -30589,6 +30604,7 @@ function Drawer({
   const [isPresent, setIsPresent] = useState(open);
   const [isAnimatedIn, setIsAnimatedIn] = useState(false);
   const [isTransformSettled, setIsTransformSettled] = useState(open);
+  const backdropDismiss = useBackdropDismiss(onClose);
   useEffect(() => {
     if (open) {
       setIsPresent(true);
@@ -30655,7 +30671,8 @@ function Drawer({
               "absolute inset-0 z-0 cursor-pointer bg-storm-gray-850/40 backdrop-blur-[12px] transition-opacity duration-300 ease-in-out",
               isAnimatedIn ? "opacity-100" : "opacity-0"
             ),
-            onClick: onClose
+            onPointerDown: backdropDismiss.onPointerDown,
+            onClick: backdropDismiss.onClick
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -30991,6 +31008,7 @@ function ConfirmModal({
   containerClassName,
   buttonClassName
 }) {
+  const backdropDismiss = useBackdropDismiss(onCancel, closeOnBackdrop);
   useEffect(() => {
     if (!open) {
       return;
@@ -31016,7 +31034,8 @@ function ConfirmModal({
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md bg-storm-gray-850/40",
-      onClick: closeOnBackdrop ? onCancel : void 0,
+      onPointerDown: backdropDismiss.onPointerDown,
+      onClick: backdropDismiss.onClick,
       role: "presentation",
       children: /* @__PURE__ */ jsxs(
         "div",
@@ -31029,9 +31048,6 @@ function ConfirmModal({
             "flex w-full max-w-md flex-col gap-8 rounded-3xl bg-white p-6 opacity-100 md:p-8",
             containerClassName
           ),
-          onClick: (event) => {
-            event.stopPropagation();
-          },
           children: [
             /* @__PURE__ */ jsxs("header", { className: "flex flex-col items-center gap-3 text-center", children: [
               icon ? /* @__PURE__ */ jsx("div", { className: "flex size-14 items-center justify-center rounded-2xl bg-storm-gray-50 text-storm-gray-500", children: icon }) : null,
@@ -31144,6 +31160,6 @@ react-dom/cjs/react-dom.development.js:
    *)
 */
 
-export { AppHeader, Badge, BellIcon, BuildingIcon, BuildingSelect, ConfirmModal, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, DataTable, Drawer, HistoryTimeline, Modal, Pagination, Sidebar, SidebarCollapseIcon, SidebarExpandIcon, SidebarMobileHeader, SidebarNavItem, SidebarUserCard, StatusBadge, Table, TableActionButton, TableActionsCell, TableActionsMenu, TableBody, TableCell, TableHead, TableHeader, TableIconText, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, TableRow, TableRowStatusActions, TableScrollArea, TableSortIcon, TableStatusActionsCell, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
+export { AppHeader, Badge, BellIcon, BuildingIcon, BuildingSelect, ConfirmModal, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, DataTable, Drawer, HistoryTimeline, Modal, Pagination, Sidebar, SidebarCollapseIcon, SidebarExpandIcon, SidebarMobileHeader, SidebarNavItem, SidebarUserCard, StatusBadge, Table, TableActionButton, TableActionsCell, TableActionsMenu, TableBody, TableCell, TableHead, TableHeader, TableIconText, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, TableRow, TableRowStatusActions, TableScrollArea, TableSortIcon, TableStatusActionsCell, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useBackdropDismiss, useMediaQuery, useOnClickOutside };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map