@arcgis/charts-components-react 4.29.0-beta.28

package/CHANGELOG.md

@@ -0,0 +1,190 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 4.29.0-beta.28 (2024-02-15)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# 4.29.0-beta.27 (2024-02-15)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# 4.29.0-beta.26 (2024-02-15)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.25](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.24...v4.29.0-beta.25) (2024-02-14)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# 4.29.0-beta.24 (2024-02-14)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# 4.29.0-beta.23 (2024-02-14)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# 4.29.0-beta.22 (2024-02-14)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# 4.29.0-beta.21 (2024-02-14)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# 4.29.0-beta.20 (2024-02-14)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.19](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.18...v4.29.0-beta.19) (2024-02-13)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.18](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.17...v4.29.0-beta.18) (2024-02-12)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.17](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.16...v4.29.0-beta.17) (2024-02-09)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.16](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.15...v4.29.0-beta.16) (2024-02-08)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.15](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.14...v4.29.0-beta.15) (2024-02-07)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.14](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.13...v4.29.0-beta.14) (2024-02-06)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.13](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.12...v4.29.0-beta.13) (2024-02-05)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# 4.29.0-beta.12 (2024-02-02)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.11](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.10...v4.29.0-beta.11) (2024-02-02)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.10](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.9...v4.29.0-beta.10) (2024-01-31)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
+# [4.29.0-beta.9](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.8...v4.29.0-beta.9) (2024-01-31)
+
+
+### Bug Fixes
+
+* remove obsolete values in react wrapper package.json ([d752de1](https://devtopia.esri.com/WebGIS/arcgis-charts/commits/d752de160c2ab5bce5ca0f92c052817d7cd9c17f))
+
+
+
+
+
+# [4.29.0-beta.8](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.7...v4.29.0-beta.8) (2024-01-30)
+
+
+### Bug Fixes
+
+* correct publish URLs for wrappers ([3cee052](https://devtopia.esri.com/WebGIS/arcgis-charts/commits/3cee0524c438695a09b06bdccf4966610155d33c))
+
+
+
+
+
+# [4.29.0-beta.7](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.0-beta.6...v4.29.0-beta.7) (2024-01-30)
+
+
+### Bug Fixes
+
+* updated the auto generated files ([9c43cae](https://devtopia.esri.com/WebGIS/arcgis-charts/commits/9c43cae1f9849c37b4b142934f4ef3acdb898f3c))
+
+
+### Features
+
+* add wrappers as workspaces to include them in release ([ea1fcd3](https://devtopia.esri.com/WebGIS/arcgis-charts/commits/ea1fcd39c47130192f9a35c6582611eee42a5467))

package/LICENSE.md

@@ -0,0 +1,12 @@
+# Licensing
+COPYRIGHT © 2023 Esri
+
+All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
+
+This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
+
+See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english
+
+For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
+
+email: contracts@esri.com

package/README.md

@@ -0,0 +1,15 @@
+# React wrapper for @arcgis/charts-components (beta)
+This Web Component package is part of the ArcGIS Maps SDK for JavaScript and is under active development. At this time, customer support is not provided. More news to come.
+
+## License
+COPYRIGHT © 2023 Esri
+
+All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
+
+This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
+
+See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english
+
+For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
+
+email: contracts@esri.com

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@arcgis/charts-components-react",
+  "description": "A set of React components that wrap ArcGIS charts components",
+  "homepage": "https://developers.arcgis.com/javascript/latest/",
+  "version": "4.29.0-beta.28",
+  "sideEffects": false,
+  "license": "SEE LICENSE.md",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf dist node_modules .turbo",
+    "compile": "yarn tsc",
+    "pre": "rimraf dist",
+    "tsc": "tsc"
+  },
+  "dependencies": {
+    "@arcgis/charts-components": "^4.29.0-beta.28",
+    "react": ">=18.0.0 <19.0.0",
+    "react-dom": ">=18.0.0 <19.0.0"
+  },
+  "devDependencies": {
+    "@arcgis/components-plugins": "^4.29.0-beta.1",
+    "@arcgis/core": ">=4.29.0-next <4.30",
+    "@types/node": "^20.2.5",
+    "@types/react-dom": "^18.2.0",
+    "rimraf": "^5.0.0",
+    "typescript": "~5.3.0"
+  }
+}

package/src/components.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import type { JSX } from '@arcgis/charts-components/dist/components';
+
+import { defineCustomElement as defineArcgisChartsActionBar } from '@arcgis/charts-components/dist/components/arcgis-charts-action-bar.js';
+import { defineCustomElement as defineArcgisChartsBarChart } from '@arcgis/charts-components/dist/components/arcgis-charts-bar-chart.js';
+import { defineCustomElement as defineArcgisChartsBarLineChart } from '@arcgis/charts-components/dist/components/arcgis-charts-bar-line-chart.js';
+import { defineCustomElement as defineArcgisChartsBoxPlot } from '@arcgis/charts-components/dist/components/arcgis-charts-box-plot.js';
+import { defineCustomElement as defineArcgisChartsGauge } from '@arcgis/charts-components/dist/components/arcgis-charts-gauge.js';
+import { defineCustomElement as defineArcgisChartsHistogram } from '@arcgis/charts-components/dist/components/arcgis-charts-histogram.js';
+import { defineCustomElement as defineArcgisChartsLineChart } from '@arcgis/charts-components/dist/components/arcgis-charts-line-chart.js';
+import { defineCustomElement as defineArcgisChartsPieChart } from '@arcgis/charts-components/dist/components/arcgis-charts-pie-chart.js';
+import { defineCustomElement as defineArcgisChartsScatterPlot } from '@arcgis/charts-components/dist/components/arcgis-charts-scatter-plot.js';
+
+export const ArcgisChartsActionBar = /*@__PURE__*/createReactComponent<JSX.ArcgisChartsActionBar, HTMLArcgisChartsActionBarElement>('arcgis-charts-action-bar', undefined, undefined, defineArcgisChartsActionBar);
+export const ArcgisChartsBarChart = /*@__PURE__*/createReactComponent<JSX.ArcgisChartsBarChart, HTMLArcgisChartsBarChartElement>('arcgis-charts-bar-chart', undefined, undefined, defineArcgisChartsBarChart);
+export const ArcgisChartsBarLineChart = /*@__PURE__*/createReactComponent<JSX.ArcgisChartsBarLineChart, HTMLArcgisChartsBarLineChartElement>('arcgis-charts-bar-line-chart', undefined, undefined, defineArcgisChartsBarLineChart);
+export const ArcgisChartsBoxPlot = /*@__PURE__*/createReactComponent<JSX.ArcgisChartsBoxPlot, HTMLArcgisChartsBoxPlotElement>('arcgis-charts-box-plot', undefined, undefined, defineArcgisChartsBoxPlot);
+export const ArcgisChartsGauge = /*@__PURE__*/createReactComponent<JSX.ArcgisChartsGauge, HTMLArcgisChartsGaugeElement>('arcgis-charts-gauge', undefined, undefined, defineArcgisChartsGauge);
+export const ArcgisChartsHistogram = /*@__PURE__*/createReactComponent<JSX.ArcgisChartsHistogram, HTMLArcgisChartsHistogramElement>('arcgis-charts-histogram', undefined, undefined, defineArcgisChartsHistogram);
+export const ArcgisChartsLineChart = /*@__PURE__*/createReactComponent<JSX.ArcgisChartsLineChart, HTMLArcgisChartsLineChartElement>('arcgis-charts-line-chart', undefined, undefined, defineArcgisChartsLineChart);
+export const ArcgisChartsPieChart = /*@__PURE__*/createReactComponent<JSX.ArcgisChartsPieChart, HTMLArcgisChartsPieChartElement>('arcgis-charts-pie-chart', undefined, undefined, defineArcgisChartsPieChart);
+export const ArcgisChartsScatterPlot = /*@__PURE__*/createReactComponent<JSX.ArcgisChartsScatterPlot, HTMLArcgisChartsScatterPlotElement>('arcgis-charts-scatter-plot', undefined, undefined, defineArcgisChartsScatterPlot);

package/src/index.ts

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

package/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of map-components-angular
+ */
+
+export * from "./lib/map-components-angular.module";
+export { DIRECTIVES } from "./lib/stencil-generated";
+export * from "./lib/stencil-generated/components";

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

@@ -0,0 +1,106 @@
+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;
+      }, {} as ExpandedPropsTypes);
+
+      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

@@ -0,0 +1,142 @@
+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

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

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

@@ -0,0 +1,34 @@
+// 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

@@ -0,0 +1,125 @@
+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(' ');
+};
+
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix: string) => {
+  switch (eventNameSuffix) {
+    case 'doubleclick':
+      return 'dblclick';
+  }
+  return eventNameSuffix;
+};
+
+/**
+ * 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' + transformReactEventName(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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,50 @@
+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';