x-ui-design 0.8.51 → 0.8.53

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 (23) hide show
  1. package/dist/esm/types/hooks/usePosition.d.ts +1 -1
  2. package/dist/esm/types/types/datepicker.d.ts +2 -2
  3. package/dist/esm/types/types/dropdown.d.ts +1 -1
  4. package/dist/esm/types/types/popover.d.ts +1 -1
  5. package/dist/esm/types/types/select.d.ts +1 -1
  6. package/dist/index.esm.js +11 -44
  7. package/dist/index.esm.js.map +1 -1
  8. package/dist/index.js +11 -44
  9. package/dist/index.js.map +1 -1
  10. package/lib/components/DatePicker/RangePicker/RangePicker.tsx +1 -1
  11. package/lib/components/DatePicker/TimePicker/style.css +0 -6
  12. package/lib/components/Dropdown/Dropdown.tsx +10 -13
  13. package/lib/components/Dropdown/style.css +1 -1
  14. package/lib/components/Menu/index.css +1 -1
  15. package/lib/hooks/usePosition.ts +10 -54
  16. package/lib/styles/global.css +0 -3
  17. package/lib/types/datepicker.ts +2 -2
  18. package/lib/types/dropdown.ts +1 -1
  19. package/lib/types/popover.ts +1 -1
  20. package/lib/types/select.ts +1 -1
  21. package/package.json +1 -1
  22. package/src/app/globals.css +0 -3
  23. package/src/app/page.tsx +20 -17
