@nanoporetech-digital/components-react 7.3.2 → 7.4.3

package/src/components.ts

@@ -1,62 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-/* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';
-
-import type { JSX } from '@nanoporetech-digital/components';
-
-
-
-export const NanoAccordion = /*@__PURE__*/createReactComponent<JSX.NanoAccordion, HTMLNanoAccordionElement>('nano-accordion');
-export const NanoAlert = /*@__PURE__*/createReactComponent<JSX.NanoAlert, HTMLNanoAlertElement>('nano-alert');
-export const NanoAlgolia = /*@__PURE__*/createReactComponent<JSX.NanoAlgolia, HTMLNanoAlgoliaElement>('nano-algolia');
-export const NanoAlgoliaFilter = /*@__PURE__*/createReactComponent<JSX.NanoAlgoliaFilter, HTMLNanoAlgoliaFilterElement>('nano-algolia-filter');
-export const NanoAlgoliaPagination = /*@__PURE__*/createReactComponent<JSX.NanoAlgoliaPagination, HTMLNanoAlgoliaPaginationElement>('nano-algolia-pagination');
-export const NanoAlgoliaResults = /*@__PURE__*/createReactComponent<JSX.NanoAlgoliaResults, HTMLNanoAlgoliaResultsElement>('nano-algolia-results');
-export const NanoAnimation = /*@__PURE__*/createReactComponent<JSX.NanoAnimation, HTMLNanoAnimationElement>('nano-animation');
-export const NanoCheckbox = /*@__PURE__*/createReactComponent<JSX.NanoCheckbox, HTMLNanoCheckboxElement>('nano-checkbox');
-export const NanoCheckboxGroup = /*@__PURE__*/createReactComponent<JSX.NanoCheckboxGroup, HTMLNanoCheckboxGroupElement>('nano-checkbox-group');
-export const NanoDatalist = /*@__PURE__*/createReactComponent<JSX.NanoDatalist, HTMLNanoDatalistElement>('nano-datalist');
-export const NanoDateInput = /*@__PURE__*/createReactComponent<JSX.NanoDateInput, HTMLNanoDateInputElement>('nano-date-input');
-export const NanoDatePicker = /*@__PURE__*/createReactComponent<JSX.NanoDatePicker, HTMLNanoDatePickerElement>('nano-date-picker');
-export const NanoDemo = /*@__PURE__*/createReactComponent<JSX.NanoDemo, HTMLNanoDemoElement>('nano-demo');
-export const NanoDetails = /*@__PURE__*/createReactComponent<JSX.NanoDetails, HTMLNanoDetailsElement>('nano-details');
-export const NanoDialog = /*@__PURE__*/createReactComponent<JSX.NanoDialog, HTMLNanoDialogElement>('nano-dialog');
-export const NanoDrawer = /*@__PURE__*/createReactComponent<JSX.NanoDrawer, HTMLNanoDrawerElement>('nano-drawer');
-export const NanoDropdown = /*@__PURE__*/createReactComponent<JSX.NanoDropdown, HTMLNanoDropdownElement>('nano-dropdown');
-export const NanoFieldValidator = /*@__PURE__*/createReactComponent<JSX.NanoFieldValidator, HTMLNanoFieldValidatorElement>('nano-field-validator');
-export const NanoFileUpload = /*@__PURE__*/createReactComponent<JSX.NanoFileUpload, HTMLNanoFileUploadElement>('nano-file-upload');
-export const NanoGlobalNav = /*@__PURE__*/createReactComponent<JSX.NanoGlobalNav, HTMLNanoGlobalNavElement>('nano-global-nav');
-export const NanoGlobalNavUserProfile = /*@__PURE__*/createReactComponent<JSX.NanoGlobalNavUserProfile, HTMLNanoGlobalNavUserProfileElement>('nano-global-nav-user-profile');
-export const NanoGlobalSearchResults = /*@__PURE__*/createReactComponent<JSX.NanoGlobalSearchResults, HTMLNanoGlobalSearchResultsElement>('nano-global-search-results');
-export const NanoGrid = /*@__PURE__*/createReactComponent<JSX.NanoGrid, HTMLNanoGridElement>('nano-grid');
-export const NanoGridItem = /*@__PURE__*/createReactComponent<JSX.NanoGridItem, HTMLNanoGridItemElement>('nano-grid-item');
-export const NanoHero = /*@__PURE__*/createReactComponent<JSX.NanoHero, HTMLNanoHeroElement>('nano-hero');
-export const NanoIcon = /*@__PURE__*/createReactComponent<JSX.NanoIcon, HTMLNanoIconElement>('nano-icon');
-export const NanoIconButton = /*@__PURE__*/createReactComponent<JSX.NanoIconButton, HTMLNanoIconButtonElement>('nano-icon-button');
-export const NanoImg = /*@__PURE__*/createReactComponent<JSX.NanoImg, HTMLNanoImgElement>('nano-img');
-export const NanoInput = /*@__PURE__*/createReactComponent<JSX.NanoInput, HTMLNanoInputElement>('nano-input');
-export const NanoIntersectionObserve = /*@__PURE__*/createReactComponent<JSX.NanoIntersectionObserve, HTMLNanoIntersectionObserveElement>('nano-intersection-observe');
-export const NanoMenu = /*@__PURE__*/createReactComponent<JSX.NanoMenu, HTMLNanoMenuElement>('nano-menu');
-export const NanoMenuDrawer = /*@__PURE__*/createReactComponent<JSX.NanoMenuDrawer, HTMLNanoMenuDrawerElement>('nano-menu-drawer');
-export const NanoMoreLess = /*@__PURE__*/createReactComponent<JSX.NanoMoreLess, HTMLNanoMoreLessElement>('nano-more-less');
-export const NanoNavItem = /*@__PURE__*/createReactComponent<JSX.NanoNavItem, HTMLNanoNavItemElement>('nano-nav-item');
-export const NanoOption = /*@__PURE__*/createReactComponent<JSX.NanoOption, HTMLNanoOptionElement>('nano-option');
-export const NanoOverflowNav = /*@__PURE__*/createReactComponent<JSX.NanoOverflowNav, HTMLNanoOverflowNavElement>('nano-overflow-nav');
-export const NanoProgressBar = /*@__PURE__*/createReactComponent<JSX.NanoProgressBar, HTMLNanoProgressBarElement>('nano-progress-bar');
-export const NanoRange = /*@__PURE__*/createReactComponent<JSX.NanoRange, HTMLNanoRangeElement>('nano-range');
-export const NanoRating = /*@__PURE__*/createReactComponent<JSX.NanoRating, HTMLNanoRatingElement>('nano-rating');
-export const NanoResizeObserve = /*@__PURE__*/createReactComponent<JSX.NanoResizeObserve, HTMLNanoResizeObserveElement>('nano-resize-observe');
-export const NanoSelect = /*@__PURE__*/createReactComponent<JSX.NanoSelect, HTMLNanoSelectElement>('nano-select');
-export const NanoSkeleton = /*@__PURE__*/createReactComponent<JSX.NanoSkeleton, HTMLNanoSkeletonElement>('nano-skeleton');
-export const NanoSlide = /*@__PURE__*/createReactComponent<JSX.NanoSlide, HTMLNanoSlideElement>('nano-slide');
-export const NanoSlides = /*@__PURE__*/createReactComponent<JSX.NanoSlides, HTMLNanoSlidesElement>('nano-slides');
-export const NanoSortable = /*@__PURE__*/createReactComponent<JSX.NanoSortable, HTMLNanoSortableElement>('nano-sortable');
-export const NanoSpinner = /*@__PURE__*/createReactComponent<JSX.NanoSpinner, HTMLNanoSpinnerElement>('nano-spinner');
-export const NanoSplitPane = /*@__PURE__*/createReactComponent<JSX.NanoSplitPane, HTMLNanoSplitPaneElement>('nano-split-pane');
-export const NanoSticker = /*@__PURE__*/createReactComponent<JSX.NanoSticker, HTMLNanoStickerElement>('nano-sticker');
-export const NanoTab = /*@__PURE__*/createReactComponent<JSX.NanoTab, HTMLNanoTabElement>('nano-tab');
-export const NanoTabContent = /*@__PURE__*/createReactComponent<JSX.NanoTabContent, HTMLNanoTabContentElement>('nano-tab-content');
-export const NanoTabGroup = /*@__PURE__*/createReactComponent<JSX.NanoTabGroup, HTMLNanoTabGroupElement>('nano-tab-group');
-export const NanoTable = /*@__PURE__*/createReactComponent<JSX.NanoTable, HTMLNanoTableElement>('nano-table');
-export const NanoTooltip = /*@__PURE__*/createReactComponent<JSX.NanoTooltip, HTMLNanoTooltipElement>('nano-tooltip');

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components';

