@diwauhris/ui 1.7.8 → 1.7.11
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 +4 -0
- package/lib/index.cjs +20 -17
- package/lib/index.mjs +20 -17
- package/package.json +1 -1
package/lib/assets/ui.css
CHANGED
package/lib/index.cjs
CHANGED
|
@@ -1377,6 +1377,10 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
|
|
|
1377
1377
|
* Updated to import FieldContext from gallery-local field directory.
|
|
1378
1378
|
* Uses react-calendar and date-fns.
|
|
1379
1379
|
* Note: CSS for .pis-datepicker-popover and .pis-rc-calendar is in index.css.
|
|
1380
|
+
*
|
|
1381
|
+
* Popover is rendered via createPortal into document.body so that
|
|
1382
|
+
* position:fixed works correctly even when the DatePicker is inside a
|
|
1383
|
+
* CSS transform context (e.g. a Modal with -translate-x/y centering).
|
|
1380
1384
|
*/
|
|
1381
1385
|
var POPOVER_WIDTH = 352;
|
|
1382
1386
|
var CALENDAR_HEIGHT = 360;
|
|
@@ -1384,6 +1388,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1384
1388
|
const [isOpen, setIsOpen] = (0, react.useState)(false);
|
|
1385
1389
|
const [popupStyle, setPopupStyle] = (0, react.useState)({});
|
|
1386
1390
|
const wrapperRef = (0, react.useRef)(null);
|
|
1391
|
+
const popoverRef = (0, react.useRef)(null);
|
|
1387
1392
|
const inputRef = (0, react.useRef)(null);
|
|
1388
1393
|
const internalId = (0, react.useId)();
|
|
1389
1394
|
const ctx = useFieldContext();
|
|
@@ -1421,7 +1426,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1421
1426
|
}, [disabled]);
|
|
1422
1427
|
(0, react.useEffect)(() => {
|
|
1423
1428
|
function handleClickOutside(e) {
|
|
1424
|
-
|
|
1429
|
+
const target = e.target;
|
|
1430
|
+
if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
|
|
1425
1431
|
}
|
|
1426
1432
|
document.addEventListener("mousedown", handleClickOutside);
|
|
1427
1433
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
@@ -1492,7 +1498,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1492
1498
|
className: `absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none ${isOpen ? "text-brand-blue" : "text-slate-300"}`,
|
|
1493
1499
|
"aria-hidden": "true"
|
|
1494
1500
|
})]
|
|
1495
|
-
}), isOpen && !disabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1501
|
+
}), isOpen && !disabled && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
1502
|
+
ref: popoverRef,
|
|
1496
1503
|
className: "pis-datepicker-popover",
|
|
1497
1504
|
style: popupStyle,
|
|
1498
1505
|
role: "dialog",
|
|
@@ -1525,7 +1532,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1525
1532
|
},
|
|
1526
1533
|
className: "pis-rc-calendar"
|
|
1527
1534
|
}, isOpen ? "open" : "closed")
|
|
1528
|
-
})]
|
|
1535
|
+
}), document.body)]
|
|
1529
1536
|
});
|
|
1530
1537
|
}
|
|
1531
1538
|
//#endregion
|
|
@@ -3624,17 +3631,15 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
|
|
|
3624
3631
|
"aria-current": isCurrent ? "step" : void 0,
|
|
3625
3632
|
className: "flex flex-col items-center",
|
|
3626
3633
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
3627
|
-
className: "flex w-full items-center",
|
|
3634
|
+
className: "relative flex h-9 w-full items-center justify-center",
|
|
3628
3635
|
children: [
|
|
3629
|
-
idx > 0
|
|
3630
|
-
className: `
|
|
3631
|
-
"aria-hidden": "true"
|
|
3632
|
-
|
|
3633
|
-
className: "flex-1",
|
|
3634
|
-
"aria-hidden": "true"
|
|
3636
|
+
idx > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
3637
|
+
className: `absolute inset-y-0 left-0 right-1/2 flex items-center`,
|
|
3638
|
+
"aria-hidden": "true",
|
|
3639
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `h-0.5 w-full ${connectorLeft}` })
|
|
3635
3640
|
}),
|
|
3636
3641
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
3637
|
-
className: "shrink-0 z-10",
|
|
3642
|
+
className: "relative shrink-0 z-10",
|
|
3638
3643
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
|
|
3639
3644
|
state,
|
|
3640
3645
|
number: idx + 1,
|
|
@@ -3642,12 +3647,10 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
|
|
|
3642
3647
|
dark
|
|
3643
3648
|
})
|
|
3644
3649
|
}),
|
|
3645
|
-
!isLast
|
|
3646
|
-
className: `
|
|
3647
|
-
"aria-hidden": "true"
|
|
3648
|
-
|
|
3649
|
-
className: "flex-1",
|
|
3650
|
-
"aria-hidden": "true"
|
|
3650
|
+
!isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
3651
|
+
className: `absolute inset-y-0 left-1/2 right-0 flex items-center`,
|
|
3652
|
+
"aria-hidden": "true",
|
|
3653
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `h-0.5 w-full ${connectorRight}` })
|
|
3651
3654
|
})
|
|
3652
3655
|
]
|
|
3653
3656
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
package/lib/index.mjs
CHANGED
|
@@ -1353,6 +1353,10 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
|
|
|
1353
1353
|
* Updated to import FieldContext from gallery-local field directory.
|
|
1354
1354
|
* Uses react-calendar and date-fns.
|
|
1355
1355
|
* Note: CSS for .pis-datepicker-popover and .pis-rc-calendar is in index.css.
|
|
1356
|
+
*
|
|
1357
|
+
* Popover is rendered via createPortal into document.body so that
|
|
1358
|
+
* position:fixed works correctly even when the DatePicker is inside a
|
|
1359
|
+
* CSS transform context (e.g. a Modal with -translate-x/y centering).
|
|
1356
1360
|
*/
|
|
1357
1361
|
var POPOVER_WIDTH = 352;
|
|
1358
1362
|
var CALENDAR_HEIGHT = 360;
|
|
@@ -1360,6 +1364,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1360
1364
|
const [isOpen, setIsOpen] = useState(false);
|
|
1361
1365
|
const [popupStyle, setPopupStyle] = useState({});
|
|
1362
1366
|
const wrapperRef = useRef(null);
|
|
1367
|
+
const popoverRef = useRef(null);
|
|
1363
1368
|
const inputRef = useRef(null);
|
|
1364
1369
|
const internalId = useId();
|
|
1365
1370
|
const ctx = useFieldContext();
|
|
@@ -1397,7 +1402,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1397
1402
|
}, [disabled]);
|
|
1398
1403
|
useEffect(() => {
|
|
1399
1404
|
function handleClickOutside(e) {
|
|
1400
|
-
|
|
1405
|
+
const target = e.target;
|
|
1406
|
+
if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
|
|
1401
1407
|
}
|
|
1402
1408
|
document.addEventListener("mousedown", handleClickOutside);
|
|
1403
1409
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
@@ -1468,7 +1474,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1468
1474
|
className: `absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none ${isOpen ? "text-brand-blue" : "text-slate-300"}`,
|
|
1469
1475
|
"aria-hidden": "true"
|
|
1470
1476
|
})]
|
|
1471
|
-
}), isOpen && !disabled && /* @__PURE__ */ jsx("div", {
|
|
1477
|
+
}), isOpen && !disabled && createPortal(/* @__PURE__ */ jsx("div", {
|
|
1478
|
+
ref: popoverRef,
|
|
1472
1479
|
className: "pis-datepicker-popover",
|
|
1473
1480
|
style: popupStyle,
|
|
1474
1481
|
role: "dialog",
|
|
@@ -1501,7 +1508,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1501
1508
|
},
|
|
1502
1509
|
className: "pis-rc-calendar"
|
|
1503
1510
|
}, isOpen ? "open" : "closed")
|
|
1504
|
-
})]
|
|
1511
|
+
}), document.body)]
|
|
1505
1512
|
});
|
|
1506
1513
|
}
|
|
1507
1514
|
//#endregion
|
|
@@ -3600,17 +3607,15 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
|
|
|
3600
3607
|
"aria-current": isCurrent ? "step" : void 0,
|
|
3601
3608
|
className: "flex flex-col items-center",
|
|
3602
3609
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
3603
|
-
className: "flex w-full items-center",
|
|
3610
|
+
className: "relative flex h-9 w-full items-center justify-center",
|
|
3604
3611
|
children: [
|
|
3605
|
-
idx > 0
|
|
3606
|
-
className: `
|
|
3607
|
-
"aria-hidden": "true"
|
|
3608
|
-
|
|
3609
|
-
className: "flex-1",
|
|
3610
|
-
"aria-hidden": "true"
|
|
3612
|
+
idx > 0 && /* @__PURE__ */ jsx("div", {
|
|
3613
|
+
className: `absolute inset-y-0 left-0 right-1/2 flex items-center`,
|
|
3614
|
+
"aria-hidden": "true",
|
|
3615
|
+
children: /* @__PURE__ */ jsx("div", { className: `h-0.5 w-full ${connectorLeft}` })
|
|
3611
3616
|
}),
|
|
3612
3617
|
/* @__PURE__ */ jsx("div", {
|
|
3613
|
-
className: "shrink-0 z-10",
|
|
3618
|
+
className: "relative shrink-0 z-10",
|
|
3614
3619
|
children: /* @__PURE__ */ jsx(StepCircle, {
|
|
3615
3620
|
state,
|
|
3616
3621
|
number: idx + 1,
|
|
@@ -3618,12 +3623,10 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
|
|
|
3618
3623
|
dark
|
|
3619
3624
|
})
|
|
3620
3625
|
}),
|
|
3621
|
-
!isLast
|
|
3622
|
-
className: `
|
|
3623
|
-
"aria-hidden": "true"
|
|
3624
|
-
|
|
3625
|
-
className: "flex-1",
|
|
3626
|
-
"aria-hidden": "true"
|
|
3626
|
+
!isLast && /* @__PURE__ */ jsx("div", {
|
|
3627
|
+
className: `absolute inset-y-0 left-1/2 right-0 flex items-center`,
|
|
3628
|
+
"aria-hidden": "true",
|
|
3629
|
+
children: /* @__PURE__ */ jsx("div", { className: `h-0.5 w-full ${connectorRight}` })
|
|
3627
3630
|
})
|
|
3628
3631
|
]
|
|
3629
3632
|
}), /* @__PURE__ */ jsxs("div", {
|