@popperjs/core#Placement TypeScript Examples

ngOnInit(): void {
    let tooltipEl = this.el.nativeElement.getElementsByClassName(
      'tooltip'
    )[0] as HTMLElement;

    if (this.text) {
      tooltipEl = document.createElement('div');
      tooltipEl.className = 'tooltip';
      tooltipEl.innerText = this.text;
      document.body.appendChild(tooltipEl);
    }
    this.popper = createPopper(this.el.nativeElement, tooltipEl, {
      placement: 'right' as Placement,
    });
  }

export function Popper<T extends HTMLElement = HTMLDivElement>({
  position = 'top',
  placement = 'center',
  gutter = 5,
  arrowSize = 2,
  arrowDistance = 2,
  withArrow = false,
  referenceElement,
  children,
  mounted,
  transition = 'pop-top-left',
  transitionDuration,
  exitTransitionDuration = transitionDuration,
  transitionTimingFunction,
  arrowClassName,
  arrowStyle,
  zIndex = getDefaultZIndex('popover'),
  forceUpdateDependencies = [],
  modifiers = [],
  onTransitionEnd,
  withinPortal = true,
}: PopperProps<T>) {
  const padding = withArrow ? gutter + arrowSize : gutter;
  const { classes, cx, theme } = useStyles({ arrowSize, arrowDistance }, { name: 'Popper' });
  const [popperElement, setPopperElement] = useState(null);
  const _placement = flipPlacement(placement, theme.dir);
  const _position = flipPosition(position, theme.dir);

  const initialPlacement: Placement =
    _placement === 'center' ? _position : `${_position}-${_placement}`;

  const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {
    placement: initialPlacement,
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, padding],
        },
      },
      ...modifiers,
    ],
  });

  const parsedAttributes = parsePopperPosition(attributes.popper?.['data-popper-placement']);

  useDidUpdate(() => {
    typeof forceUpdate === 'function' && forceUpdate();
  }, forceUpdateDependencies);

  return (
    <Transition
      mounted={mounted && !!referenceElement}
      duration={transitionDuration}
      exitDuration={exitTransitionDuration}
      transition={transition}
      timingFunction={transitionTimingFunction}
      onExited={onTransitionEnd}
    >
      {(transitionStyles) => (
        <div>
          <PopperContainer withinPortal={withinPortal} zIndex={zIndex}>
            <div
              ref={setPopperElement}
              style={{
                ...styles.popper,
                pointerEvents: 'none',
              }}
              {...attributes.popper}
            >
              <div style={transitionStyles}>
                {children}
                {withArrow && (
                  <div
                    style={arrowStyle}
                    className={cx(
                      classes.arrow,
                      classes[parsedAttributes.placement],
                      classes[parsedAttributes.position],
                      arrowClassName
                    )}
                  />
                )}
              </div>
            </div>
          </PopperContainer>
        </div>
      )}
    </Transition>
  );
}

SelectDropdown = forwardRef<HTMLDivElement, SelectDropdownProps>(
  (
    {
      mounted,
      transition,
      transitionDuration,
      transitionTimingFunction,
      uuid,
      shadow,
      maxDropdownHeight,
      withinPortal = true,
      children,
      classNames,
      styles,
      dropdownComponent,
      referenceElement,
      direction = 'column',
      onDirectionChange,
      switchDirectionOnFlip = false,
      zIndex = getDefaultZIndex('popover'),
      dropdownPosition = 'flip',
      __staticSelector,
      positionDependencies = [],
    }: SelectDropdownProps,
    ref
  ) => {
    const { classes } = useStyles(
      { native: dropdownComponent !== SelectScrollArea },
      { classNames, styles, name: __staticSelector }
    );

    const previousPlacement = useRef<Placement>('bottom');

    return (
      <Popper
        referenceElement={referenceElement}
        mounted={mounted}
        transition={transition}
        transitionDuration={transitionDuration}
        exitTransitionDuration={0}
        transitionTimingFunction={transitionTimingFunction}
        position={dropdownPosition === 'flip' ? 'bottom' : dropdownPosition}
        withinPortal={withinPortal}
        forceUpdateDependencies={positionDependencies}
        zIndex={zIndex}
        modifiers={[
          {
            name: 'preventOverflow',
            enabled: false,
          },
          {
            name: 'flip',
            enabled: dropdownPosition === 'flip',
          },
          {
            // @ts-ignore
            name: 'sameWidth',
            enabled: true,
            phase: 'beforeWrite',
            requires: ['computeStyles'],
            fn: ({ state }) => {
              // eslint-disable-next-line no-param-reassign
              state.styles.popper.width = `${state.rects.reference.width}px`;
            },
            effect: ({ state }) => {
              // eslint-disable-next-line no-param-reassign
              state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
            },
          },
          {
            // @ts-ignore
            name: 'directionControl',
            enabled: true,
            phase: 'main',
            fn: ({ state }) => {
              if (previousPlacement.current !== state.placement) {
                previousPlacement.current = state.placement;

                const nextDirection = state.placement === 'top' ? 'column-reverse' : 'column';

                if (direction !== nextDirection && switchDirectionOnFlip) {
                  onDirectionChange && onDirectionChange(nextDirection);
                }
              }
            },
          },
        ]}
      >
        <div style={{ maxHeight: maxDropdownHeight, display: 'flex' }}>
          <Paper<'div'>
            radius="sm"
            component={(dropdownComponent || 'div') as any}
            id={`${uuid}-items`}
            aria-labelledby={`${uuid}-label`}
            role="listbox"
            className={classes.dropdown}
            shadow={shadow}
            ref={ref}
            onMouseDown={(event) => event.preventDefault()}
          >
            <div style={{ display: 'flex', flexDirection: direction, width: '100%' }}>
              {children}
            </div>
          </Paper>
        </div>
      </Popper>
    );
  }
)