package/src/react-component-lib/createComponent.tsx

@@ -1,113 +0,0 @@
-import React, { createElement } from 'react';
-
-import {
-  attachProps,
-  camelToDashCase,
-  createForwardRef,
-  dashToPascalCase,
-  isCoveredByReact,
-  mergeRefs,
-} from './utils';
-
-export interface HTMLStencilElement extends HTMLElement {
-  componentOnReady(): Promise<this>;
-}
-
-interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
-  forwardedRef: React.RefObject<ElementType>;
-  ref?: React.Ref<any>;
-}
-
-export const createReactComponent = <
-  PropType,
-  ElementType extends HTMLStencilElement,
-  ContextStateType = {},
-  ExpandedPropsTypes = {}
->(
-  tagName: string,
-  ReactComponentContext?: React.Context<ContextStateType>,
-  manipulatePropsFunction?: (
-    originalProps: StencilReactInternalProps<ElementType>,
-    propsToPass: any,
-  ) => ExpandedPropsTypes,
-  defineCustomElement?: () => void,
-) => {
-  if (defineCustomElement !== undefined) {
-    defineCustomElement();
-  }
-
-  const displayName = dashToPascalCase(tagName);
-  const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {
-    componentEl!: ElementType;
-
-    setComponentElRef = (element: ElementType) => {
-      this.componentEl = element;
-    };
-
-    constructor(props: StencilReactInternalProps<ElementType>) {
-      super(props);
-    }
-
-    componentDidMount() {
-      this.componentDidUpdate(this.props);
-    }
-
-    componentDidUpdate(prevProps: StencilReactInternalProps<ElementType>) {
-      attachProps(this.componentEl, this.props, prevProps);
-    }
-
-    render() {
-      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
-
-      let propsToPass = Object.keys(cProps).reduce((acc: any, name) => {
-        const value = (cProps as any)[name];
-
-        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-          const eventName = name.substring(2).toLowerCase();
-          if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
-            acc[name] = value;
-          }
-        } else {
-          // we should only render strings, booleans, and numbers as attrs in html.
-          // objects, functions, arrays etc get synced via properties on mount.
-          const type = typeof value;
-
-          if (type === 'string' || type === 'boolean' || type === 'number') {
-            acc[camelToDashCase(name)] = value;
-          }
-        }
-        return acc;
-      }, {});
-
-      if (manipulatePropsFunction) {
-        propsToPass = manipulatePropsFunction(this.props, propsToPass);
-      }
-
-      const newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {
-        ...propsToPass,
-        ref: mergeRefs(forwardedRef, this.setComponentElRef),
-        style,
-      };
-
-      /**
-       * We use createElement here instead of
-       * React.createElement to work around a
-       * bug in Vite (https://github.com/vitejs/vite/issues/6104).
-       * React.createElement causes all elements to be rendered
-       * as <tagname> instead of the actual Web Component.
-       */
-      return createElement(tagName, newProps, children);
-    }
-
-    static get displayName() {
-      return displayName;
-    }
-  };
-
-  // If context was passed to createReactComponent then conditionally add it to the Component Class
-  if (ReactComponentContext) {
-    ReactComponent.contextType = ReactComponentContext;
-  }
-
-  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
-};

