x-ui-design 0.8.82 → 0.8.83
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/esm/types/hooks/usePopupPosition.d.ts +4 -3
- package/dist/index.esm.js +30 -24
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +30 -24
- package/dist/index.js.map +1 -1
- package/lib/components/DatePicker/DatePicker.tsx +1 -0
- package/lib/components/DatePicker/RangePicker/RangePicker.tsx +1 -0
- package/lib/components/DatePicker/RangePicker/style.css +0 -1
- package/lib/components/DatePicker/TimePicker/TimePicker.tsx +1 -0
- package/lib/components/Dropdown/Dropdown.tsx +1 -0
- package/lib/components/Popover/Popover.tsx +1 -0
- package/lib/hooks/usePopupPosition.ts +47 -28
- package/package.json +1 -1
- package/src/app/page.tsx +19 -9
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { CSSProperties, RefObject } from "react";
|
|
1
|
+
import { CSSProperties, Dispatch, RefObject, SetStateAction } from "react";
|
|
2
2
|
import { Placement } from "../types";
|
|
3
3
|
type TPopupPosition = {
|
|
4
|
+
open: boolean;
|
|
5
|
+
setOpen: Dispatch<SetStateAction<boolean>>;
|
|
4
6
|
targetRef: RefObject<HTMLDivElement | null>;
|
|
5
7
|
popupRef: RefObject<HTMLDivElement | null>;
|
|
6
8
|
placement: Placement;
|
|
7
|
-
open: boolean;
|
|
8
9
|
inBody: boolean;
|
|
9
10
|
};
|
|
10
|
-
export declare const usePopupPosition: ({ open, inBody, popupRef, targetRef, placement }: TPopupPosition) => {
|
|
11
|
+
export declare const usePopupPosition: ({ open, setOpen, inBody, popupRef, targetRef, placement }: TPopupPosition) => {
|
|
11
12
|
popupStyle: CSSProperties;
|
|
12
13
|
};
|
|
13
14
|
export {};
|
package/dist/index.esm.js
CHANGED
|
@@ -2597,23 +2597,21 @@ const ConditionalWrapper = ({
|
|
|
2597
2597
|
const OFFSET = 12;
|
|
2598
2598
|
const usePopupPosition = ({
|
|
2599
2599
|
open,
|
|
2600
|
+
setOpen,
|
|
2600
2601
|
inBody,
|
|
2601
2602
|
popupRef,
|
|
2602
2603
|
targetRef,
|
|
2603
2604
|
placement
|
|
2604
2605
|
}) => {
|
|
2605
2606
|
const [popupPosition, setPopupPosition] = useState({});
|
|
2606
|
-
const
|
|
2607
|
-
|
|
2608
|
-
if (
|
|
2609
|
-
|
|
2610
|
-
}
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
|
|
2614
|
-
if (!container) {
|
|
2615
|
-
return;
|
|
2616
|
-
}
|
|
2607
|
+
const calculatePosition = useCallback(e => {
|
|
2608
|
+
const container = targetRef.current?.getBoundingClientRect();
|
|
2609
|
+
if (!container) {
|
|
2610
|
+
return;
|
|
2611
|
+
}
|
|
2612
|
+
const scrollableParents = getScrollParent(targetRef.current, true);
|
|
2613
|
+
e?.target === scrollableParents;
|
|
2614
|
+
const _calculation = () => {
|
|
2617
2615
|
const _bottomCollectionTop = !placement.includes('bottom') ? 0 : (inBody ? (targetRef.current?.offsetTop || 0) + (targetRef.current?.clientHeight || 0) - (scrollableParents?.scrollTop || 0) + (scrollableParents?.offsetTop || 0) : (targetRef.current?.offsetTop || 0) + (targetRef.current?.clientHeight || 0)) + OFFSET;
|
|
2618
2616
|
const _topCollectionTop = !placement.includes('top') ? 0 : (inBody ? (targetRef.current?.offsetTop || 0) - (popupRef.current?.clientHeight || 0) - (scrollableParents?.scrollTop || 0) + (scrollableParents?.offsetTop || 0) : (targetRef.current?.offsetTop || 0) - (popupRef.current?.clientHeight || 0)) - OFFSET;
|
|
2619
2617
|
switch (placement) {
|
|
@@ -2654,31 +2652,34 @@ const usePopupPosition = ({
|
|
|
2654
2652
|
});
|
|
2655
2653
|
break;
|
|
2656
2654
|
}
|
|
2657
|
-
}
|
|
2658
|
-
|
|
2655
|
+
};
|
|
2656
|
+
const spaceAboveFromTop = Math.round(container?.top + container?.height) <= 0 || Math.round((targetRef.current?.offsetTop || 0) - (scrollableParents?.scrollTop || 0) + container?.height) <= 0;
|
|
2657
|
+
const spaceAboveFromBottom = Math.round((targetRef.current?.offsetTop || 0) - (scrollableParents?.offsetHeight || 0) - (scrollableParents?.scrollTop || 0) + container?.height) >= 0;
|
|
2658
|
+
if (spaceAboveFromTop || spaceAboveFromBottom) {
|
|
2659
|
+
setOpen(false);
|
|
2660
|
+
setPopupPosition({});
|
|
2661
|
+
return;
|
|
2662
|
+
}
|
|
2663
|
+
_calculation();
|
|
2664
|
+
}, [targetRef, popupRef, placement, inBody, setOpen]);
|
|
2659
2665
|
useEffect(() => {
|
|
2660
2666
|
if (!open) {
|
|
2661
2667
|
return;
|
|
2662
2668
|
}
|
|
2663
|
-
calculatePosition();
|
|
2669
|
+
calculatePosition(undefined);
|
|
2664
2670
|
const controller = new AbortController();
|
|
2665
|
-
const scrollableParents = getScrollParent(targetRef.current, true);
|
|
2666
2671
|
const options = {
|
|
2667
2672
|
passive: true,
|
|
2668
2673
|
signal: controller.signal
|
|
2669
2674
|
};
|
|
2675
|
+
const scrollableParents = getScrollParent(targetRef.current, true);
|
|
2670
2676
|
scrollableParents?.addEventListener("scroll", calculatePosition, options);
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
signal: controller.signal
|
|
2674
|
-
});
|
|
2677
|
+
document.body.addEventListener("scroll", calculatePosition, options);
|
|
2678
|
+
document.body.addEventListener("resize", calculatePosition, options);
|
|
2675
2679
|
return () => {
|
|
2676
2680
|
controller.abort();
|
|
2677
|
-
if (rafRef.current) {
|
|
2678
|
-
cancelAnimationFrame(rafRef.current);
|
|
2679
|
-
}
|
|
2680
2681
|
};
|
|
2681
|
-
}, [open, targetRef, calculatePosition]);
|
|
2682
|
+
}, [inBody, open, targetRef, calculatePosition]);
|
|
2682
2683
|
return {
|
|
2683
2684
|
popupStyle: {
|
|
2684
2685
|
zIndex: 10000,
|
|
@@ -2749,6 +2750,7 @@ const DatePicker = ({
|
|
|
2749
2750
|
popupRef,
|
|
2750
2751
|
placement,
|
|
2751
2752
|
open: isOpen,
|
|
2753
|
+
setOpen: setIsOpen,
|
|
2752
2754
|
inBody: getPopupContainer?.(targetRef.current)?.tagName === 'BODY'
|
|
2753
2755
|
});
|
|
2754
2756
|
useEffect(() => {
|
|
@@ -3036,7 +3038,7 @@ var DatePicker$1 = /*#__PURE__*/Object.freeze({
|
|
|
3036
3038
|
default: DatePicker
|
|
3037
3039
|
});
|
|
3038
3040
|
|
|
3039
|
-
var css_248z$i = ".xUi-rangepicker-range-container{font-size:14px;
|
|
3041
|
+
var css_248z$i = ".xUi-rangepicker-range-container{font-size:14px;user-select:none;width:fit-content}.xUi-rangepicker-range-input-wrapper{background-color:#fff;border-radius:6px;display:flex;transition:all .3s;width:100%}.xUi-rangepicker-range-input-wrapper:hover{border-color:#4096ff}.xUi-rangepicker-range-input{align-items:center;border-right:1px solid var(--xui-border-color);cursor:pointer;display:flex;flex:1;padding:4px 11px}.xUi-rangepicker-range-input:last-child{border-right:none}.xUi-rangepicker-range-input input{background:transparent;border:none;color:#000;cursor:pointer;font-size:14px;outline:none;width:100%}.xUi-rangepicker-range-input input::placeholder{color:#bfbfbf}.xUi-rangepicker-range-clear,.xUi-rangepicker-range-icon{align-items:center;display:flex;margin-left:8px;transition:color .3s}.xUi-rangepicker-range-icon{color:rgba(0,0,0,.25)}.xUi-rangepicker-range-clear{color:rgba(0,0,0,.45);cursor:pointer}.xUi-rangepicker-range-clear:hover{color:#000}.xUi-rangepicker-range-dropdown-wrapper{background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;left:0;margin-top:4px;min-width:560px;opacity:1;padding:8px;position:absolute;top:100%;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;z-index:1050}.xUi-rangepicker-range-dropdown-wrapper.show{display:flex}.xUi-rangepicker-dropdown-range,.xUi-rangepicker-range-dropdown{background-color:#fff;border:1px solid var(--xui-border-color);border-radius:6px;display:flex;overflow:hidden}.xUi-rangepicker-calendar{background:#fff;border-radius:6px;margin:12px}.xUi-rangepicker-calendar.month,.xUi-rangepicker-calendar.year{width:280px}.xUi-rangepicker-calendar-header{align-items:center;display:flex;font-weight:500;justify-content:space-between}.xUi-rangepicker-month,.xUi-rangepicker-year{background:none;border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;height:30px;line-height:30px;margin:7px;min-width:30px;text-align:center;transition:all .2s}.xUi-rangepicker-day:disabled,.xUi-rangepicker-month:disabled,.xUi-rangepicker-select:disabled,.xUi-rangepicker-year:disabled{background-color:var(--xui-color-disabled);cursor:not-allowed;opacity:.5}.xUi-rangepicker-day:not(:disabled):hover,.xUi-rangepicker-month:not(:disabled):hover,.xUi-rangepicker-year:not(:disabled):hover{background:var(--xui-primary-color-light);color:#fff}.xUi-rangepicker-calendar-header button,.xUi-rangepicker-dropdown-selects button,.xUi-rangepicker-nav-buttons button{background:transparent;border:none;color:#595959;cursor:pointer;font-size:14px;font-weight:600;line-height:1;padding:0 6px;transition:color .2s ease}.xUi-rangepicker-nav-buttons button{font-size:20px;font-weight:400}.xUi-rangepicker-calendar-header button:hover,.xUi-rangepicker-dropdown-selects button:hover,.xUi-rangepicker-nav-buttons button:hover{color:var(--xui-primary-color)}.xUi-rangepicker-input{align-items:center;background-color:transparent;border:1px solid var(--xui-border-color);border-radius:6px;color:var(--xui-text-color);cursor:pointer;display:flex;gap:8px;justify-content:space-between;padding:3px 7px;transition:all .3s}.xUi-rangepicker-input.noBordered{border:none!important}.xUi-rangepicker-input input{border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-sm);outline:none;padding:0}.xUi-rangepicker-input:placeholder-shown{text-overflow:ellipsis}.xUi-rangepicker-input:hover{border-color:var(--xui-primary-color)}.xUi-rangepicker-weekday-row{background-color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.1);display:grid;gap:4px;grid-template-columns:repeat(7,1fr);position:sticky;top:0;z-index:1}.xUi-rangepicker-weekday{align-items:center;color:var(--xui-text-color);display:flex;font-size:12px;font-weight:500;font-weight:600;height:30px;justify-content:center;text-align:center}.xUi-rangepicker-days-grid,.xUi-rangepicker-grid{display:grid;gap:2px;grid-template-columns:repeat(3,1fr)}.xUi-rangepicker-days-grid.day{grid-template-columns:repeat(7,0fr)}.xUi-rangepicker-day{background-color:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;height:30px;line-height:30px;text-align:center;transition:background-color .3s,color .3s;width:30px}.xUi-rangepicker-day:hover{background-color:var(--xui-primary-color);border-radius:4px;color:#fff}.xUi-rangepicker-day.xUi-rangepicker-other-month:hover{background-color:var(--xui-color-disabled)!important;color:var(--xui-text-color)}.xUi-rangepicker-range-end:not(.xUi-rangepicker-other-month),.xUi-rangepicker-range-start:not(.xUi-rangepicker-other-month),.xUi-rangepicker-selected{background-color:var(--xui-primary-color)!important;color:#fff!important;font-weight:600}.xUi-rangepicker-in-range{background-color:#f0f5ff}.xUi-rangepicker-hover-end{background-color:var(--xui-primary-color)!important;color:#fff}.xUi-rangepicker-disabled,.xUi-rangepicker-other-month:not(.xUi-rangepicker-in-range){color:#ccc}.xUi-rangepicker-disabled{cursor:not-allowed}.xUi-rangepicker-footer{display:flex;grid-column:span 7;justify-content:center;padding-top:6px}.xUi-rangepicker-select{background:none;border:none;color:var(--xui-primary-color);cursor:pointer}.xUi-rangepicker-input.sm{font-size:var(--xui-font-size-sm);padding:4px 8px}.xUi-rangepicker-input.md{font-size:var(--xui-font-size-md);padding:8px 12px}.xUi-rangepicker-input.lg{font-size:var(--xui-font-size-lg);padding:10px 16px}.xUi-rangepicker-dropdown-wrapper{opacity:0;pointer-events:none;position:absolute;transform:scale(.95);transition:opacity .2s ease,transform .2s ease;z-index:1000}.xUi-rangepicker-dropdown-wrapper.bottomLeft{left:0;margin-top:4px;top:100%}.xUi-rangepicker-dropdown-wrapper.bottomRight{margin-top:4px;right:0;top:100%}.xUi-rangepicker-dropdown-wrapper.topLeft{bottom:100%;left:0;margin-bottom:4px}.xUi-rangepicker-dropdown-wrapper.topRight{bottom:100%;margin-bottom:4px;right:0}.xUi-rangepicker-dropdown-wrapper.show{opacity:1;pointer-events:auto;transform:scale(1)}.xUi-rangepicker-large .xUi-rangepicker-selected-date{font-size:16px}.xUi-rangepicker-large .xUi-rangepicker-input{padding:11px}.xUi-rangepicker-middle .xUi-rangepicker-input{padding:6px 11px}.xUi-rangepicker-dropdown-trigger{background-color:#fff;border:1px solid var(--xui-border-color);border-radius:2px;cursor:pointer;line-height:32px;padding:0 8px}.xUi-rangepicker-dropdown-menu{background:#fff;border:1px solid var(--xui-border-color);box-shadow:0 2px 8px rgba(0,0,0,.15);max-height:200px;overflow-y:auto;position:absolute;z-index:1000}.xUi-rangepicker-dropdown-item{cursor:pointer;padding:4px 12px}.xUi-rangepicker-dropdown-item:hover{background:#f5f5f5}.xUi-rangepicker-dropdown-item.active{background-color:#e6f7ff;font-weight:700}.xUi-rangepicker-header{align-items:center;border-bottom:1px solid var(--xui-border-color);display:flex;gap:8px;justify-content:space-between;margin-bottom:8px;padding-bottom:12px;width:100%}.xUi-rangepicker-in-hover-range{background-color:#f0f5ff;border:1px dashed var(--xui-primary-color)!important;border-radius:4px!important}";
|
|
3040
3042
|
styleInject(css_248z$i);
|
|
3041
3043
|
|
|
3042
3044
|
const RangePicker = ({
|
|
@@ -3082,6 +3084,7 @@ const RangePicker = ({
|
|
|
3082
3084
|
popupRef,
|
|
3083
3085
|
placement,
|
|
3084
3086
|
open: isOpen,
|
|
3087
|
+
setOpen: setIsOpen,
|
|
3085
3088
|
inBody: getPopupContainer?.(targetRef.current)?.tagName === 'BODY'
|
|
3086
3089
|
});
|
|
3087
3090
|
const localeMonths = locale?.shortMonths || Array.from({
|
|
@@ -3400,6 +3403,7 @@ const TimePicker = ({
|
|
|
3400
3403
|
popupRef,
|
|
3401
3404
|
placement,
|
|
3402
3405
|
targetRef,
|
|
3406
|
+
setOpen: setOpen,
|
|
3403
3407
|
inBody: getPopupContainer?.(targetRef.current)?.tagName === 'BODY'
|
|
3404
3408
|
});
|
|
3405
3409
|
useEffect(() => {
|
|
@@ -5376,6 +5380,7 @@ const Dropdown = ({
|
|
|
5376
5380
|
targetRef,
|
|
5377
5381
|
popupRef,
|
|
5378
5382
|
placement,
|
|
5383
|
+
setOpen,
|
|
5379
5384
|
inBody: getPopupContainer?.(targetRef.current)?.tagName === 'BODY'
|
|
5380
5385
|
});
|
|
5381
5386
|
useEffect(() => {
|
|
@@ -5543,6 +5548,7 @@ const Popover = ({
|
|
|
5543
5548
|
popupRef,
|
|
5544
5549
|
placement,
|
|
5545
5550
|
open: isOpen,
|
|
5551
|
+
setOpen: setInnerOpen,
|
|
5546
5552
|
inBody: getPopupContainer?.(targetRef.current)?.tagName === 'BODY'
|
|
5547
5553
|
});
|
|
5548
5554
|
useEffect(() => {
|