x-ui-design 0.9.35 → 0.9.37

package/dist/esm/types/components/DatePicker/RangePicker/RangePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { TRangePickerProps } from '../../../types/datepicker';
 import './style.css';
-declare const RangePicker: ({ prefixCls, value, onChange, placeholder, disabled, error, format, prefix, allowClear, inputReadOnly, size, picker, locale, disabledDate, onVisibleChange, onCalendarChange, style, className, separator, defaultValue, bordered, getPopupContainer, placement }: TRangePickerProps) => React.JSX.Element;
+declare const RangePicker: ({ prefixCls, value, onChange, placeholder, disabled, error, format, prefix, allowClear, inputReadOnly, size, picker, locale, disabledDate, onVisibleChange, onCalendarChange, style, className, separator, defaultValue, bordered, getPopupContainer, placement, showInnerContent }: TRangePickerProps) => React.JSX.Element;
 export default RangePicker;

package/dist/esm/types/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DropdownProps } from '../../types/dropdown';
 import './style.css';
-declare const Dropdown: ({ children, menu, open: controlledOpen, defaultOpen, onVisibleChange, trigger, placement, overlayClassName, overlayStyle, getPopupContainer, destroyOnHidden, disabled, arrow, autoFocus, popupRender, className, overlay, prefixCls, }: DropdownProps) => React.JSX.Element;
+declare const Dropdown: ({ children, menu, open: controlledOpen, defaultOpen, onVisibleChange, trigger, placement, overlayClassName, overlayStyle, getPopupContainer, destroyOnHidden, disabled, arrow, autoFocus, popupRender, className, overlay, prefixCls, showInnerContent }: DropdownProps) => React.JSX.Element;
 export default Dropdown;

package/dist/esm/types/components/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { PopoverProps } from "../../types/popover";
 import './style.css';
