framepexls-ui-lib 0.3.4 → 0.3.5

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.
Files changed (7) hide show
  1. package/dist/DateTimeField.js +6 -9
  2. package/dist/DateTimeField.mjs +6 -9
  3. package/dist/TimePopover.js +3 -3
  4. package/dist/TimePopover.mjs +3 -3
  5. package/dist/TimeRangeField.js +12 -9
  6. package/dist/TimeRangeField.mjs +12 -9
  7. package/package.json +1 -1
package/dist/DateTimeField.js CHANGED
@@ -188,15 +188,12 @@ function DateTimeField({
188
188
  }, [open]);
189
189
  const stylePop = (() => {
190
190
  if (!anchorRect) return { visibility: "hidden" };
191
- const GAP = 8, MARGIN = 8;
192
- const W = Math.min(420, Math.max(320, window.innerWidth - MARGIN * 2));
193
- const H = Math.min(520, Math.max(320, Math.floor(window.innerHeight * 0.75)));
194
- let left = anchorRect.left + (anchorRect.width - W) / 2;
191
+ const W = 360, GAP = 4, MARGIN = 8, H = 420;
192
+ let left = anchorRect.right - W;
195
193
  left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
196
- let top = anchorRect.bottom + GAP;
197
- if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
198
- const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
199
- return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
194
+ let top = anchorRect.top - GAP - H;
195
+ if (top < MARGIN) top = Math.max(MARGIN, anchorRect.bottom + GAP);
196
+ return { position: "fixed", top, left, zIndex: 1e5 };
200
197
  })();
201
198
  const parsed = (0, import_react.useMemo)(() => value ? parseValueByType(value, type) : null, [value, type]);
202
199
  const [cursor, setCursor] = (0, import_react.useState)(() => parsed != null ? parsed : /* @__PURE__ */ new Date());
