@esri/calcite-components-react 0.19.0 → 0.22.0

package/dist/react-component-lib/createComponent.d.ts

@@ -6,5 +6,5 @@ interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<El
     forwardedRef: React.RefObject<ElementType>;
     ref?: React.Ref<any>;
 }
-export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
 export {};

package/dist/react-component-lib/createComponent.js

@@ -9,10 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
-import { attachProps, createForwardRef, dashToPascalCase, defineCustomElement, isCoveredByReact, mergeRefs, } from './utils';
-export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, customElement) => {
-    defineCustomElement(tagName, customElement);
+import React, { createElement } from 'react';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs, } from './utils';
+export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
     const displayName = dashToPascalCase(tagName);
     const ReactComponent = class extends React.Component {
         constructor(props) {
@@ -30,14 +32,20 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
         render() {
             const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
             let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[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] = cProps[name];
+                        acc[name] = value;
                     }
                 }
                 else {
-                    acc[name] = cProps[name];
+                    // 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;
             }, {});
@@ -45,7 +53,14 @@ export const createReactComponent = (tagName, ReactComponentContext, manipulateP
                 propsToPass = manipulatePropsFunction(this.props, propsToPass);
             }
             const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
-            return React.createElement(tagName, newProps, children);
+            /**
+             * 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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "0.19.0",
+  "version": "0.22.0",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE IN LICENSE.md",
   "scripts": {
@@ -26,10 +26,10 @@
     "typescript": "^3.3.4000"
   },
   "dependencies": {
-    "@esri/calcite-components": "1.0.0-beta.78"
+    "@esri/calcite-components": "1.0.0-beta.81"
   },
   "peerDependencies": {
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": ">=16.7 <18",
+    "react-dom": ">=16.7 <18"
   }
 }