@open-mercato/ui 0.6.3-develop.3651.1.d3a548a5f1 → 0.6.3-develop.3653.1.b8558737ae
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.
|
@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef(({ className, children, elevated, ...prop
|
|
|
42
42
|
ref,
|
|
43
43
|
"data-dialog-content": "",
|
|
44
44
|
className: cn(
|
|
45
|
-
"fixed inset-x-0 bottom-0 flex
|
|
45
|
+
"fixed inset-x-0 bottom-0 flex max-h-[90vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg",
|
|
46
46
|
elevated ? "z-modal-elevated" : "z-modal",
|
|
47
47
|
"sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border",
|
|
48
48
|
"focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/primitives/dialog.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {\n /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).\n * Use when this dialog is opened from inside a popover so it isn't occluded. */\n elevated?: boolean\n }\n>(({ className, elevated, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',\n elevated ? 'z-modal-elevated' : 'z-modal',\n className\n )}\n {...props}\n />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).\n * Set on dialogs that open from inside another popover (e.g. the SaveFilterDialog\n * inside the AdvancedFilterPanel popover) so they aren't hidden behind the popover. */\n elevated?: boolean\n }\n>(({ className, children, elevated, ...props }, ref) => {\n const t = useT()\n\n React.useEffect(() => {\n return () => {\n if (typeof window === 'undefined') return\n window.setTimeout(() => {\n if (document.querySelector('[data-dialog-content][data-state=\"open\"]')) return\n document.body.style.removeProperty('overflow')\n document.body.style.removeProperty('pointer-events')\n }, 0)\n }\n }, [])\n\n return (\n <DialogPortal>\n <DialogOverlay elevated={elevated} />\n <DialogPrimitive.Content\n ref={ref}\n data-dialog-content=\"\"\n className={cn(\n 'fixed inset-x-0 bottom-0 flex
|
|
5
|
-
"mappings": ";AAwBE,cAqCI,YArCJ;AAtBF,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,YAAY;AAErB,MAAM,SAAS,gBAAgB;AAE/B,MAAM,gBAAgB,gBAAgB;AAEtC,MAAM,eAAe,gBAAgB;AAErC,MAAM,cAAc,gBAAgB;AAEpC,MAAM,gBAAgB,MAAM,WAO1B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QACpC;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,WAAW,qBAAqB;AAAA,MAChC;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,cAAc,cAAc,gBAAgB,QAAQ;AAEpD,MAAM,gBAAgB,MAAM,WAQ1B,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACtD,QAAM,IAAI,KAAK;AAEf,QAAM,UAAU,MAAM;AACpB,WAAO,MAAM;AACX,UAAI,OAAO,WAAW,YAAa;AACnC,aAAO,WAAW,MAAM;AACtB,YAAI,SAAS,cAAc,0CAA0C,EAAG;AACxE,iBAAS,KAAK,MAAM,eAAe,UAAU;AAC7C,iBAAS,KAAK,MAAM,eAAe,gBAAgB;AAAA,MACrD,GAAG,CAAC;AAAA,IACN;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,qBAAC,gBACC;AAAA,wBAAC,iBAAc,UAAoB;AAAA,IACnC;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,uBAAoB;AAAA,
|
|
4
|
+
"sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {\n /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).\n * Use when this dialog is opened from inside a popover so it isn't occluded. */\n elevated?: boolean\n }\n>(({ className, elevated, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',\n elevated ? 'z-modal-elevated' : 'z-modal',\n className\n )}\n {...props}\n />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).\n * Set on dialogs that open from inside another popover (e.g. the SaveFilterDialog\n * inside the AdvancedFilterPanel popover) so they aren't hidden behind the popover. */\n elevated?: boolean\n }\n>(({ className, children, elevated, ...props }, ref) => {\n const t = useT()\n\n React.useEffect(() => {\n return () => {\n if (typeof window === 'undefined') return\n window.setTimeout(() => {\n if (document.querySelector('[data-dialog-content][data-state=\"open\"]')) return\n document.body.style.removeProperty('overflow')\n document.body.style.removeProperty('pointer-events')\n }, 0)\n }\n }, [])\n\n return (\n <DialogPortal>\n <DialogOverlay elevated={elevated} />\n <DialogPrimitive.Content\n ref={ref}\n data-dialog-content=\"\"\n // Sizing: mobile uses a bottom-sheet (`fixed inset-x-0 bottom-0`) that resizes to\n // the form's content with a cap at 90% viewport height. The previous version forced\n // `min-h-[50vh]`, which made every short dialog (Quick deal, Add stage, Change\n // owner, etc.) render as a half-screen panel with an empty block below the form.\n // Desktop (`sm:`) already used `h-auto`/`min-h-0`, so it's unchanged here.\n className={cn(\n 'fixed inset-x-0 bottom-0 flex max-h-[90vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',\n elevated ? 'z-modal-elevated' : 'z-modal',\n 'sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border',\n 'focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out',\n className,\n )}\n {...props}\n >\n <DialogClose\n data-dialog-close=\"\"\n className=\"absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n aria-label={t('ui.dialog.close.ariaLabel', 'Close')}\n >\n <X className=\"h-4 w-4\" />\n </DialogClose>\n {children}\n </DialogPrimitive.Content>\n </DialogPortal>\n )\n})\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n {...props}\n />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-sm text-muted-foreground', className)}\n {...props}\n />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n"],
|
|
5
|
+
"mappings": ";AAwBE,cAqCI,YArCJ;AAtBF,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,YAAY;AAErB,MAAM,SAAS,gBAAgB;AAE/B,MAAM,gBAAgB,gBAAgB;AAEtC,MAAM,eAAe,gBAAgB;AAErC,MAAM,cAAc,gBAAgB;AAEpC,MAAM,gBAAgB,MAAM,WAO1B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QACpC;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,WAAW,qBAAqB;AAAA,MAChC;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,cAAc,cAAc,gBAAgB,QAAQ;AAEpD,MAAM,gBAAgB,MAAM,WAQ1B,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACtD,QAAM,IAAI,KAAK;AAEf,QAAM,UAAU,MAAM;AACpB,WAAO,MAAM;AACX,UAAI,OAAO,WAAW,YAAa;AACnC,aAAO,WAAW,MAAM;AACtB,YAAI,SAAS,cAAc,0CAA0C,EAAG;AACxE,iBAAS,KAAK,MAAM,eAAe,UAAU;AAC7C,iBAAS,KAAK,MAAM,eAAe,gBAAgB;AAAA,MACrD,GAAG,CAAC;AAAA,IACN;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,qBAAC,gBACC;AAAA,wBAAC,iBAAc,UAAoB;AAAA,IACnC;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,uBAAoB;AAAA,QAMpB,WAAW;AAAA,UACT;AAAA,UACA,WAAW,qBAAqB;AAAA,UAChC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,qBAAkB;AAAA,cAClB,WAAU;AAAA,cACV,cAAY,EAAE,6BAA6B,OAAO;AAAA,cAElD,8BAAC,KAAE,WAAU,WAAU;AAAA;AAAA,UACzB;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ,CAAC;AACD,cAAc,cAAc,gBAAgB,QAAQ;AAEpD,MAAM,eAAe,CAAC,EAAE,WAAW,GAAG,MAAM,MAC1C,oBAAC,SAAI,WAAW,GAAG,sDAAsD,SAAS,GAAI,GAAG,OAAO;AAElG,aAAa,cAAc;AAE3B,MAAM,eAAe,CAAC,EAAE,WAAW,GAAG,MAAM,MAC1C,oBAAC,SAAI,WAAW,GAAG,0DAA0D,SAAS,GAAI,GAAG,OAAO;AAEtG,aAAa,cAAc;AAE3B,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,qDAAqD,SAAS;AAAA,IAC3E,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc,gBAAgB,MAAM;AAEhD,MAAM,oBAAoB,MAAM,WAG9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AACD,kBAAkB,cAAc,gBAAgB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@open-mercato/ui",
|
|
3
|
-
"version": "0.6.3-develop.
|
|
3
|
+
"version": "0.6.3-develop.3653.1.b8558737ae",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -141,13 +141,13 @@
|
|
|
141
141
|
"remark-gfm": "^4.0.1"
|
|
142
142
|
},
|
|
143
143
|
"peerDependencies": {
|
|
144
|
-
"@open-mercato/shared": "0.6.3-develop.
|
|
144
|
+
"@open-mercato/shared": "0.6.3-develop.3653.1.b8558737ae",
|
|
145
145
|
"react": ">=18.0.0",
|
|
146
146
|
"react-dom": ">=18.0.0",
|
|
147
147
|
"react-is": ">=18.0.0"
|
|
148
148
|
},
|
|
149
149
|
"devDependencies": {
|
|
150
|
-
"@open-mercato/shared": "0.6.3-develop.
|
|
150
|
+
"@open-mercato/shared": "0.6.3-develop.3653.1.b8558737ae",
|
|
151
151
|
"@testing-library/dom": "^10.4.1",
|
|
152
152
|
"@testing-library/jest-dom": "^6.9.1",
|
|
153
153
|
"@testing-library/react": "^16.3.1",
|
package/src/backend/CrudForm.tsx
CHANGED
|
@@ -1096,9 +1096,13 @@ export function CrudForm<TValues extends Record<string, unknown>>({
|
|
|
1096
1096
|
const dialogFooterClass = isInDialog
|
|
1097
1097
|
? 'sticky bottom-0 left-0 right-0 z-20 -mx-6 px-6 bg-card border-t border-border/70 py-2 sm:-mx-6 sm:px-6'
|
|
1098
1098
|
: ''
|
|
1099
|
-
//
|
|
1100
|
-
//
|
|
1101
|
-
|
|
1099
|
+
// No bottom padding on the dialog form. The previous `pb-20` left an 80px gap below
|
|
1100
|
+
// the sticky footer in every dialog whose content fit the viewport (the form sized to
|
|
1101
|
+
// content + 80px with the footer as its last child) — visible as empty white space at
|
|
1102
|
+
// the bottom of Quick deal, Add stage, Activity composer, etc. The sticky footer
|
|
1103
|
+
// handles the overflow case on its own: when content scrolls, the footer stays pinned
|
|
1104
|
+
// to the dialog's bottom and the user can scroll fields above it.
|
|
1105
|
+
const dialogFormPadding = ''
|
|
1102
1106
|
|
|
1103
1107
|
const buildCustomFieldsManageHref = React.useCallback(
|
|
1104
1108
|
(targetEntityId: string | null) => {
|
|
@@ -62,8 +62,13 @@ const DialogContent = React.forwardRef<
|
|
|
62
62
|
<DialogPrimitive.Content
|
|
63
63
|
ref={ref}
|
|
64
64
|
data-dialog-content=""
|
|
65
|
+
// Sizing: mobile uses a bottom-sheet (`fixed inset-x-0 bottom-0`) that resizes to
|
|
66
|
+
// the form's content with a cap at 90% viewport height. The previous version forced
|
|
67
|
+
// `min-h-[50vh]`, which made every short dialog (Quick deal, Add stage, Change
|
|
68
|
+
// owner, etc.) render as a half-screen panel with an empty block below the form.
|
|
69
|
+
// Desktop (`sm:`) already used `h-auto`/`min-h-0`, so it's unchanged here.
|
|
65
70
|
className={cn(
|
|
66
|
-
'fixed inset-x-0 bottom-0 flex
|
|
71
|
+
'fixed inset-x-0 bottom-0 flex max-h-[90vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',
|
|
67
72
|
elevated ? 'z-modal-elevated' : 'z-modal',
|
|
68
73
|
'sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border',
|
|
69
74
|
'focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out',
|