package/src/react-component-lib/createOverlayComponent.tsx

@@ -1,162 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import { OverlayEventDetail } from './interfaces';
-import {
-  StencilReactForwardedRef,
-  attachProps,
-  dashToPascalCase,
-  defineCustomElement,
-  setRef,
-} from './utils';
-
-interface OverlayElement extends HTMLElement {
-  present: () => Promise<void>;
-  dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
-}
-
-export interface ReactOverlayProps {
-  children?: React.ReactNode;
-  isOpen: boolean;
-  onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
-  onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
-  onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
-  onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
-}
-
-export const createOverlayComponent = <
-  OverlayComponent extends object,
-  OverlayType extends OverlayElement
->(
-  tagName: string,
-  controller: { create: (options: any) => Promise<OverlayType> },
-  customElement?: any
-) => {
-  defineCustomElement(tagName, customElement);
-
-  const displayName = dashToPascalCase(tagName);
-  const didDismissEventName = `on${displayName}DidDismiss`;
-  const didPresentEventName = `on${displayName}DidPresent`;
-  const willDismissEventName = `on${displayName}WillDismiss`;
-  const willPresentEventName = `on${displayName}WillPresent`;
-
-  type Props = OverlayComponent &
-    ReactOverlayProps & {
-      forwardedRef?: StencilReactForwardedRef<OverlayType>;
-    };
-
-  let isDismissing = false;
-
-  class Overlay extends React.Component<Props> {
-    overlay?: OverlayType;
-    el!: HTMLDivElement;
-
-    constructor(props: Props) {
-      super(props);
-      if (typeof document !== 'undefined') {
-        this.el = document.createElement('div');
-      }
-      this.handleDismiss = this.handleDismiss.bind(this);
-    }
-
-    static get displayName() {
-      return displayName;
-    }
-
-    componentDidMount() {
-      if (this.props.isOpen) {
-        this.present();
-      }
-    }
-
-    componentWillUnmount() {
-      if (this.overlay) {
-        this.overlay.dismiss();
-      }
-    }
-
-    handleDismiss(event: CustomEvent<OverlayEventDetail<any>>) {
-      if (this.props.onDidDismiss) {
-        this.props.onDidDismiss(event);
-      }
-      setRef(this.props.forwardedRef, null)
-    }
-
-    shouldComponentUpdate(nextProps: Props) {
-      // Check if the overlay component is about to dismiss
-      if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
-        isDismissing = true;
-      }
-
-      return true;
-    }
-
-    async componentDidUpdate(prevProps: Props) {
-      if (this.overlay) {
-        attachProps(this.overlay, this.props, prevProps);
-      }
-
-      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
-        this.present(prevProps);
-      }
-      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
-        await this.overlay.dismiss();
-        isDismissing = false;
-
-        /**
-         * Now that the overlay is dismissed
-         * we need to render again so that any
-         * inner components will be unmounted
-         */
-        this.forceUpdate();
-      }
-    }
-
-    async present(prevProps?: Props) {
-      const {
-        children,
-        isOpen,
-        onDidDismiss,
-        onDidPresent,
-        onWillDismiss,
-        onWillPresent,
-        ...cProps
-      } = this.props;
-      const elementProps = {
-        ...cProps,
-        ref: this.props.forwardedRef,
-        [didDismissEventName]: this.handleDismiss,
-        [didPresentEventName]: (e: CustomEvent) =>
-          this.props.onDidPresent && this.props.onDidPresent(e),
-        [willDismissEventName]: (e: CustomEvent) =>
-          this.props.onWillDismiss && this.props.onWillDismiss(e),
-        [willPresentEventName]: (e: CustomEvent) =>
-          this.props.onWillPresent && this.props.onWillPresent(e),
-      };
-
-      this.overlay = await controller.create({
-        ...elementProps,
-        component: this.el,
-        componentProps: {},
-      });
-
-      setRef(this.props.forwardedRef, this.overlay);
-      attachProps(this.overlay, elementProps, prevProps);
-
-      await this.overlay.present();
-    }
-
-    render() {
-      /**
-       * Continue to render the component even when
-       * overlay is dismissing otherwise component
-       * will be hidden before animation is done.
-       */
-      return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
-    }
-  }
-
-  return React.forwardRef<OverlayType, Props>((props, ref) => {
-    return <Overlay {...props} forwardedRef={ref} />;
-  });
-};