@@ -259,7 +256,7 @@ function DateTimeField({
259
256
  ref: popRef,
260
257
  style: { ...stylePop, willChange: "transform, opacity" },
261
258
  "data-dtf-pop": true,
262
- className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
259
+ className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
263
260
  children: [
264
261
  type !== "time" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
265
262
  import_CalendarPanel.default,
package/dist/DateTimeField.mjs CHANGED
@@ -155,15 +155,12 @@ function DateTimeField({
155
155
  }, [open]);
156
156
  const stylePop = (() => {
157
157
  if (!anchorRect) return { visibility: "hidden" };
158
- const GAP = 8, MARGIN = 8;
159
- const W = Math.min(420, Math.max(320, window.innerWidth - MARGIN * 2));
160
- const H = Math.min(520, Math.max(320, Math.floor(window.innerHeight * 0.75)));
161
- let left = anchorRect.left + (anchorRect.width - W) / 2;
158
+ const W = 360, GAP = 4, MARGIN = 8, H = 420;
159
+ let left = anchorRect.right - W;
162
160
  left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
163
- let top = anchorRect.bottom + GAP;
164
- if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
165
- const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
166
- return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
161
+ let top = anchorRect.top - GAP - H;
162
+ if (top < MARGIN) top = Math.max(MARGIN, anchorRect.bottom + GAP);
163
+ return { position: "fixed", top, left, zIndex: 1e5 };
167
164
  })();
168
165
  const parsed = useMemo(() => value ? parseValueByType(value, type) : null, [value, type]);
169
166
  const [cursor, setCursor] = useState(() => parsed != null ? parsed : /* @__PURE__ */ new Date());
@@ -226,7 +223,7 @@ function DateTimeField({
226
223
  ref: popRef,
227
224
  style: { ...stylePop, willChange: "transform, opacity" },
228
225
  "data-dtf-pop": true,
229
- className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
226
+ className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
230
227
  children: [
231
228
  type !== "time" && /* @__PURE__ */ jsx(
232
229
  CalendarPanel,
package/dist/TimePopover.js CHANGED
@@ -69,11 +69,11 @@ function TimePopover({
69
69
  const place = React.useCallback(() => {
70
70
  const a = anchorEl == null ? void 0 : anchorEl.getBoundingClientRect();
71
71
  if (!a) return;
72
- const W = 220, Hh = 128, GAP = 8, MARGIN = 8;
72
+ const W = 220, Hh = 128, GAP = 4, MARGIN = 8;
73
73
  let left = Math.min(a.left, window.innerWidth - W - MARGIN);
74
74
  left = Math.max(MARGIN, left);
75
- let top = a.bottom + GAP;
76
- if (top + Hh > window.innerHeight) top = Math.max(MARGIN, a.top - GAP - Hh);
75
+ let top = a.top - GAP - Hh;
76
+ if (top < MARGIN) top = Math.max(MARGIN, a.bottom + GAP);
77
77
  setPos({ top, left });
78
78
  }, [anchorEl]);
79
79
  React.useEffect(() => {
package/dist/TimePopover.mjs CHANGED
@@ -34,11 +34,11 @@ function TimePopover({
34
34
  const place = React.useCallback(() => {
35
35
  const a = anchorEl == null ? void 0 : anchorEl.getBoundingClientRect();
36
36
  if (!a) return;
37
- const W = 220, Hh = 128, GAP = 8, MARGIN = 8;
37
+ const W = 220, Hh = 128, GAP = 4, MARGIN = 8;
38
38
  let left = Math.min(a.left, window.innerWidth - W - MARGIN);
39
39
  left = Math.max(MARGIN, left);
40
- let top = a.bottom + GAP;
41
- if (top + Hh > window.innerHeight) top = Math.max(MARGIN, a.top - GAP - Hh);
40
+ let top = a.top - GAP - Hh;
41
+ if (top < MARGIN) top = Math.max(MARGIN, a.bottom + GAP);
42
42
  setPos({ top, left });
43
43
  }, [anchorEl]);
44
44
  React.useEffect(() => {
package/dist/TimeRangeField.js CHANGED
@@ -128,15 +128,18 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
128
128
  }, [open]);
129
129
  const stylePop = (() => {
130
130
  if (!anchorRect) return { visibility: "hidden" };
131
- const GAP = 8, MARGIN = 8;
132
- const W = Math.min(420, Math.max(300, window.innerWidth - MARGIN * 2));
133
- const H = Math.min(360, Math.max(200, Math.floor(window.innerHeight * 0.6)));
134
- let left = anchorRect.left + (anchorRect.width - W) / 2;
131
+ const W = 360, GAP = 2, MARGIN = 8;
132
+ let left = anchorRect.right - W;
135
133
  left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
136
- let top = anchorRect.bottom + GAP;
137
- if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
138
- const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
139
- return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
134
+ const spaceAbove = anchorRect.top - MARGIN;
135
+ const spaceBelow = window.innerHeight - anchorRect.bottom - MARGIN;
136
+ const placeAbove = spaceAbove >= spaceBelow;
137
+ if (placeAbove) {
138
+ const top2 = Math.max(MARGIN, anchorRect.top - GAP);
139
+ return { position: "fixed", top: top2, left, zIndex: 1e5, transform: "translateY(-100%)" };
140
+ }
141
+ const top = Math.max(MARGIN, anchorRect.bottom + GAP);
142
+ return { position: "fixed", top, left, zIndex: 1e5 };
140
143
  })();
141
144
  const commit = (f, t) => {
142
145
  let f2 = f, t2 = t;
@@ -149,7 +152,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
149
152
  setTo(t2);
150
153
  onValueChange == null ? void 0 : onValueChange({ from: f2 ? fmtHHmm(f2.hh, f2.mm) : null, to: t2 ? fmtHHmm(t2.hh, t2.mm) : null });
151
154
  };
152
- const popover = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-trf-pop": true, style: stylePop, className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
155
+ const popover = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-trf-pop": true, style: stylePop, className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
153
156
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
154
157
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: "Selecciona horario" }),
155
158
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/TimeRangeField.mjs CHANGED
@@ -95,15 +95,18 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
95
95
  }, [open]);
96
96
  const stylePop = (() => {
97
97
  if (!anchorRect) return { visibility: "hidden" };
98
- const GAP = 8, MARGIN = 8;
99
- const W = Math.min(420, Math.max(300, window.innerWidth - MARGIN * 2));
100
- const H = Math.min(360, Math.max(200, Math.floor(window.innerHeight * 0.6)));
101
- let left = anchorRect.left + (anchorRect.width - W) / 2;
98
+ const W = 360, GAP = 2, MARGIN = 8;
99
+ let left = anchorRect.right - W;
102
100
  left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
103
- let top = anchorRect.bottom + GAP;
104
- if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
105
- const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
106
- return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
101
+ const spaceAbove = anchorRect.top - MARGIN;
102
+ const spaceBelow = window.innerHeight - anchorRect.bottom - MARGIN;
103
+ const placeAbove = spaceAbove >= spaceBelow;
104
+ if (placeAbove) {
105
+ const top2 = Math.max(MARGIN, anchorRect.top - GAP);
106
+ return { position: "fixed", top: top2, left, zIndex: 1e5, transform: "translateY(-100%)" };
107
+ }
108
+ const top = Math.max(MARGIN, anchorRect.bottom + GAP);
109
+ return { position: "fixed", top, left, zIndex: 1e5 };
107
110
  })();
108
111
  const commit = (f, t) => {
109
112
  let f2 = f, t2 = t;
@@ -116,7 +119,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
116
119
  setTo(t2);
117
120
  onValueChange == null ? void 0 : onValueChange({ from: f2 ? fmtHHmm(f2.hh, f2.mm) : null, to: t2 ? fmtHHmm(t2.hh, t2.mm) : null });
118
121
  };
119
- const popover = /* @__PURE__ */ jsxs("div", { "data-trf-pop": true, style: stylePop, className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
122
+ const popover = /* @__PURE__ */ jsxs("div", { "data-trf-pop": true, style: stylePop, className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
120
123
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
121
124
  /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Selecciona horario" }),
122
125
  /* @__PURE__ */ jsx(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.3.4",
3
+ "version": "0.3.5",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",