@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.
@@ -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(39);
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
- t5 = () => {
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
- t6 = [open];
28043
+ t7 = [open];
28042
28044
  $[0] = open;
28043
- $[1] = t5;
28044
- $[2] = t6;
28045
+ $[1] = t6;
28046
+ $[2] = t7;
28045
28047
  } else {
28046
- t5 = $[1];
28047
- t6 = $[2];
28048
+ t6 = $[1];
28049
+ t7 = $[2];
28048
28050
  }
28049
- useEffect(t5, t6);
28050
- const t7 = displayed || open;
28051
- let t8;
28051
+ useEffect(t6, t7);
28052
+ const t8 = displayed || open;
28053
+ let t9;
28052
28054
  if ($[3] !== containerClassName) {
28053
- t8 = cls("fixed inset-0 z-30", containerClassName);
28055
+ t9 = cls("fixed inset-0 z-30", containerClassName);
28054
28056
  $[3] = containerClassName;
28055
- $[4] = t8;
28057
+ $[4] = t9;
28056
28058
  } else {
28057
- t8 = $[4];
28059
+ t9 = $[4];
28058
28060
  }
28059
- const t9 = displayed && open ? "opacity-100" : "opacity-0";
28060
- let t10;
28061
- if ($[5] !== t9) {
28062
- t10 = 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 ", t9, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
28063
- $[5] = t9;
28064
- $[6] = t10;
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
- t10 = $[6];
28068
+ t11 = $[6];
28067
28069
  }
28068
- const t11 = displayed ? "auto" : "none";
28069
- let t12;
28070
- if ($[7] !== t11) {
28071
- t12 = {
28072
- pointerEvents: t11
28070
+ const t12 = displayed ? "auto" : "none";
28071
+ let t13;
28072
+ if ($[7] !== t12) {
28073
+ t13 = {
28074
+ pointerEvents: t12
28073
28075
  };
28074
- $[7] = t11;
28075
- $[8] = t12;
28076
+ $[7] = t12;
28077
+ $[8] = t13;
28076
28078
  } else {
28077
- t12 = $[8];
28079
+ t13 = $[8];
28078
28080
  }
28079
- let t13;
28080
- if ($[9] !== t10 || $[10] !== t12) {
28081
- t13 = /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: t10, style: t12 });
28082
- $[9] = t10;
28083
- $[10] = t12;
28084
- $[11] = t13;
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
- t13 = $[11];
28088
+ t14 = $[11];
28087
28089
  }
28088
- let t14;
28089
- if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
28090
- t14 = cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out");
28091
- $[12] = t14;
28092
- } else {
28093
- t14 = $[12];
28094
- }
28095
- const t15 = fullWidth && !fullScreen ? "w-11/12" : void 0;
28096
- const t16 = fullHeight && !fullScreen ? "h-full" : void 0;
28097
- const t17 = fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl";
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
- t21 = $[20];
28102
+ t15 = $[14];
28114
28103
  }
28115
- let t22;
28116
- if ($[21] !== children || $[22] !== t21) {
28117
- t22 = /* @__PURE__ */ jsx("div", { className: t21, children });
28118
- $[21] = children;
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
- t22 = $[23];
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 ($[24] !== onEscapeKeyDown || $[25] !== onInteractOutside || $[26] !== onOpenAutoFocus || $[27] !== onPointerDownOutside || $[28] !== t22) {
28126
- t23 = /* @__PURE__ */ jsx(DialogPrimitive.Content, { onEscapeKeyDown, onOpenAutoFocus, onPointerDownOutside, onInteractOutside, className: t14, children: t22 });
28127
- $[24] = onEscapeKeyDown;
28128
- $[25] = onInteractOutside;
28129
- $[26] = onOpenAutoFocus;
28130
- $[27] = onPointerDownOutside;
28131
- $[28] = t22;
28132
- $[29] = t23;
28133
- } else {
28134
- t23 = $[29];
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 ($[30] !== t13 || $[31] !== t23 || $[32] !== t8) {
28138
- t24 = /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs("div", { className: t8, children: [
28139
- t13,
28140
- t23
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 = $[33];
28138
+ t24 = $[26];
28148
28139
  }
28149
28140
  let t25;
28150
- if ($[34] !== modal || $[35] !== onOpenChange || $[36] !== t24 || $[37] !== t7) {
28151
- t25 = /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: t7, modal, onOpenChange, children: t24 });
28152
- $[34] = modal;
28153
- $[35] = onOpenChange;
28154
- $[36] = t24;
28155
- $[37] = t7;
28156
- $[38] = t25;
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
- t25 = $[38];
28174
+ t27 = $[41];
28159
28175
  }
28160
- return t25;
28176
+ return t27;
28161
28177
  };
28162
28178
  function _temp$2() {
28163
28179
  }