package/dist/esm/types/hooks/usePosition.d.ts CHANGED
@@ -4,7 +4,7 @@ type TPosition = {
4
4
  isOpen: boolean;
5
5
  popupRef: RefObject<HTMLDivElement | null>;
6
6
  triggerRef: RefObject<HTMLDivElement | null>;
7
- getPopupContainer?: HTMLElement | ParentNode;
7
+ getPopupContainer?: HTMLElement;
8
8
  placement?: Placement;
9
9
  offset?: number;
10
10
  listenPopoverPossitions?: CSSProperties;
package/dist/esm/types/types/datepicker.d.ts CHANGED
@@ -34,7 +34,7 @@ export type TDatePickerProps = DefaultProps & {
34
34
  onChange?: (date: RuleType | RuleType[], dateString: string | string[]) => void;
35
35
  onCalendarChange?: (date: RuleType | RuleType[], dateString: string | string[], info: BaseInfo) => void;
36
36
  onVisibleChange?: ((open: boolean) => void) | undefined;
37
- getPopupContainer?: ((node: HTMLElement) => HTMLElement | ParentNode) | undefined;
37
+ getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
38
38
  showToday?: boolean;
39
39
  inputReadOnly?: boolean;
40
40
  picker?: PanelMode;
@@ -115,7 +115,7 @@ export type TimePickerProps = DefaultProps & {
115
115
  onSelect?: ((value: Date | null) => void) | undefined;
116
116
  showNow?: boolean;
117
117
  clearIcon?: ReactNode;
118
- getPopupContainer?: ((node: HTMLElement) => HTMLElement | ParentNode) | undefined;
118
+ getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
119
119
  suffixIcon?: ReactNode;
120
120
  placeholder?: string;
121
121
  placement?: Placement;
package/dist/esm/types/types/dropdown.d.ts CHANGED
@@ -20,7 +20,7 @@ export type DropdownProps = DefaultProps & {
20
20
  placement?: Placement;
21
21
  overlayClassName?: string;
22
22
  overlayStyle?: CSSProperties;
23
- getPopupContainer?: ((node: HTMLElement) => HTMLElement | ParentNode) | undefined;
23
+ getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
24
24
  destroyOnHidden?: boolean;
25
25
  disabled?: boolean;
26
26
  arrow?: boolean;
package/dist/esm/types/types/popover.d.ts CHANGED
@@ -12,5 +12,5 @@ export type PopoverProps = DefaultProps & {
12
12
  visible?: boolean;
13
13
  listenPopoverPossitions?: CSSProperties;
14
14
  onVisibleChange?: ((open: boolean) => void) | undefined;
15
- getPopupContainer?: ((node: HTMLElement) => HTMLElement | ParentNode) | undefined;
15
+ getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
16
16
  };
package/dist/esm/types/types/select.d.ts CHANGED
@@ -43,7 +43,7 @@ export type SelectProps = DefaultProps & {
43
43
  searchIcon?: ReactNode;
44
44
  open?: boolean;
45
45
  notFoundContent?: ReactNode;
46
- getPopupContainer?: ((node: HTMLElement) => HTMLElement | ParentNode) | undefined;
46
+ getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
47
47
  dropdownRender?: (menu: ReactNode) => ReactNode;
48
48
  feedbackIcons?: boolean;
49
49
  placement?: Placement;
package/dist/index.esm.js CHANGED
@@ -442,7 +442,7 @@ function styleInject(css, ref) {
442
442
  }
443
443
  }
444
444
 
445
- var css_248z$q = ":root{--xui-color-hover:#f5f5f5;--xui-color-disabled:#e6e6e6;--xui-primary-color:#1677ff;--xui-primary-color-light:#40a9ff;--xui-text-color:rgba(0,0,0,.88);--xui-text-color-light:rgba(0,0,0,.5);--xui-error-color:#ff4d4f;--xui-error-color-light:#ff6668;--xui-success-color:#52c41a;--xui-background-color:#fff;--xui-font-size-xs:12px;--xui-font-size-sm:14px;--xui-font-size-md:14px;--xui-font-size-lg:16px;--xui-border-radius-sm:4px;--xui-border-radius-md:4px;--xui-border-radius-lg:6px;--xui-border-color:#d9d9d9;--xui-select-primary-color:var(--xui-primary-color);--xui-select-background-color:var(--xui-background-color);--xui-menu-inline-bg:rgba(0,0,0,.02);--xui-result-bg:#fff;--xui-result-color:rgba(0,0,0,.85);--xui-subtle-color:rgba(0,0,0,.45);--xui-padding:24px;--xui-gap:16px;--xui-icon-size:72px;--xui-max-width:560px;--xui-font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial}html{font-family:sans-serif}.globalEllipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
445
+ var css_248z$q = ":root{--xui-color-hover:#f5f5f5;--xui-color-disabled:#e6e6e6;--xui-primary-color:#1677ff;--xui-primary-color-light:#40a9ff;--xui-text-color:rgba(0,0,0,.88);--xui-text-color-light:rgba(0,0,0,.5);--xui-error-color:#ff4d4f;--xui-error-color-light:#ff6668;--xui-success-color:#52c41a;--xui-background-color:#fff;--xui-font-size-xs:12px;--xui-font-size-sm:14px;--xui-font-size-md:14px;--xui-font-size-lg:16px;--xui-border-radius-sm:4px;--xui-border-radius-md:4px;--xui-border-radius-lg:6px;--xui-border-color:#d9d9d9;--xui-select-primary-color:var(--xui-primary-color);--xui-select-background-color:var(--xui-background-color);--xui-result-bg:#fff;--xui-result-color:rgba(0,0,0,.85);--xui-subtle-color:rgba(0,0,0,.45);--xui-padding:24px;--xui-gap:16px;--xui-icon-size:72px;--xui-max-width:560px;--xui-font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial}html{font-family:sans-serif}.globalEllipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
446
446
  styleInject(css_248z$q);
447
447
 
448
448
  const ClearIcon = () => /*#__PURE__*/React.createElement("svg", {
@@ -2594,15 +2594,6 @@ function getScrollParent(el, includeSelf = false) {
2594
2594
  }
2595
2595
  return document.scrollingElement;
2596
2596
  }
2597
- const clampWithinContainer = (left, popupWidth, containerRect) => {
2598
- const minLeft = containerRect.left + document.documentElement.scrollLeft;
2599
- const maxLeft = containerRect.right + document.documentElement.scrollLeft - popupWidth;
2600
- return {
2601
- minLeft,
2602
- maxLeft,
2603
- leftPosition: Math.min(Math.max(left, minLeft), maxLeft)
2604
- };
2605
- };
2606
2597
  const usePosition = ({
2607
2598
  isOpen,
2608
2599
  offset = 4,
@@ -2625,14 +2616,9 @@ const usePosition = ({
2625
2616
  const spaceBelow = containerRect.bottom - inputRect.bottom;
2626
2617
  const _shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
2627
2618
  const hasRight = placement?.includes('Right');
2619
+ setShowPlacement(_shouldShowAbove ? 'bottom' : '');
2628
2620
  if (getPopupContainer) {
2629
- const {
2630
- minLeft,
2631
- maxLeft,
2632
- leftPosition
2633
- } = clampWithinContainer(hasRight ? (inputRect.left || 0) + (triggerRef.current?.offsetWidth || 0) - (popupRef.current?.offsetWidth || 0) : (inputRect.left || 0) + document.documentElement.scrollLeft, popupRef.current?.offsetWidth || 0, containerRect);
2634
- const _center = minLeft + maxLeft < (popupRef.current?.offsetWidth || 0) ? 'center' : '';
2635
- setShowPlacement(_shouldShowAbove ? `bottom ${_center}` : `${_center}`);
2621
+ const leftPosition = hasRight ? (inputRect.left || 0) + (triggerRef.current?.offsetWidth || 0) - (popupRef.current?.offsetWidth || 0) : (inputRect.left || 0) + document.documentElement.scrollLeft;
2636
2622
  const _top = (inputRect.top || 0) + document.documentElement.scrollTop;
2637
2623
  if (_shouldShowAbove) {
2638
2624
  setDropdownPosition({
@@ -2649,27 +2635,9 @@ const usePosition = ({
2649
2635
  setDropdownPosition({
2650
2636
  top: (_shouldShowAbove ? triggerRef.current.offsetTop - (popupRef.current?.offsetHeight || dropdownHeight) - offset * 2 : triggerRef.current.offsetTop + triggerRef.current?.offsetHeight) + offset,
2651
2637
  ...(hasRight ? {
2652
- left: (() => {
2653
- const {
2654
- minLeft,
2655
- maxLeft,
2656
- leftPosition
2657
- } = clampWithinContainer(triggerRef.current.offsetLeft + (triggerRef.current?.offsetWidth || 0) - (popupRef.current?.offsetWidth || dropdownHeight), popupRef.current?.offsetWidth || dropdownHeight, containerRect);
2658
- const _center = minLeft + maxLeft < (popupRef.current?.offsetWidth || 0) ? 'center' : '';
2659
- setShowPlacement(_shouldShowAbove ? `bottom ${_center}` : `${_center}`);
2660
- return leftPosition;
2661
- })()
2638
+ left: triggerRef.current.offsetLeft + (triggerRef.current?.offsetWidth || 0) - (popupRef.current?.offsetWidth || 0)
2662
2639
  } : {
2663
- left: (() => {
2664
- const {
2665
- minLeft,
2666
- maxLeft,
2667
- leftPosition
2668
- } = clampWithinContainer(triggerRef.current.offsetLeft, popupRef.current?.offsetWidth || dropdownHeight, containerRect);
2669
- const _center = minLeft + maxLeft < (popupRef.current?.offsetWidth || 0) ? 'center' : '';
2670
- setShowPlacement(_shouldShowAbove ? `bottom ${_center}` : `${_center}`);
2671
- return leftPosition;
2672
- })()
2640
+ left: triggerRef.current.offsetLeft
2673
2641
  })
2674
2642
  });
2675
2643
  }
@@ -3367,7 +3335,7 @@ var RangePicker$1 = /*#__PURE__*/Object.freeze({
3367
3335
  default: RangePicker
3368
3336
  });
3369
3337
 
3370
- var css_248z$h = ".xUi-timepicker-wrapper{display:inline-block;font-size:14px;position:relative}.xUi-timepicker-input-wrapper{position:relative;width:100%}.xUi-timepicker-input{border:1px solid var(--xui-border-color);border-radius:6px;box-sizing:border-box;font-size:14px;height:32px;line-height:32px;padding:4px 11px;transition:all .3s;width:100%}.xUi-timepicker-input:focus,.xUi-timepicker-input:hover{border-color:var(--xui-primary-color-light)}.xUi-timepicker-input:focus{outline:none}.xUi-timepicker-input::placeholder{opacity:.6}.xUi-timepicker-clear{color:rgba(0,0,0,.45);cursor:pointer;font-size:12px;position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2}.xUi-timepicker-clear:hover{color:rgba(0,0,0,.75)}.xUi-timepicker-popup{background:#fff;border:1px solid var(--xui-border-color);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;left:0;min-width:max-content;padding:8px 0;z-index:1}.xUi-timepicker-panel{display:flex;width:100%}.xUi-timepicker-column{align-items:center;display:flex;flex:1;flex-direction:column;margin-bottom:5px;max-height:169px;overflow-x:hidden;overflow-y:auto;padding-left:4px;width:52px}.xUi-timepicker-column::-webkit-scrollbar,.xUi-timepicker-column::-webkit-scrollbar-thumb{width:4px}.xUi-timepicker-column:nth-child(2){border-left:1px solid var(--xui-border-color);border-right:1px solid var(--xui-border-color)}.xUi-timepicker-cell{align-items:center;border-radius:4px;cursor:pointer;display:flex;font-size:14px;justify-content:center;margin-bottom:2px;padding:6px 0;text-align:center;transition:background .3s;width:44px}.xUi-timepicker-cell:hover{background-color:#e6f4ff}.xUi-timepicker-cell-selected{background-color:#e6f4ff;font-weight:500}.xUi-timepicker-cell-disabled{color:rgba(0,0,0,.25);pointer-events:none;user-select:none}.xUi-timepicker-now-btn{color:#4096ff;cursor:pointer;font-weight:500;margin-top:10px;padding:0 0 4px;text-align:center;transition:background .3s}.xUi-timepicker-icons{align-items:center;display:flex;gap:4px;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.xUi-timepicker-suffix{align-items:center;cursor:pointer;display:flex;justify-content:center}.xUi-timepicker-suffix svg{color:#999;height:14px;width:14px}.xUi-timepicker-clear{right:0;top:1px}.xUi-timepicker-actions{align-items:center;border-top:1px solid var(--xui-border-color);display:flex;justify-content:space-between;padding:0 8px}.xUi-timepicker-ok-btn{background-color:var(--xui-primary-color);border:none;border-radius:4px;color:#fff;cursor:pointer;margin-top:7px;outline:none;padding:4px 8px;transition:.3s ease}.xUi-timepicker-ok-btn:disabled{background-color:var(--xui-color-disabled);color:grey;font-size:13px}.xUi-timepicker-ok-btn:not(:disabled):hover{background-color:var(--xui-primary-color-light)}.xUi-timepicker-popup{margin-top:4px;position:absolute;top:100%}";
3338
+ var css_248z$h = ".xUi-timepicker-wrapper{display:inline-block;font-size:14px;position:relative}.xUi-timepicker-input-wrapper{position:relative;width:100%}.xUi-timepicker-input{border:1px solid var(--xui-border-color);border-radius:6px;box-sizing:border-box;font-size:14px;height:32px;line-height:32px;padding:4px 11px;transition:all .3s;width:100%}.xUi-timepicker-input:focus,.xUi-timepicker-input:hover{border-color:var(--xui-primary-color-light)}.xUi-timepicker-input:focus{outline:none}.xUi-timepicker-input::placeholder{opacity:.6}.xUi-timepicker-clear{color:rgba(0,0,0,.45);cursor:pointer;font-size:12px;position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2}.xUi-timepicker-clear:hover{color:rgba(0,0,0,.75)}.xUi-timepicker-popup{background:#fff;border:1px solid var(--xui-border-color);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;left:0;min-width:max-content;padding:8px 0;position:absolute;top:100%;z-index:1}.xUi-timepicker-panel{display:flex;width:100%}.xUi-timepicker-column{align-items:center;display:flex;flex:1;flex-direction:column;margin-bottom:5px;max-height:169px;overflow-x:hidden;overflow-y:auto;padding-left:4px;width:52px}.xUi-timepicker-column::-webkit-scrollbar,.xUi-timepicker-column::-webkit-scrollbar-thumb{width:4px}.xUi-timepicker-column:nth-child(2){border-left:1px solid var(--xui-border-color);border-right:1px solid var(--xui-border-color)}.xUi-timepicker-cell{align-items:center;border-radius:4px;cursor:pointer;display:flex;font-size:14px;justify-content:center;margin-bottom:2px;padding:6px 0;text-align:center;transition:background .3s;width:44px}.xUi-timepicker-cell:hover{background-color:#e6f4ff}.xUi-timepicker-cell-selected{background-color:#e6f4ff;font-weight:500}.xUi-timepicker-cell-disabled{color:rgba(0,0,0,.25);pointer-events:none;user-select:none}.xUi-timepicker-now-btn{color:#4096ff;cursor:pointer;font-weight:500;margin-top:10px;padding:0 0 4px;text-align:center;transition:background .3s}.xUi-timepicker-icons{align-items:center;display:flex;gap:4px;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.xUi-timepicker-suffix{align-items:center;cursor:pointer;display:flex;justify-content:center}.xUi-timepicker-suffix svg{color:#999;height:14px;width:14px}.xUi-timepicker-clear{right:0;top:1px}.xUi-timepicker-actions{align-items:center;border-top:1px solid var(--xui-border-color);display:flex;justify-content:space-between;padding:0 8px}.xUi-timepicker-ok-btn{background-color:var(--xui-primary-color);border:none;border-radius:4px;color:#fff;cursor:pointer;margin-top:7px;outline:none;padding:4px 8px;transition:.3s ease}.xUi-timepicker-ok-btn:disabled{background-color:var(--xui-color-disabled);color:grey;font-size:13px}.xUi-timepicker-ok-btn:not(:disabled):hover{background-color:var(--xui-primary-color-light)}";
3371
3339
  styleInject(css_248z$h);
3372
3340
 
3373
3341
  const HOURS = 24;
@@ -5172,7 +5140,7 @@ var SubMenu$1 = /*#__PURE__*/Object.freeze({
5172
5140
  default: SubMenu
5173
5141
  });
5174
5142
 
5175
- var css_248z$3 = ".xUi-menu{box-shadow:0 0 4px rgba(0,0,0,.15);font-size:14px;user-select:none}.xUi-menu,.xUi-menu-sub-list{border-radius:4px;display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:4px}.xUi-menu-sub-list{background:var(--xui-background-color);height:max-content}.xUi-menu-item-group{padding:0 24px!important}.xUi-menu-vertical .xUi-menu-sub-list{background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.15);left:100%;min-width:160px;position:absolute;right:-100%;top:0;width:min-content;z-index:1}.xUi-menu-horizontal{display:flex;flex-direction:row}.xUi-menu-item{align-items:center;border-radius:4px;color:var(--xui-text-color);cursor:pointer;display:flex;height:40px;padding:0 12px;transition:background .3s}.xUi-menu-item:hover{background:rgba(0,0,0,.04)}.xUi-menu-item-icon{margin-right:8px}.xUi-menu-sub{border-radius:6px;position:relative}.xUi-menu-sub-title{align-items:center;cursor:pointer;display:flex;height:40px;padding:0 12px;&:hover{background-color:var(--xui-color-hover);border-radius:6px}}.xUi-menu-sub-label{flex:1}.xUi-menu-sub-arrow{margin-left:8px;transition:transform .2s}.xUi-menu-vertical .xUi-menu-sub-arrow{transform:rotate(-90deg)}.xUi-menu-group{list-style:none;margin:0;padding:0}.xUi-menu-group-title{color:rgba(0,0,0,.45);font-size:12px;padding:8px 12px}.xUi-menu-group-list{list-style:none;margin:0;padding:0}.xUi-menu-divider{border-bottom:1px solid var(--xui-color-disabled);display:block;margin:0 auto;width:calc(100% - 16px)}.xUi-menu-item.xUi-menu-item-disabled{cursor:auto;opacity:.6;&:hover{background-color:unset}}.xUi-menu-inline .xUi-menu-sub-list{background-color:var(--xui-menu-inline-bg)}.xUi-menu-inline .xUi-menu-item{padding:0 24px}.xUi-menu-inline .xUi-menu-sub-title{padding:0 20px}.xUi-menu-inline .xUi-menu-sub-list-sub .xUi-menu-item{padding:0 30px}";
5143
+ var css_248z$3 = ".xUi-menu{box-shadow:0 0 4px rgba(0,0,0,.15);font-size:14px;user-select:none}.xUi-menu,.xUi-menu-sub-list{border-radius:4px;display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:4px}.xUi-menu-sub-list{background:var(--xui-background-color);height:max-content}.xUi-menu-item-group{padding:0 24px!important}.xUi-menu-vertical .xUi-menu-sub-list{background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.15);left:100%;min-width:160px;position:absolute;right:-100%;top:0;width:min-content;z-index:1}.xUi-menu-horizontal{display:flex;flex-direction:row}.xUi-menu-item{align-items:center;border-radius:4px;color:var(--xui-text-color);cursor:pointer;display:flex;height:40px;padding:0 12px;transition:background .3s}.xUi-menu-item:hover{background:rgba(0,0,0,.04)}.xUi-menu-item-icon{margin-right:8px}.xUi-menu-sub{border-radius:6px;position:relative}.xUi-menu-sub-title{align-items:center;cursor:pointer;display:flex;height:40px;padding:0 12px;&:hover{background-color:var(--xui-color-hover);border-radius:6px}}.xUi-menu-sub-label{flex:1}.xUi-menu-sub-arrow{margin-left:8px;transition:transform .2s}.xUi-menu-vertical .xUi-menu-sub-arrow{transform:rotate(-90deg)}.xUi-menu-group{list-style:none;margin:0;padding:0}.xUi-menu-group-title{color:rgba(0,0,0,.45);font-size:12px;padding:8px 12px}.xUi-menu-group-list{list-style:none;margin:0;padding:0}.xUi-menu-divider{border-bottom:1px solid var(--xui-color-disabled);display:block;margin:0 auto;width:calc(100% - 16px)}.xUi-menu-item.xUi-menu-item-disabled{cursor:auto;opacity:.6;&:hover{background-color:unset}}.xUi-menu-inline .xUi-menu-sub-list{background-color:var(--xui-background-color)}.xUi-menu-inline .xUi-menu-item{padding:0 24px}.xUi-menu-inline .xUi-menu-sub-title{padding:0 20px}.xUi-menu-inline .xUi-menu-sub-list-sub .xUi-menu-item{padding:0 30px}";
5176
5144
  styleInject(css_248z$3);
5177
5145
 
5178
5146
  const MenuContext = /*#__PURE__*/createContext(null);
@@ -5348,7 +5316,7 @@ var Menu$1 = /*#__PURE__*/Object.freeze({
5348
5316
  default: Menu
5349
5317
  });
5350
5318
 
5351
- var css_248z$2 = ".xUi-dropdown-overlay{background:var(--xui-menu-inline-bg);border:1px solid var(--xui-border-color);border-radius:8px;box-shadow:0 2px 18px rgba(0,0,0,.08);min-width:160px;padding:4px 0;position:absolute;&:after,&:before{content:\"\";height:10px;position:absolute;top:-10px;width:100%;z-index:1}&:after{bottom:-10px;top:unset}}.xUi-dropdown-overlay>div,.xUi-dropdown-overlay>select,.xUi-dropdown-overlay>ul{box-shadow:unset}.xUi-dropdown-overlay .xUi-dropdown-menu{margin:0;padding:0 4px;position:relative}.xUi-dropdown-overlay .xUi-dropdown-item{border-radius:8px;color:var(--xui-text-color);cursor:pointer;font-size:14px;list-style:none;padding:8px 12px;user-select:none}.xUi-dropdown-overlay .xUi-dropdown-item:focus,.xUi-dropdown-overlay .xUi-dropdown-item:hover{background:var(--xui-color-hover);outline:none}.xUi-dropdown-overlay .xUi-dropdown-item.disabled{cursor:not-allowed;opacity:.5}.xUi-dropdown-overlay .xUi-dropdown-item.danger{color:var(--xui-error-color-light);&:hover{background-color:var(--xui-error-color-light);color:var(--xui-background-color)}}.xUi-dropdown-arrow{background:var(--xui-background-color);border-left:.5px solid var(--xui-border-color);border-top:.5px solid var(--xui-border-color);height:10px;left:12px;position:absolute;top:-6px;transform:rotate(45deg);width:10px}.xUi-dropdown-bottomRight .xUi-dropdown-arrow,.xUi-dropdown-right .xUi-dropdown-arrow,.xUi-dropdown-topRight .xUi-dropdown-arrow{left:unset;right:12px}.xUi-dropdown-arrow.bottom{border-bottom:.5px solid var(--xui-border-color);border-left:unset;border-right:.5px solid var(--xui-border-color);border-top:unset;bottom:-6px;top:unset}.xUi-dropdown-arrow.center{left:0;margin:0 auto;right:0}";
5319
+ var css_248z$2 = ".xUi-dropdown-overlay{background:var(--xui-background-color);border:1px solid var(--xui-border-color);border-radius:8px;box-shadow:0 2px 18px rgba(0,0,0,.08);min-width:160px;padding:4px 0;position:absolute;&:after,&:before{content:\"\";height:10px;position:absolute;top:-10px;width:100%;z-index:1}&:after{bottom:-10px;top:unset}}.xUi-dropdown-overlay>div,.xUi-dropdown-overlay>select,.xUi-dropdown-overlay>ul{box-shadow:unset}.xUi-dropdown-overlay .xUi-dropdown-menu{margin:0;padding:0 4px;position:relative}.xUi-dropdown-overlay .xUi-dropdown-item{border-radius:8px;color:var(--xui-text-color);cursor:pointer;font-size:14px;list-style:none;padding:8px 12px;user-select:none}.xUi-dropdown-overlay .xUi-dropdown-item:focus,.xUi-dropdown-overlay .xUi-dropdown-item:hover{background:var(--xui-color-hover);outline:none}.xUi-dropdown-overlay .xUi-dropdown-item.disabled{cursor:not-allowed;opacity:.5}.xUi-dropdown-overlay .xUi-dropdown-item.danger{color:var(--xui-error-color-light);&:hover{background-color:var(--xui-error-color-light);color:var(--xui-background-color)}}.xUi-dropdown-arrow{background:var(--xui-background-color);border-left:.5px solid var(--xui-border-color);border-top:.5px solid var(--xui-border-color);height:10px;left:12px;position:absolute;top:-6px;transform:rotate(45deg);width:10px}.xUi-dropdown-bottomRight .xUi-dropdown-arrow,.xUi-dropdown-right .xUi-dropdown-arrow,.xUi-dropdown-topRight .xUi-dropdown-arrow{left:unset;right:12px}.xUi-dropdown-arrow.bottom{border-bottom:.5px solid var(--xui-border-color);border-left:unset;border-right:.5px solid var(--xui-border-color);border-top:unset;bottom:-6px;top:unset}.xUi-dropdown-arrow.center{left:0;margin:0 auto;right:0}";
5352
5320
  styleInject(css_248z$2);
5353
5321
 
5354
5322
  const Dropdown = ({
@@ -5475,8 +5443,7 @@ const Dropdown = ({
5475
5443
  }, "Empty menu")));
5476
5444
  return /*#__PURE__*/React.createElement("div", {
5477
5445
  ref: triggerRef,
5478
- className: className
5479
- }, /*#__PURE__*/React.createElement("div", {
5446
+ className: className,
5480
5447
  onClick: onTriggerClick,
5481
5448
  onMouseEnter: onTriggerMouseEnter,
5482
5449
  onMouseLeave: onTriggerMouseLeave,
@@ -5484,10 +5451,10 @@ const Dropdown = ({
5484
5451
  "aria-haspopup": "menu",
5485
5452
  style: {
5486
5453
  width: 'fit-content',
5487
- height: '-webkit-fill-available'
5454
+ height: 'fit-content'
5488
5455
  },
5489
5456
  "aria-expanded": open
5490
- }, children, open && popup, !open && !destroyOnHidden && null));
5457
+ }, children, open && popup, !open && !destroyOnHidden && null);
5491
5458
  };
5492
5459
  function MenuInner({
5493
5460
  items,