@diwauhris/ui 1.7.11 → 1.7.13
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/lib/assets/ui.css +1 -1
- package/lib/index.cjs +12 -6
- package/lib/index.mjs +12 -6
- package/package.json +1 -1
package/lib/assets/ui.css
CHANGED
|
@@ -4411,7 +4411,7 @@ body {
|
|
|
4411
4411
|
/* ── Date Picker (react-calendar DIWA theme) ─────────────────────────────── */
|
|
4412
4412
|
.pis-datepicker-popover {
|
|
4413
4413
|
position: absolute;
|
|
4414
|
-
z-index:
|
|
4414
|
+
z-index: 1050;
|
|
4415
4415
|
margin-top: 6px;
|
|
4416
4416
|
background: #fff;
|
|
4417
4417
|
border: 1px solid #dde3ec;
|
package/lib/index.cjs
CHANGED
|
@@ -1434,21 +1434,26 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1434
1434
|
}, []);
|
|
1435
1435
|
(0, react.useEffect)(() => {
|
|
1436
1436
|
if (!isOpen) return;
|
|
1437
|
-
function handleScroll() {
|
|
1437
|
+
function handleScroll(e) {
|
|
1438
|
+
if (wrapperRef.current && wrapperRef.current.contains(e.target)) return;
|
|
1439
|
+
setIsOpen(false);
|
|
1440
|
+
}
|
|
1441
|
+
function handleResize() {
|
|
1438
1442
|
setIsOpen(false);
|
|
1439
1443
|
}
|
|
1440
1444
|
window.addEventListener("scroll", handleScroll, { capture: true });
|
|
1441
|
-
window.addEventListener("resize",
|
|
1445
|
+
window.addEventListener("resize", handleResize);
|
|
1442
1446
|
return () => {
|
|
1443
1447
|
window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
1444
|
-
window.removeEventListener("resize",
|
|
1448
|
+
window.removeEventListener("resize", handleResize);
|
|
1445
1449
|
};
|
|
1446
1450
|
}, [isOpen]);
|
|
1447
1451
|
(0, react.useEffect)(() => {
|
|
1448
1452
|
if (!isOpen) return;
|
|
1449
1453
|
function handleFocusOut(e) {
|
|
1450
1454
|
if (!e.relatedTarget) return;
|
|
1451
|
-
|
|
1455
|
+
const target = e.relatedTarget;
|
|
1456
|
+
if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
|
|
1452
1457
|
}
|
|
1453
1458
|
const wrapper = wrapperRef.current;
|
|
1454
1459
|
wrapper?.addEventListener("focusout", handleFocusOut);
|
|
@@ -3555,6 +3560,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
|
|
|
3555
3560
|
className: cn("flex flex-col", className),
|
|
3556
3561
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
|
|
3557
3562
|
className: "flex flex-col",
|
|
3563
|
+
"aria-orientation": "vertical",
|
|
3558
3564
|
children: steps.map((step, idx) => {
|
|
3559
3565
|
const state = resolveState(step.id, currentStep, completedSteps, disabledSteps);
|
|
3560
3566
|
const isCurrent = state === "current";
|
|
@@ -3618,13 +3624,13 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
|
|
|
3618
3624
|
className: cn("w-full", className),
|
|
3619
3625
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
|
|
3620
3626
|
className: "grid w-full",
|
|
3627
|
+
"aria-orientation": "horizontal",
|
|
3621
3628
|
style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` },
|
|
3622
3629
|
children: steps.map((step, idx) => {
|
|
3623
3630
|
const state = resolvedStates[idx];
|
|
3624
3631
|
const isCurrent = state === "current";
|
|
3625
3632
|
const isLast = idx === steps.length - 1;
|
|
3626
|
-
const
|
|
3627
|
-
const connectorDone = prevState === "completed" || prevState === "current";
|
|
3633
|
+
const connectorDone = (idx > 0 ? resolvedStates[idx - 1] : null) === "completed";
|
|
3628
3634
|
const connectorLeft = dark ? connectorDone ? "bg-[#2D8ACA]/50" : "bg-white/15" : connectorDone ? "bg-brand-blue/50" : "bg-slate-200";
|
|
3629
3635
|
const connectorRight = dark ? state === "completed" ? "bg-[#2D8ACA]/50" : "bg-white/15" : state === "completed" ? "bg-brand-blue/50" : "bg-slate-200";
|
|
3630
3636
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
|
package/lib/index.mjs
CHANGED
|
@@ -1410,21 +1410,26 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1410
1410
|
}, []);
|
|
1411
1411
|
useEffect(() => {
|
|
1412
1412
|
if (!isOpen) return;
|
|
1413
|
-
function handleScroll() {
|
|
1413
|
+
function handleScroll(e) {
|
|
1414
|
+
if (wrapperRef.current && wrapperRef.current.contains(e.target)) return;
|
|
1415
|
+
setIsOpen(false);
|
|
1416
|
+
}
|
|
1417
|
+
function handleResize() {
|
|
1414
1418
|
setIsOpen(false);
|
|
1415
1419
|
}
|
|
1416
1420
|
window.addEventListener("scroll", handleScroll, { capture: true });
|
|
1417
|
-
window.addEventListener("resize",
|
|
1421
|
+
window.addEventListener("resize", handleResize);
|
|
1418
1422
|
return () => {
|
|
1419
1423
|
window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
1420
|
-
window.removeEventListener("resize",
|
|
1424
|
+
window.removeEventListener("resize", handleResize);
|
|
1421
1425
|
};
|
|
1422
1426
|
}, [isOpen]);
|
|
1423
1427
|
useEffect(() => {
|
|
1424
1428
|
if (!isOpen) return;
|
|
1425
1429
|
function handleFocusOut(e) {
|
|
1426
1430
|
if (!e.relatedTarget) return;
|
|
1427
|
-
|
|
1431
|
+
const target = e.relatedTarget;
|
|
1432
|
+
if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
|
|
1428
1433
|
}
|
|
1429
1434
|
const wrapper = wrapperRef.current;
|
|
1430
1435
|
wrapper?.addEventListener("focusout", handleFocusOut);
|
|
@@ -3531,6 +3536,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
|
|
|
3531
3536
|
className: cn("flex flex-col", className),
|
|
3532
3537
|
children: /* @__PURE__ */ jsx("ol", {
|
|
3533
3538
|
className: "flex flex-col",
|
|
3539
|
+
"aria-orientation": "vertical",
|
|
3534
3540
|
children: steps.map((step, idx) => {
|
|
3535
3541
|
const state = resolveState(step.id, currentStep, completedSteps, disabledSteps);
|
|
3536
3542
|
const isCurrent = state === "current";
|
|
@@ -3594,13 +3600,13 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
|
|
|
3594
3600
|
className: cn("w-full", className),
|
|
3595
3601
|
children: /* @__PURE__ */ jsx("ol", {
|
|
3596
3602
|
className: "grid w-full",
|
|
3603
|
+
"aria-orientation": "horizontal",
|
|
3597
3604
|
style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` },
|
|
3598
3605
|
children: steps.map((step, idx) => {
|
|
3599
3606
|
const state = resolvedStates[idx];
|
|
3600
3607
|
const isCurrent = state === "current";
|
|
3601
3608
|
const isLast = idx === steps.length - 1;
|
|
3602
|
-
const
|
|
3603
|
-
const connectorDone = prevState === "completed" || prevState === "current";
|
|
3609
|
+
const connectorDone = (idx > 0 ? resolvedStates[idx - 1] : null) === "completed";
|
|
3604
3610
|
const connectorLeft = dark ? connectorDone ? "bg-[#2D8ACA]/50" : "bg-white/15" : connectorDone ? "bg-brand-blue/50" : "bg-slate-200";
|
|
3605
3611
|
const connectorRight = dark ? state === "completed" ? "bg-[#2D8ACA]/50" : "bg-white/15" : state === "completed" ? "bg-brand-blue/50" : "bg-slate-200";
|
|
3606
3612
|
return /* @__PURE__ */ jsxs("li", {
|