@firecms/ui 3.0.0-canary.255 → 3.0.0-canary.257
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.
- package/dist/components/Dialog.d.ts +5 -1
- package/dist/index.es.js +113 -97
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +113 -97
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Dialog.tsx +12 -3
@@ -15,6 +15,10 @@ export type DialogProps = {
|
|
15
15
|
onEscapeKeyDown?: (e: KeyboardEvent) => void;
|
16
16
|
onPointerDownOutside?: (e: Event) => void;
|
17
17
|
onInteractOutside?: (e: Event) => void;
|
18
|
+
/**
|
19
|
+
* If `true`, the dialog will not focus the first focusable element when opened.
|
20
|
+
*/
|
21
|
+
disableInitialFocus?: boolean;
|
18
22
|
};
|
19
23
|
declare const widthClasses: {
|
20
24
|
xs: string;
|
@@ -30,5 +34,5 @@ declare const widthClasses: {
|
|
30
34
|
"7xl": string;
|
31
35
|
full: string;
|
32
36
|
};
|
33
|
-
export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside }: DialogProps) => import("react/jsx-runtime").JSX.Element;
|
37
|
+
export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus }: DialogProps) => import("react/jsx-runtime").JSX.Element;
|
34
38
|
export {};
|
package/dist/index.es.js
CHANGED
@@ -28001,7 +28001,7 @@ const widthClasses = {
|
|
28001
28001
|
full: "max-w-full min-w-full w-full"
|
28002
28002
|
};
|
28003
28003
|
const Dialog = (t0) => {
|
28004
|
-
const $ = c(
|
28004
|
+
const $ = c(42);
|
28005
28005
|
const {
|
28006
28006
|
open,
|
28007
28007
|
onOpenChange,
|
@@ -28017,17 +28017,19 @@ const Dialog = (t0) => {
|
|
28017
28017
|
onOpenAutoFocus,
|
28018
28018
|
onEscapeKeyDown,
|
28019
28019
|
onPointerDownOutside,
|
28020
|
-
onInteractOutside
|
28020
|
+
onInteractOutside,
|
28021
|
+
disableInitialFocus: t5
|
28021
28022
|
} = t0;
|
28022
28023
|
const fullWidth = t1 === void 0 ? true : t1;
|
28023
28024
|
const scrollable = t2 === void 0 ? true : t2;
|
28024
28025
|
const maxWidth = t3 === void 0 ? "lg" : t3;
|
28025
28026
|
const modal = t4 === void 0 ? true : t4;
|
28027
|
+
const disableInitialFocus = t5 === void 0 ? true : t5;
|
28026
28028
|
const [displayed, setDisplayed] = useState(false);
|
28027
|
-
let t5;
|
28028
28029
|
let t6;
|
28030
|
+
let t7;
|
28029
28031
|
if ($[0] !== open) {
|
28030
|
-
|
28032
|
+
t6 = () => {
|
28031
28033
|
if (!open) {
|
28032
28034
|
const timeout = setTimeout(() => {
|
28033
28035
|
setDisplayed(false);
|
@@ -28038,126 +28040,140 @@ const Dialog = (t0) => {
|
|
28038
28040
|
return _temp$2;
|
28039
28041
|
}
|
28040
28042
|
};
|
28041
|
-
|
28043
|
+
t7 = [open];
|
28042
28044
|
$[0] = open;
|
28043
|
-
$[1] =
|
28044
|
-
$[2] =
|
28045
|
+
$[1] = t6;
|
28046
|
+
$[2] = t7;
|
28045
28047
|
} else {
|
28046
|
-
|
28047
|
-
|
28048
|
+
t6 = $[1];
|
28049
|
+
t7 = $[2];
|
28048
28050
|
}
|
28049
|
-
useEffect(
|
28050
|
-
const
|
28051
|
-
let
|
28051
|
+
useEffect(t6, t7);
|
28052
|
+
const t8 = displayed || open;
|
28053
|
+
let t9;
|
28052
28054
|
if ($[3] !== containerClassName) {
|
28053
|
-
|
28055
|
+
t9 = cls("fixed inset-0 z-30", containerClassName);
|
28054
28056
|
$[3] = containerClassName;
|
28055
|
-
$[4] =
|
28057
|
+
$[4] = t9;
|
28056
28058
|
} else {
|
28057
|
-
|
28059
|
+
t9 = $[4];
|
28058
28060
|
}
|
28059
|
-
const
|
28060
|
-
let
|
28061
|
-
if ($[5] !==
|
28062
|
-
|
28063
|
-
$[5] =
|
28064
|
-
$[6] =
|
28061
|
+
const t10 = displayed && open ? "opacity-100" : "opacity-0";
|
28062
|
+
let t11;
|
28063
|
+
if ($[5] !== t10) {
|
28064
|
+
t11 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ", t10, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
|
28065
|
+
$[5] = t10;
|
28066
|
+
$[6] = t11;
|
28065
28067
|
} else {
|
28066
|
-
|
28068
|
+
t11 = $[6];
|
28067
28069
|
}
|
28068
|
-
const
|
28069
|
-
let
|
28070
|
-
if ($[7] !==
|
28071
|
-
|
28072
|
-
pointerEvents:
|
28070
|
+
const t12 = displayed ? "auto" : "none";
|
28071
|
+
let t13;
|
28072
|
+
if ($[7] !== t12) {
|
28073
|
+
t13 = {
|
28074
|
+
pointerEvents: t12
|
28073
28075
|
};
|
28074
|
-
$[7] =
|
28075
|
-
$[8] =
|
28076
|
+
$[7] = t12;
|
28077
|
+
$[8] = t13;
|
28076
28078
|
} else {
|
28077
|
-
|
28079
|
+
t13 = $[8];
|
28078
28080
|
}
|
28079
|
-
let
|
28080
|
-
if ($[9] !==
|
28081
|
-
|
28082
|
-
$[9] =
|
28083
|
-
$[10] =
|
28084
|
-
$[11] =
|
28081
|
+
let t14;
|
28082
|
+
if ($[9] !== t11 || $[10] !== t13) {
|
28083
|
+
t14 = /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: t11, style: t13 });
|
28084
|
+
$[9] = t11;
|
28085
|
+
$[10] = t13;
|
28086
|
+
$[11] = t14;
|
28085
28087
|
} else {
|
28086
|
-
|
28088
|
+
t14 = $[11];
|
28087
28089
|
}
|
28088
|
-
let
|
28089
|
-
if ($[12]
|
28090
|
-
|
28091
|
-
|
28092
|
-
|
28093
|
-
|
28094
|
-
|
28095
|
-
|
28096
|
-
|
28097
|
-
|
28098
|
-
const t18 = scrollable && "overflow-y-auto";
|
28099
|
-
const t19 = displayed && open ? "opacity-100" : "opacity-0";
|
28100
|
-
const t20 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
|
28101
|
-
let t21;
|
28102
|
-
if ($[13] !== className || $[14] !== t15 || $[15] !== t16 || $[16] !== t17 || $[17] !== t18 || $[18] !== t19 || $[19] !== t20) {
|
28103
|
-
t21 = cls(paperMixin, "z-30", "relative", "outline-none focus:outline-none", t15, t16, "text-surface-accent-900 dark:text-white", "justify-center items-center", t17, "ease-in-out duration-200", t18, t19, t20, className);
|
28104
|
-
$[13] = className;
|
28090
|
+
let t15;
|
28091
|
+
if ($[12] !== disableInitialFocus || $[13] !== onOpenAutoFocus) {
|
28092
|
+
t15 = (e) => {
|
28093
|
+
if (disableInitialFocus) {
|
28094
|
+
e.preventDefault();
|
28095
|
+
}
|
28096
|
+
onOpenAutoFocus?.(e);
|
28097
|
+
};
|
28098
|
+
$[12] = disableInitialFocus;
|
28099
|
+
$[13] = onOpenAutoFocus;
|
28105
28100
|
$[14] = t15;
|
28106
|
-
$[15] = t16;
|
28107
|
-
$[16] = t17;
|
28108
|
-
$[17] = t18;
|
28109
|
-
$[18] = t19;
|
28110
|
-
$[19] = t20;
|
28111
|
-
$[20] = t21;
|
28112
28101
|
} else {
|
28113
|
-
|
28102
|
+
t15 = $[14];
|
28114
28103
|
}
|
28115
|
-
let
|
28116
|
-
if ($[
|
28117
|
-
|
28118
|
-
$[
|
28119
|
-
$[22] = t21;
|
28120
|
-
$[23] = t22;
|
28104
|
+
let t16;
|
28105
|
+
if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
|
28106
|
+
t16 = cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out");
|
28107
|
+
$[15] = t16;
|
28121
28108
|
} else {
|
28122
|
-
|
28109
|
+
t16 = $[15];
|
28123
28110
|
}
|
28111
|
+
const t17 = fullWidth && !fullScreen ? "w-11/12" : void 0;
|
28112
|
+
const t18 = fullHeight && !fullScreen ? "h-full" : void 0;
|
28113
|
+
const t19 = fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl";
|
28114
|
+
const t20 = scrollable && "overflow-y-auto";
|
28115
|
+
const t21 = displayed && open ? "opacity-100" : "opacity-0";
|
28116
|
+
const t22 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
|
28124
28117
|
let t23;
|
28125
|
-
if ($[
|
28126
|
-
t23 =
|
28127
|
-
$[
|
28128
|
-
$[
|
28129
|
-
$[
|
28130
|
-
$[
|
28131
|
-
$[
|
28132
|
-
$[
|
28133
|
-
|
28134
|
-
|
28118
|
+
if ($[16] !== className || $[17] !== t17 || $[18] !== t18 || $[19] !== t19 || $[20] !== t20 || $[21] !== t21 || $[22] !== t22) {
|
28119
|
+
t23 = cls(paperMixin, "z-30", "relative", "outline-none focus:outline-none", t17, t18, "text-surface-accent-900 dark:text-white", "justify-center items-center", t19, "ease-in-out duration-200", t20, t21, t22, className);
|
28120
|
+
$[16] = className;
|
28121
|
+
$[17] = t17;
|
28122
|
+
$[18] = t18;
|
28123
|
+
$[19] = t19;
|
28124
|
+
$[20] = t20;
|
28125
|
+
$[21] = t21;
|
28126
|
+
$[22] = t22;
|
28127
|
+
$[23] = t23;
|
28128
|
+
} else {
|
28129
|
+
t23 = $[23];
|
28135
28130
|
}
|
28136
28131
|
let t24;
|
28137
|
-
if ($[
|
28138
|
-
t24 = /* @__PURE__ */ jsx(
|
28139
|
-
|
28140
|
-
|
28141
|
-
]
|
28142
|
-
$[30] = t13;
|
28143
|
-
$[31] = t23;
|
28144
|
-
$[32] = t8;
|
28145
|
-
$[33] = t24;
|
28132
|
+
if ($[24] !== children || $[25] !== t23) {
|
28133
|
+
t24 = /* @__PURE__ */ jsx("div", { className: t23, children });
|
28134
|
+
$[24] = children;
|
28135
|
+
$[25] = t23;
|
28136
|
+
$[26] = t24;
|
28146
28137
|
} else {
|
28147
|
-
t24 = $[
|
28138
|
+
t24 = $[26];
|
28148
28139
|
}
|
28149
28140
|
let t25;
|
28150
|
-
if ($[
|
28151
|
-
t25 = /* @__PURE__ */ jsx(DialogPrimitive.
|
28152
|
-
$[
|
28153
|
-
$[
|
28154
|
-
$[
|
28155
|
-
$[
|
28156
|
-
$[
|
28141
|
+
if ($[27] !== onEscapeKeyDown || $[28] !== onInteractOutside || $[29] !== onPointerDownOutside || $[30] !== t15 || $[31] !== t24) {
|
28142
|
+
t25 = /* @__PURE__ */ jsx(DialogPrimitive.Content, { onEscapeKeyDown, onOpenAutoFocus: t15, onPointerDownOutside, onInteractOutside, className: t16, children: t24 });
|
28143
|
+
$[27] = onEscapeKeyDown;
|
28144
|
+
$[28] = onInteractOutside;
|
28145
|
+
$[29] = onPointerDownOutside;
|
28146
|
+
$[30] = t15;
|
28147
|
+
$[31] = t24;
|
28148
|
+
$[32] = t25;
|
28149
|
+
} else {
|
28150
|
+
t25 = $[32];
|
28151
|
+
}
|
28152
|
+
let t26;
|
28153
|
+
if ($[33] !== t14 || $[34] !== t25 || $[35] !== t9) {
|
28154
|
+
t26 = /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs("div", { className: t9, children: [
|
28155
|
+
t14,
|
28156
|
+
t25
|
28157
|
+
] }) });
|
28158
|
+
$[33] = t14;
|
28159
|
+
$[34] = t25;
|
28160
|
+
$[35] = t9;
|
28161
|
+
$[36] = t26;
|
28162
|
+
} else {
|
28163
|
+
t26 = $[36];
|
28164
|
+
}
|
28165
|
+
let t27;
|
28166
|
+
if ($[37] !== modal || $[38] !== onOpenChange || $[39] !== t26 || $[40] !== t8) {
|
28167
|
+
t27 = /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: t8, modal, onOpenChange, children: t26 });
|
28168
|
+
$[37] = modal;
|
28169
|
+
$[38] = onOpenChange;
|
28170
|
+
$[39] = t26;
|
28171
|
+
$[40] = t8;
|
28172
|
+
$[41] = t27;
|
28157
28173
|
} else {
|
28158
|
-
|
28174
|
+
t27 = $[41];
|
28159
28175
|
}
|
28160
|
-
return
|
28176
|
+
return t27;
|
28161
28177
|
};
|
28162
28178
|
function _temp$2() {
|
28163
28179
|
}
|