-declare const Popover: ({ prefixCls, content, children, trigger, placement, open, visible, title, style, overlayClassName, overlayStyle, listenPopoverPositions, placementPositionOffset, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ prefixCls, content, children, trigger, placement, open, visible, title, style, overlayClassName, overlayStyle, showInnerContent, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
 export default Popover;

package/dist/esm/types/hooks/usePopupPosition.d.ts

@@ -7,8 +7,9 @@ type TPopupPosition = {
     popupRef: RefObject<HTMLDivElement | null>;
     placement?: Placement;
     popupContainer?: HTMLElement | null;
+    showInnerContent?: boolean;
 };
-export declare const usePopupPosition: ({ open, setOpen, popupRef, targetRef, placement, popupContainer, }: TPopupPosition) => {
+export declare const usePopupPosition: ({ open, setOpen, popupRef, targetRef, placement, popupContainer, showInnerContent }: TPopupPosition) => {
     _placement: Placement;
     popupStyle: CSSProperties;
 };

package/dist/esm/types/types/datepicker.d.ts

@@ -40,6 +40,7 @@ export type TDatePickerProps = DefaultProps & {
     picker?: PanelMode;
     bordered?: boolean;
     defaultPickerValue?: Date;
+    showInnerContent?: boolean;
 };
 export type TRangePickerProps = Omit<TDatePickerProps, 'placeholder' | 'value' | 'defaultValue'> & {
     placeholder?: string[];
@@ -119,4 +120,5 @@ export type TimePickerProps = DefaultProps & {
     suffixIcon?: ReactNode;
     placeholder?: string;
     placement?: Placement;
+    showInnerContent?: boolean;
 };

package/dist/esm/types/types/dropdown.d.ts

@@ -28,6 +28,7 @@ export type DropdownProps = DefaultProps & {
     autoAdjustOverflow?: boolean;
     popupRender?: (node: ReactNode) => ReactNode;
     overlay?: ReactElement | OverlayFunc;
+    showInnerContent?: boolean;
 };
 export type DropdownMenuInnerProps = DefaultProps & {
     items: DropdownItemType[];

package/dist/esm/types/types/popover.d.ts

@@ -12,6 +12,7 @@ export type PopoverProps = DefaultProps & {
     visible?: boolean;
     listenPopoverPositions?: CSSProperties;
     placementPositionOffset?: number;
+    showInnerContent?: boolean;
     onVisibleChange?: ((open: boolean) => void) | undefined;
     getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
 };

package/dist/index.esm.js

@@ -1639,14 +1639,17 @@ function getElementParentDetails(el, includeSelf = false) {
     left: 0,
     top: 0
   };
+  function hasActualScroll(element) {
+    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+  }
   while (current) {
     const style = getComputedStyle(current);
-    const canScroll = ['auto', 'scroll'].includes(style.overflowY) || ['auto', 'scroll'].includes(style.overflowX);
-    if (current.style.position === 'relative') {
+    const allowScroll = style.overflowY !== "visible" || style.overflowX !== "visible";
+    if (current.style.position === "relative") {
       relativePosition.left += current.offsetLeft;
       relativePosition.top += current.offsetTop;
     }
-    if (canScroll) {
+    if (allowScroll && hasActualScroll(current)) {
       return {
         relativePosition,
         scrollableParents: current
@@ -1655,10 +1658,7 @@ function getElementParentDetails(el, includeSelf = false) {
     current = current.parentElement;
   }
   return {
-    relativePosition: {
-      left: 0,
-      top: 0
-    },
+    relativePosition,
     scrollableParents: document.scrollingElement
   };
 }
@@ -2618,14 +2618,15 @@ const ConditionalWrapper = ({
   children
 }) => condition ? wrapper(children) : children;
 
-const OFFSET = 12;
+const OFFSET = 11;
 const usePopupPosition = ({
   open,
   setOpen,
   popupRef,
   targetRef,
   placement,
-  popupContainer
+  popupContainer,
+  showInnerContent
 }) => {
   const [_placement, _setPlacement] = useState(placement ?? "bottomLeft");
   const [popupPosition, setPopupPosition] = useState({});
@@ -2676,9 +2677,9 @@ const usePopupPosition = ({
         right: (inBody ? window.innerWidth : scrollableParents?.clientWidth || 0) - ((targetRef.current?.offsetLeft || 0 || container.right) + popupRect.width + OFFSET)
       };
       let newPlacement = _placement;
-      if (availableSpace.bottom < 0 && availableSpace.top > 0 && availableSpace.top > popupRect.height) {
+      if (availableSpace.bottom < 0 && availableSpace.top > 0) {
         newPlacement = newPlacement.replace('bottom', 'top');
-      } else if (availableSpace.top < 0 && availableSpace.bottom > 0 && availableSpace.bottom > popupRect.height) {
+      } else if (availableSpace.top < 0 && availableSpace.bottom > 0) {
         newPlacement = newPlacement.replace('top', 'bottom');
       }
       if (availableSpace.left < 0 && availableSpace.right > 0 && availableSpace.right > popupRect.width) {
@@ -2686,14 +2687,16 @@ const usePopupPosition = ({
       } else if (availableSpace.right < 0 && availableSpace.left > 0 && availableSpace.left > popupRect.width) {
         newPlacement = newPlacement.replace('Left', 'Right');
       }
-      // if (availableSpace.right < 0 && availableSpace.left < 0) {
-      //     if (newPlacement.includes('Right')) {
-      //         positions.left = (popupRect.width - positions.left) + container.left
-      //     }
-      //     if (newPlacement.includes('Left')) {
-      //         positions.left = positions.left - popupRect.width + container.width
-      //     }
-      // }
+      if (showInnerContent) {
+        if (availableSpace.right < 0 && availableSpace.left < 0) {
+          if (newPlacement.includes('Right')) {
+            positions.left = popupRect.width - positions.left + container.left;
+          }
+          if (newPlacement.includes('Left')) {
+            positions.left = positions.left - popupRect.width + container.width;
+          }
+        }
+      }
       _setPlacement(newPlacement);
     }
     const _calculation = () => {
@@ -2737,7 +2740,7 @@ const usePopupPosition = ({
       }
     };
     _calculation();
-  }, [targetRef, popupContainer, popupRef, inBody, _placement, setOpen]);
+  }, [targetRef, popupContainer, popupRef, showInnerContent, inBody, _placement, setOpen]);
   useEffect(() => {
     if (!open) {
       return;
@@ -3145,7 +3148,8 @@ const RangePicker = ({
   defaultValue,
   bordered = true,
   getPopupContainer,
-  placement = "bottomLeft"
+  placement = "bottomLeft",
+  showInnerContent
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedDates, setSelectedDates] = useState([value?.[0] || defaultValue?.[0] || null, value?.[1] || defaultValue?.[1] || null]);
@@ -3166,6 +3170,7 @@ const RangePicker = ({
     popupRef,
     placement,
     open: isOpen,
+    showInnerContent,
     setOpen: setIsOpen,
     popupContainer: getPopupContainer?.(targetRef.current)
   });
@@ -3467,7 +3472,8 @@ const TimePicker = ({
   suffixIcon = /*#__PURE__*/React.createElement(TimeIcon, null),
   placeholder = 'Select time',
   getPopupContainer,
-  placement = "bottomLeft"
+  placement = "bottomLeft",
+  showInnerContent
 }) => {
   const [open, setOpen] = useState(false);
   const [innerValue, setInnerValue] = useState(propValue || defaultValue ? new Date(propValue || defaultValue) : null);
@@ -3486,6 +3492,7 @@ const TimePicker = ({
     popupRef,
     placement,
     targetRef,
+    showInnerContent,
     setOpen: setOpen,
     popupContainer: getPopupContainer?.(targetRef.current)
   });
@@ -5449,7 +5456,8 @@ const Dropdown = ({
   popupRender,
   className = '',
   overlay,
-  prefixCls = prefixClsDropdown
+  prefixCls = prefixClsDropdown,
+  showInnerContent
 }) => {
   const [open, setOpen] = useState(controlledOpen ?? defaultOpen);
   const isControlled = controlledOpen !== undefined;
@@ -5461,10 +5469,11 @@ const Dropdown = ({
     _placement
   } = usePopupPosition({
     open,
-    targetRef,
+    setOpen,
     popupRef,
+    targetRef,
     placement,
-    setOpen,
+    showInnerContent,
     popupContainer: getPopupContainer?.(targetRef.current)
   });
   useEffect(() => {
@@ -5616,8 +5625,7 @@ const Popover = ({
   style = {},
   overlayClassName = '',
   overlayStyle = {},
-  listenPopoverPositions,
-  placementPositionOffset,
+  showInnerContent,
   onVisibleChange,
   getPopupContainer
 }) => {
@@ -5633,6 +5641,7 @@ const Popover = ({
     popupRef,
     placement,
     open: isOpen,
+    showInnerContent,
     setOpen: setInnerOpen,
     popupContainer: getPopupContainer?.(targetRef.current)
   });