x-ui-design 0.7.36 → 0.7.38

package/dist/index.esm.js

@@ -2606,6 +2606,12 @@ var RangePicker$1 = /*#__PURE__*/Object.freeze({
 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}";
 styleInject(css_248z$d);
 
+const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children
+}) => condition ? wrapper(children) : children;
+
 const HOURS = 24;
 const INPUT_SIZE = 13;
 const TIME_OPTION_PADDING = 4;
@@ -2627,7 +2633,8 @@ const TimePicker = ({
   showNow = true,
   clearIcon = /*#__PURE__*/React.createElement(ClearIcon, null),
   suffixIcon = /*#__PURE__*/React.createElement(TimeIcon, null),
-  placeholder = 'Select time'
+  placeholder = 'Select time',
+  getPopupContainer
 }) => {
   const [open, setOpen] = useState(false);
   const [innerValue, setInnerValue] = useState(propValue || defaultValue ? new Date(propValue || defaultValue) : null);
@@ -2644,6 +2651,7 @@ const TimePicker = ({
       if (popupRef.current && !popupRef.current.contains(e.target) && inputRef.current && !inputRef.current.contains(e.target)) {
         setOpen(false);
         setTempValue(null);
+        setOpenUpward(false);
         if (!innerValue) {
           onChange?.(null, '');
         }
@@ -2667,20 +2675,20 @@ const TimePicker = ({
       scrollToTop(secondRef, second || 0);
     }
   }, [open, innerValue]);
-  useEffect(() => {
-    if (open && inputRef.current && popupRef.current) {
+  const decideOpenDirection = () => {
+    if (inputRef.current) {
       const inputRect = inputRef.current.getBoundingClientRect();
-      const popupRect = popupRef.current.getBoundingClientRect();
       const viewportHeight = window.innerHeight;
+      const popupHeight = 240;
       const spaceBelow = viewportHeight - inputRect.bottom;
       const spaceAbove = inputRect.top;
-      if (spaceBelow < popupRect.height && spaceAbove > popupRect.height) {
+      if (spaceBelow < popupHeight && spaceAbove > popupHeight) {
         setOpenUpward(true);
       } else {
         setOpenUpward(false);
       }
     }
-  }, [open]);
+  };
   useEffect(() => {
     onSelect?.(tempValue);
   }, [tempValue, onSelect]);
@@ -2902,7 +2910,10 @@ const TimePicker = ({
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-input-wrapper`,
-    onClick: () => setOpen(true)
+    onClick: () => {
+      decideOpenDirection();
+      setOpen(true);
+    }
   }, /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     size: INPUT_SIZE,
@@ -2927,14 +2938,26 @@ const TimePicker = ({
     className: `${prefixCls}-suffix`,
     onClick: e => {
       e.stopPropagation();
+      decideOpenDirection();
       setOpen(true);
     }
-  }, suffixIcon))), open && /*#__PURE__*/React.createElement("div", {
+  }, suffixIcon))), open && /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: getPopupContainer !== undefined,
+    wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(popupRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
+  }, /*#__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'
+      } : {})
+    },
     className: clsx([`${prefixCls}-popup`, {
       [`${prefixCls}-popup-up`]: openUpward
     }])
-  }, renderOptions()));
+  }, renderOptions())));
 };
 
 var TimePicker$1 = /*#__PURE__*/Object.freeze({
@@ -3469,12 +3492,6 @@ var Tag$1 = /*#__PURE__*/Object.freeze({
 	default: Tag
 });
 
-const ConditionalWrapper = ({
-  condition,
-  wrapper,
-  children
-}) => condition ? wrapper(children) : children;
-
 var css_248z$5 = "@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-select{background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);box-sizing:border-box;color:var(--xui-text-color);display:inline-flex;flex-direction:row-reverse;min-height:24px;padding:2px 8px;position:relative;width:100%}.xUi-select-disabled{background:rgba(0,0,0,.04)}.xUi-select-arrow{align-items:center;color:var(--xui-text-color-light);display:flex;gap:6px;margin:0 4px;pointer-events:all!important}.xUi-select-arrow svg{align-items:center;display:flex;justify-content:center}.xUi-select-loading{animation:spin 1s linear infinite;color:var(--xui-text-color-light);display:inline-block;margin:0 8px}.xUi-select .xUi-select-trigger{align-items:center;background:transparent;border-radius:var(--xui-border-radius-sm);cursor:pointer;display:flex;justify-content:space-between;width:100%}.xUi-select .xUi-select-clear-btn{background:none;border:none;color:#999;cursor:pointer;font-size:var(--xui-font-size-lg);line-height:1;margin:0 8px;padding:0}.xUi-select .xUi-select-clear-btn:hover{color:var(--xui-primary-color)}.xUi-select-dropdown{background-color:var(--xui-select-background-color);border-radius:var(--xui-border-radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.15);left:0;margin-top:5px;max-height:350px;overflow-y:auto;position:absolute;right:unset;top:100%;width:inherit;z-index:10}.xUi-select-dropdown.bottomRight,.xUi-select-dropdown.topRight{left:unset;right:0}.xUi-select .xUi-select-loading-spinner{color:#999;padding:10px;text-align:center}.xUi-select:focus-within{border-color:var(--xui-primary-color-light);box-shadow:none}.xUi-select:hover:not(.xUi-select-disabled){border-color:var(--xui-primary-color)}.xUi-select-disabled,.xUi-select-disabled .xUi-select-input,.xUi-select-disabled .xUi-select-trigger{cursor:not-allowed!important;opacity:.6!important}.xUi-select-selected-icon{color:var(--xui-primary-color-light)}.xUi-select-error{border-color:var(--xui-error-color)}.xUi-select-arrow .error-svg-icon,.xUi-select-error .error-svg-icon{color:var(--xui-error-color)}.xUi-select .xUi-select-input{align-items:center;background:transparent;border:none;color:var(--xui-text-color);cursor:pointer;display:inline-flex;font-size:var(--xui-font-size-md);height:auto;height:-webkit-fit-content;outline:none;padding:0;user-select:none;width:100%}.xUi-select .xUi-select-input:focus{border:none;box-shadow:none;outline:none}.xUi-select.middle{border-radius:var(--xui-border-radius-md);min-height:30px}.xUi-select.middle,.xUi-select.middle input{font-size:var(--xui-font-size-md)}.xUi-select.middle .xUi-select-trigger{border-radius:var(--xui-border-radius-md)}.xUi-select.large{font-size:var(--xui-font-size-lg);min-height:44px}.xUi-select.large,.xUi-select.large .xUi-select-trigger{border-radius:var(--xui-border-radius-lg)}.xUi-select input{font-size:var(--xui-font-size-lg)}";
 styleInject(css_248z$5);