Implement offset adjustments in Popover component

Added offsetX and offsetY props to Popover, allowing for custom positioning adjustments.

Author: kosuke-k

src/scripts/AutoAlign.tsx

@@ -168,6 +168,8 @@ export type AutoAlignProps = {
   preventPortalize?: boolean;
   align?: Align;
   alignment?: RectangleAlignment;
+  offsetX?: number;
+  offsetY?: number;
   children: (props: AutoAlignInjectedProps) => ReactElement;
 };
 
@@ -398,6 +400,8 @@ export const AutoAlign: FC<AutoAlignProps> = (props) => {
     preventPortalize,
     portalClassName: additionalPortalClassName,
     portalStyle: additionalPortalStyle = {},
+    offsetX = 0,
+    offsetY = 0,
     children,
   } = props;
   const {
@@ -419,6 +423,8 @@ export const AutoAlign: FC<AutoAlignProps> = (props) => {
       right: 0,
     },
   } = compSettings;
+  const adjustedOffsetLeft = offsetLeft + offsetX;
+  const adjustedOffsetTop = offsetTop + offsetY;
   if (typeof children !== 'function') {
     return React.isValidElement(children) ? children : <>{children}</>;
   }
@@ -429,9 +435,9 @@ export const AutoAlign: FC<AutoAlignProps> = (props) => {
     <div ref={elRef}>
       <RelativePortal
         fullWidth
-        left={offsetLeft}
-        right={-offsetLeft}
-        top={offsetTop}
+        left={adjustedOffsetLeft} // offsetXを適用
+        right={-adjustedOffsetLeft}
+        top={adjustedOffsetTop} // offsetYを適用
         onScroll={onScroll}
         component='div'
         className={classnames(portalClassName, additionalPortalClassName)}

src/scripts/Popover.tsx

@@ -68,6 +68,8 @@ export type PopoverProps = {
   theme?: PopoverTheme;
   tooltip?: boolean;
   bodyStyle?: CSSProperties;
+  offsetX?: number;
+  offsetY?: number;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -131,7 +133,7 @@ export const PopoverInner = forwardRef<
  *
  */
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
-  ({ position, ...props }, ref) => {
+  ({ position, offsetX = 0, offsetY = 0, ...props }, ref) => {
     useInitComponentStyle();
 
     const alignment: RectangleAlignment | undefined = position?.split('-') as
@@ -142,6 +144,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         triggerSelector='.slds-dropdown-trigger'
         alignmentStyle='popover'
         alignment={alignment}
+        offsetX={offsetX}
+        offsetY={offsetY}
       >
         {(injectedProps) => (
           <PopoverInner {...props} {...injectedProps} ref={ref} />

src/scripts/Tabs.tsx

@@ -122,6 +122,7 @@ const TooltipContent = (props: { children: ReactNode; icon: string }) => {
         hidden={isHideTooltip}
         tabIndex={-1}
         onBlur={onBlur}
+        offsetX={-15}
         tooltip
       >
         {children}