x-ui-design 0.7.39 → 0.7.43

package/dist/index.esm.js

@@ -2603,7 +2603,7 @@ var RangePicker$1 = /*#__PURE__*/Object.freeze({
 	default: RangePicker
 });
 
-var css_248z$d = ".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;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-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 4px}.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%}.xUi-timepicker-popup-up{bottom:100%;margin-bottom:4px;top:auto!important}";
+var css_248z$d = ".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;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-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 4px}.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%}.xUi-timepicker-popup-up{bottom:100%;margin-bottom:4px}";
 styleInject(css_248z$d);
 
 const ConditionalWrapper = ({
@@ -2646,6 +2646,7 @@ const TimePicker = ({
   const hourRef = useRef(null);
   const minuteRef = useRef(null);
   const secondRef = useRef(null);
+  const [dropdownPosition, setDropdownPosition] = useState({});
   useEffect(() => {
     setInnerValue(propValue || defaultValue ? new Date(propValue || defaultValue) : null);
   }, [propValue]);
@@ -2827,6 +2828,83 @@ const TimePicker = ({
       }
     }
   };
+  const dropdownPossition = useCallback(() => {
+    if (!inputRef.current) {
+      return {};
+    }
+    const dropdownHeight = 230;
+    const inputPoss = inputRef.current?.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    const spaceBelow = windowHeight - (inputPoss.bottom || 0);
+    const spaceAbove = inputPoss.top;
+    const shouldShowAbove = spaceBelow < dropdownHeight;
+    const shouldShowBelow = spaceAbove < dropdownHeight;
+    if (open) {
+      if (getPopupContainer) {
+        if (!shouldShowBelow && !shouldShowAbove) {
+          if (!Object.keys(dropdownPosition).length) {
+            setDropdownPosition({
+              position: 'absolute',
+              top: (inputPoss.top || 0) + document.documentElement.scrollTop + (inputRef.current?.offsetHeight || 0),
+              left: (inputPoss.left || 0) + document.documentElement.scrollLeft,
+              height: 'max-content'
+            });
+          }
+          return;
+        }
+        if (!shouldShowBelow) {
+          setDropdownPosition({
+            position: 'absolute',
+            top: (inputPoss.top || 0) + document.documentElement.scrollTop - dropdownHeight,
+            left: (inputPoss.left || 0) + document.documentElement.scrollLeft,
+            height: 'max-content'
+          });
+        }
+        if (!shouldShowAbove) {
+          setDropdownPosition({
+            position: 'absolute',
+            top: (inputPoss.top || 0) + document.documentElement.scrollTop + (inputRef.current?.offsetHeight || 0),
+            left: (inputPoss.left || 0) + document.documentElement.scrollLeft,
+            height: 'max-content'
+          });
+        }
+      }
+    }
+  }, [open, inputRef.current]);
+  const getScrollParents = useCallback(element => {
+    const parents = [];
+    let current = element.parentElement;
+    while (current) {
+      if (current.scrollHeight > current.clientHeight) {
+        parents.push(current);
+      }
+      current = current.parentElement;
+    }
+    return parents;
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const _dropdownPossition = () => dropdownPossition();
+    _dropdownPossition();
+    const controller = new AbortController();
+    const scrollableParents = getScrollParents(inputRef.current);
+    scrollableParents.forEach(el => {
+      el.addEventListener('scroll', _dropdownPossition, {
+        passive: true,
+        signal: controller.signal
+      });
+    });
+    window.addEventListener('scroll', _dropdownPossition, {
+      passive: true,
+      signal: controller.signal
+    });
+    window.addEventListener('resize', _dropdownPossition, {
+      signal: controller.signal
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [open, getPopupContainer, dropdownPossition]);
   const renderOptions = () => {
     const hours = Array.from({
       length: HOURS + ADD_EMPTY_SECTION_COUNT
@@ -2950,12 +3028,8 @@ const TimePicker = ({
   }, /*#__PURE__*/React.createElement("div", {
     ref: popupRef,
     style: {
-      ...(getPopupContainer ? {
-        position: 'absolute',
-        top: (inputRef.current?.getBoundingClientRect().top || 0) + (inputRef.current?.offsetHeight || 0),
-        left: inputRef.current?.getBoundingClientRect().left,
-        height: 'max-content'
-      } : {})
+      ...dropdownPosition,
+      opacity: Object.keys(dropdownPosition).length ? 1 : 0
     },
     className: clsx([`${prefixCls}-popup`, {
       [`${prefixCls}-popup-up`]: openUpward