package/src/react-component-lib/index.ts

@@ -1,2 +0,0 @@
-export { createReactComponent } from './createComponent';
-export { createOverlayComponent } from './createOverlayComponent';

package/src/react-component-lib/interfaces.ts

@@ -1,34 +0,0 @@
-// General types important to applications using stencil built components
-export interface EventEmitter<T = any> {
-  emit: (data?: T) => CustomEvent<T>;
-}
-
-export interface StyleReactProps {
-  class?: string;
-  className?: string;
-  style?: { [key: string]: any };
-}
-
-export interface OverlayEventDetail<T = any> {
-  data?: T;
-  role?: string;
-}
-
-export interface OverlayInterface {
-  el: HTMLElement;
-  animated: boolean;
-  keyboardClose: boolean;
-  overlayIndex: number;
-  presented: boolean;
-
-  enterAnimation?: any;
-  leaveAnimation?: any;
-
-  didPresent: EventEmitter<void>;
-  willPresent: EventEmitter<void>;
-  willDismiss: EventEmitter<OverlayEventDetail>;
-  didDismiss: EventEmitter<OverlayEventDetail>;
-
-  present(): Promise<void>;
-  dismiss(data?: any, role?: string): Promise<boolean>;
-}

package/src/react-component-lib/utils/attachProps.ts

