@arcgis/charts-components-react 4.29.1 → 4.29.3

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.29.3](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.2...v4.29.3) (2024-02-29)
+
+
+### Bug Fixes
+
+* react component wrapper package build fix ([808e54b](https://devtopia.esri.com/WebGIS/arcgis-charts/commits/808e54b71006e5773f868cfd45f199af3628be94))
+
+
+
+
+
+## [4.29.2](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.29.1...v4.29.2) (2024-02-26)
+
+**Note:** Version bump only for package @arcgis/charts-components-react
+
+
+
+
+
 ## [4.29.1](https://devtopia.esri.com/WebGIS/arcgis-charts/compare/v4.30.0...v4.29.1) (2024-02-26)
 
 

package/dist/components.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { JSX } from "@arcgis/charts-components/dist/types/components";
+export declare const ArcgisChartsActionBar: import("react").ForwardRefExoticComponent<JSX.ArcgisChartsActionBar & Omit<import("react").HTMLAttributes<HTMLArcgisChartsActionBarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLArcgisChartsActionBarElement>>;
+export declare const ArcgisChartsBarChart: import("react").ForwardRefExoticComponent<JSX.ArcgisChartsBarChart & Omit<import("react").HTMLAttributes<HTMLArcgisChartsBarChartElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLArcgisChartsBarChartElement>>;
+export declare const ArcgisChartsBarLineChart: import("react").ForwardRefExoticComponent<JSX.ArcgisChartsBarLineChart & Omit<import("react").HTMLAttributes<HTMLArcgisChartsBarLineChartElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLArcgisChartsBarLineChartElement>>;
+export declare const ArcgisChartsBoxPlot: import("react").ForwardRefExoticComponent<JSX.ArcgisChartsBoxPlot & Omit<import("react").HTMLAttributes<HTMLArcgisChartsBoxPlotElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLArcgisChartsBoxPlotElement>>;
+export declare const ArcgisChartsGauge: import("react").ForwardRefExoticComponent<JSX.ArcgisChartsGauge & Omit<import("react").HTMLAttributes<HTMLArcgisChartsGaugeElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLArcgisChartsGaugeElement>>;
+export declare const ArcgisChartsHistogram: import("react").ForwardRefExoticComponent<JSX.ArcgisChartsHistogram & Omit<import("react").HTMLAttributes<HTMLArcgisChartsHistogramElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLArcgisChartsHistogramElement>>;
+export declare const ArcgisChartsLineChart: import("react").ForwardRefExoticComponent<JSX.ArcgisChartsLineChart & Omit<import("react").HTMLAttributes<HTMLArcgisChartsLineChartElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLArcgisChartsLineChartElement>>;
+export declare const ArcgisChartsPieChart: import("react").ForwardRefExoticComponent<JSX.ArcgisChartsPieChart & Omit<import("react").HTMLAttributes<HTMLArcgisChartsPieChartElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLArcgisChartsPieChartElement>>;
+export declare const ArcgisChartsScatterPlot: import("react").ForwardRefExoticComponent<JSX.ArcgisChartsScatterPlot & Omit<import("react").HTMLAttributes<HTMLArcgisChartsScatterPlotElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLArcgisChartsScatterPlotElement>>;

package/dist/components.js

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+export const ArcgisChartsActionBar = /*@__PURE__*/ createReactComponent('arcgis-charts-action-bar');
+export const ArcgisChartsBarChart = /*@__PURE__*/ createReactComponent('arcgis-charts-bar-chart');
+export const ArcgisChartsBarLineChart = /*@__PURE__*/ createReactComponent('arcgis-charts-bar-line-chart');
+export const ArcgisChartsBoxPlot = /*@__PURE__*/ createReactComponent('arcgis-charts-box-plot');
+export const ArcgisChartsGauge = /*@__PURE__*/ createReactComponent('arcgis-charts-gauge');
+export const ArcgisChartsHistogram = /*@__PURE__*/ createReactComponent('arcgis-charts-histogram');
+export const ArcgisChartsLineChart = /*@__PURE__*/ createReactComponent('arcgis-charts-line-chart');
+export const ArcgisChartsPieChart = /*@__PURE__*/ createReactComponent('arcgis-charts-pie-chart');
+export const ArcgisChartsScatterPlot = /*@__PURE__*/ createReactComponent('arcgis-charts-scatter-plot');

package/dist/index.js

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface HTMLStencilElement extends HTMLElement {
+    componentOnReady(): Promise<this>;
+}
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+    forwardedRef: React.RefObject<ElementType>;
+    ref?: React.Ref<any>;
+}
+export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType> | undefined, manipulatePropsFunction?: ((originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes) | undefined, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export {};

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

@@ -0,0 +1,67 @@
+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) {
+            super(props);
+            this.setComponentElRef = (element) => {
+                this.componentEl = element;
+            };
+        }
+        componentDidMount() {
+            this.componentDidUpdate(this.props);
+        }
+        componentDidUpdate(prevProps) {
+            attachProps(this.componentEl, this.props, prevProps);
+        }
+        render() {
+            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+            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] = 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 = {
+                ...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(ReactComponent, displayName);
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { OverlayEventDetail } from './interfaces';
+import { StencilReactForwardedRef } 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 declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
+    create: (options: any) => Promise<OverlayType>;
+}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
+    forwardedRef?: StencilReactForwardedRef<OverlayType> | undefined;
+}> & React.RefAttributes<OverlayType>>;
+export {};

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+export const createOverlayComponent = (tagName, controller, customElement) => {
+    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`;
+    let isDismissing = false;
+    class Overlay extends React.Component {
+        constructor(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) {
+            if (this.props.onDidDismiss) {
+                this.props.onDidDismiss(event);
+            }
+            setRef(this.props.forwardedRef, null);
+        }
+        shouldComponentUpdate(nextProps) {
+            // 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) {
+            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) {
+            const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
+            const elementProps = {
+                ...cProps,
+                ref: this.props.forwardedRef,
+                [didDismissEventName]: this.handleDismiss,
+                [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e),
+                [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+                [willPresentEventName]: (e) => 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((props, ref) => {
+        return React.createElement(Overlay, { ...props, forwardedRef: ref });
+    });
+};

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

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

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

@@ -0,0 +1,29 @@
+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/dist/react-component-lib/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/react-component-lib/utils/attachProps.d.ts

@@ -0,0 +1,16 @@
+export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
+export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export declare const transformReactEventName: (eventNameSuffix: string) => string;
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
+export declare const syncEvent: (node: Element & {
+    __events?: {
+        [key: string]: ((e: Event) => any) | undefined;
+    } | undefined;
+}, eventName: string, newEventHandler?: ((e: Event) => any) | undefined) => void;

package/dist/react-component-lib/utils/attachProps.js

@@ -0,0 +1,107 @@
+import { camelToDashCase } from './case';
+export const attachProps = (node, newProps, oldProps = {}) => {
+    // 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[name] = newProps[name];
+                const propType = typeof newProps[name];
+                if (propType === 'string') {
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                }
+            }
+        });
+    }
+};
+export const getClassName = (classList, newProps, oldProps) => {
+    const newClassProp = newProps.className || newProps.class;
+    const oldClassProp = 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 = [];
+    // 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) => {
+    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) => {
+    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[eventName] === 'function';
+        }
+        return isSupported;
+    }
+};
+export const syncEvent = (node, eventName, newEventHandler) => {
+    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) {
+        if (newEventHandler) {
+            newEventHandler.call(this, e);
+        }
+    }));
+};
+const arrayToMap = (arr) => {
+    const map = new Map();
+    arr.forEach((s) => map.set(s, s));
+    return map;
+};

package/dist/react-component-lib/utils/case.d.ts

@@ -0,0 +1,2 @@
+export declare const dashToPascalCase: (str: string) => string;
+export declare const camelToDashCase: (str: string) => string;

package/dist/react-component-lib/utils/case.js

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

package/dist/react-component-lib/utils/dev.d.ts

@@ -0,0 +1,2 @@
+export declare const isDevMode: () => boolean;
+export declare const deprecationWarning: (key: string, message: string) => void;

package/dist/react-component-lib/utils/dev.js

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

package/dist/react-component-lib/utils/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { StyleReactProps } from '../interfaces';
+export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
+export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
+export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
+export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export * from './attachProps';
+export * from './case';

package/dist/react-component-lib/utils/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+export const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // Cast as a MutableRef so we can assign current
+        ref.current = value;
+    }
+};
+export const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            setRef(ref, value);
+        });
+    };
+};
+export const createForwardRef = (ReactComponent, displayName) => {
+    const forwardRef = (props, ref) => {
+        return React.createElement(ReactComponent, { ...props, forwardedRef: ref });
+    };
+    forwardRef.displayName = displayName;
+    return React.forwardRef(forwardRef);
+};
+export const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
+export * from './attachProps';
+export * from './case';

package/package.json

@@ -2,8 +2,14 @@
   "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.1",
+  "version": "4.29.3",
   "sideEffects": false,
+  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
   "license": "SEE LICENSE.md",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -12,20 +18,26 @@
   "scripts": {
     "clean": "rimraf dist node_modules .turbo",
     "compile": "yarn tsc",
-    "pre": "rimraf dist",
+    "pre": "rimraf dist && yarn awc patch-jsx-imports",
+    "build": "yarn pre && yarn compile",
+    "build:production": "yarn build",
     "tsc": "tsc"
   },
   "dependencies": {
-    "@arcgis/charts-components": "4.29.1",
-    "react": ">=18.0.0 <19.0.0",
-    "react-dom": ">=18.0.0 <19.0.0"
+    "@arcgis/charts-components": "4.29.3"
   },
   "devDependencies": {
-    "@arcgis/components-plugins": "^4.29.0-beta.1",
+    "@arcgis/components-plugins": "^4.29.5",
     "@arcgis/core": ">=4.29.0-next <4.30",
+    "@arcgis/typescript-config": "^4.29.2",
     "@types/node": "^20.2.5",
     "@types/react-dom": "^18.2.0",
     "rimraf": "^5.0.0",
     "typescript": "~5.3.0"
+  },
+  "peerDependencies": {
+    "@arcgis/core": "~4.29.0",
+    "react": ">=18.0.0 <19.0.0",
+    "react-dom": ">=18.0.0 <19.0.0"
   }
 }

package/src/components.ts

@@ -1,26 +0,0 @@
-/* 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/public-api.ts

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

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

@@ -1,142 +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/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,125 +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(' ');
-};
-
-/**
- * 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

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