packages/react/src/components/react-component-lib/utils/index.tsx - main - githubmirror/ionic

packages/react/src/components/react-component-lib/utils/index.tsx

59 строк2 KB

Shane

fix(react): remove relocated inline overlays orphaned on unmount (#31223)

17 июн 2026, 20:19

17 июн 2026, 20:19d28d25b

import React from 'react';

import type { StyleReactProps } from '../interfaces';

export type StencilReactExternalProps<PropType, ElementType> = PropType &
  Omit<React.HTMLAttributes<ElementType>, 'style'> &
  StyleReactProps;

// This will be replaced with React.ForwardedRef when react-output-target is upgraded to React v17
export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;

export const setRef = (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => {
  if (typeof ref === 'function') {
    ref(value);
  } else if (ref != null) {
    // Cast as a MutableRef so we can assign current
    (ref as React.MutableRefObject<any>).current = value;
  }
};

export const mergeRefs = (
  ...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]
): React.RefCallback<any> => {
  return (value: any) => {
    refs.forEach((ref) => {
      setRef(ref, value);
    });
  };
};

export const createForwardRef = <PropType, ElementType>(ReactComponent: any, displayName: string) => {
  const forwardRef = (
    props: StencilReactExternalProps<PropType, ElementType>,
    ref: StencilReactForwardedRef<ElementType>
  ) => {
    return <ReactComponent {...props} forwardedRef={ref} />;
  };
  forwardRef.displayName = displayName;

  // Cast the render function to the type React.forwardRef already infers for it.
  // React 18's `forwardRef` wraps the props in `PropsWithoutRef`, and since
  // `PropType` is unconstrained TypeScript can't prove the round-trip is safe.
  // The cast keeps the inferred component type intact without widening to `any`.
  return React.forwardRef(
    forwardRef as React.ForwardRefRenderFunction<
      ElementType,
      React.PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>>
    >
  );
};

export const defineCustomElement = (tagName: string, customElement: any) => {
  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
    customElements.define(tagName, customElement);
  }
};

export * from './attachProps';
export * from './case';