@@ -1,114 +0,0 @@
-import { camelToDashCase } from './case';
-
-export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
-  // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
-  if (node instanceof Element) {
-    // add any classes in className to the class list
-    const className = getClassName(node.classList, newProps, oldProps);
-    if (className !== '') {
-      node.className = className;
-    }
-
-    Object.keys(newProps).forEach((name) => {
-      if (
-        name === 'children' ||
-        name === 'style' ||
-        name === 'ref' ||
-        name === 'class' ||
-        name === 'className' ||
-        name === 'forwardedRef'
-      ) {
-        return;
-      }
-      if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
-        const eventName = name.substring(2);
-        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
-
-        if (!isCoveredByReact(eventNameLc)) {
-          syncEvent(node, eventNameLc, newProps[name]);
-        }
-      } else {
-        (node as any)[name] = newProps[name];
-        const propType = typeof newProps[name];
-        if (propType === 'string') {
-          node.setAttribute(camelToDashCase(name), newProps[name]);
-        }
-      }
-    });
-  }
-};
-
-export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => {
-  const newClassProp: string = newProps.className || newProps.class;
-  const oldClassProp: string = oldProps.className || oldProps.class;
-  // map the classes to Maps for performance
-  const currentClasses = arrayToMap(classList);
-  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
-  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
-  const finalClassNames: string[] = [];
-  // loop through each of the current classes on the component
-  // to see if it should be a part of the classNames added
-  currentClasses.forEach((currentClass) => {
-    if (incomingPropClasses.has(currentClass)) {
-      // add it as its already included in classnames coming in from newProps
-      finalClassNames.push(currentClass);
-      incomingPropClasses.delete(currentClass);
-    } else if (!oldPropClasses.has(currentClass)) {
-      // add it as it has NOT been removed by user
-      finalClassNames.push(currentClass);
-    }
-  });
-  incomingPropClasses.forEach((s) => finalClassNames.push(s));
-  return finalClassNames.join(' ');
-};
-
-/**
- * Checks if an event is supported in the current execution environment.
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */
-export const isCoveredByReact = (eventNameSuffix: string) => {
-  if (typeof document === 'undefined') {
-    return true;
-  } else {
-    const eventName = 'on' + eventNameSuffix;
-    let isSupported = eventName in document;
-
-    if (!isSupported) {
-      const element = document.createElement('div');
-      element.setAttribute(eventName, 'return;');
-      isSupported = typeof (element as any)[eventName] === 'function';
-    }
-
-    return isSupported;
-  }
-};
-
-export const syncEvent = (
-  node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } },
-  eventName: string,
-  newEventHandler?: (e: Event) => any
-) => {
-  const eventStore = node.__events || (node.__events = {});
-  const oldEventHandler = eventStore[eventName];
-
-  // Remove old listener so they don't double up.
-  if (oldEventHandler) {
-    node.removeEventListener(eventName, oldEventHandler);
-  }
-
-  // Bind new listener.
-  node.addEventListener(
-    eventName,
-    (eventStore[eventName] = function handler(e: Event) {
-      if (newEventHandler) {
-        newEventHandler.call(this, e);
-      }
-    })
-  );
-};
-
-const arrayToMap = (arr: string[] | DOMTokenList) => {
-  const map = new Map<string, string>();
-  (arr as string[]).forEach((s: string) => map.set(s, s));
-  return map;
-};

package/src/react-component-lib/utils/case.ts

@@ -1,8 +0,0 @@
-export const dashToPascalCase = (str: string) =>
-  str
-    .toLowerCase()
-    .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
-    .join('');
-export const camelToDashCase = (str: string) =>
-  str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);

package/src/react-component-lib/utils/dev.ts

@@ -1,14 +0,0 @@
-export const isDevMode = () => {
-  return process && process.env && process.env.NODE_ENV === 'development';
-};
-
-const warnings: { [key: string]: boolean } = {};
-
-export const deprecationWarning = (key: string, message: string) => {
-  if (isDevMode()) {
-    if (!warnings[key]) {
-      console.warn(message);
-      warnings[key] = true;
-    }
-  }
-};

package/src/react-component-lib/utils/index.tsx

@@ -1,57 +0,0 @@
-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;
-
-  return React.forwardRef(forwardRef);
-};
-
-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';