@arcgis/charts-components-react 4.33.0-next.16 → 4.33.0-next.160

package/README.md

@@ -1,10 +1,10 @@
-# ArcGIS Maps SDK for JavaScript - React wapper for Charts Components (beta)
+# ArcGIS Maps SDK for JavaScript - React wrapper for Charts Components (beta)
 
 **No Esri Technical Support during beta.**
 
-The ArcGIS Maps SDK for JavaScript provides a suite of ready-to-use UI components that simplify the process of creating GIS web applications. This package offers a series of charting components that can be used to build custom applications.
+> Note: `@arcgis/charts-components-react` was developed for use in React 18. Consider updating to React 19 where the React wrapper is no longer necessary. Check out the [documentation](https://developers.arcgis.com/javascript/latest/get-started-react/) to get started with `@arcgis/charts-components` in React 19.
 
-Samples for how to use this package are available on github in the [jsapi-resources](https://github.com/Esri/jsapi-resources) repository.
+The ArcGIS Maps SDK for JavaScript provides a suite of ready-to-use UI components that simplify the process of creating GIS web applications. This package offers a series of charting components that can be used to build custom applications.
 
 ## Documentation
 
@@ -22,11 +22,47 @@ Samples for how to use this package are available on github in the [jsapi-resour
 - [Licensing](https://developers.arcgis.com/javascript/latest/licensing/)
 - [Working with `next` versions](https://github.com/Esri/feedback-js-api-next/blob/main/README.md)
 
-## Issues
+## Support
 
 - General questions about using this package or the ArcGIS Maps SDK for JavaScript? See the [Esri developer community](https://community.esri.com/t5/arcgis-api-for-javascript/ct-p/arcgis-api-for-javascript).
 - [Technical support](https://support.esri.com/).
 
+## Quick start guide
+
+- Get started by using the [react 18 sample](https://developers.arcgis.com/javascript/latest/get-started-react/#download-project).
+- Install the required packages: `@arcgis/charts-components-react`, `@arcgis/core`, `@esri/calcite-components-react`.
+- Import the necessary CSS files in your project and ensure CSS is configured for the charts components:
+
+```js
+@import 'https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/dark/main.css';
+@import url("https://js.arcgis.com/calcite-components/3.2.0/calcite.css");
+
+#root,
+html,
+body {
+  margin: 0;
+}
+```
+
+- Add chart component: In your main file (e.g., index.tsx), add the `ArcgisChart` component and configure it with either an existing chart model from a feature layer, or by creating a new model with `createModel()`.
+
+```js
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@arcgis/charts-components/components/arcgis-chart";
+import "@arcgis/charts-components/components/arcgis-charts-action-bar";
+import { ArcgisChart, ArcgisChartsActionBar } from "@arcgis/charts-components-react";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <ArcgisChart>
+      <ArcgisChartsActionBar slot="action-bar"></ArcgisChartsActionBar>
+    </ArcgisChart>
+  </React.StrictMode>,
+);
+```
+
 ## License
 
 COPYRIGHT © 2025 Esri

package/dist/components.d.ts

@@ -1,3 +1,25 @@
-import type { JSX } from '@arcgis/charts-components';
-export declare const ArcgisChart: import("react").ForwardRefExoticComponent<JSX.ArcgisChart & Omit<import("react").HTMLAttributes<HTMLArcgisChartElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLArcgisChartElement>>;
-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>>;
+/// <reference types="@arcgis/charts-components" preserve="true" />
+import type { EventName } from "@lit/react";
+export declare const ArcgisChart: import("@lit/react").ReactWebComponent<HTMLArcgisChartElement & {
+    class?: string;
+}, {
+    onArcgisAxesMinMaxChange: EventName<HTMLArcgisChartElement["arcgisAxesMinMaxChange"]>;
+    onArcgisBadDataWarningRaise: EventName<HTMLArcgisChartElement["arcgisBadDataWarningRaise"]>;
+    onArcgisConfigChange: EventName<HTMLArcgisChartElement["arcgisConfigChange"]>;
+    onArcgisDataFetchComplete: EventName<HTMLArcgisChartElement["arcgisDataFetchComplete"]>;
+    onArcgisDataProcessComplete: EventName<HTMLArcgisChartElement["arcgisDataProcessComplete"]>;
+    onArcgisDataProcessError: EventName<HTMLArcgisChartElement["arcgisDataProcessError"]>;
+    onArcgisLegendItemVisibilityChange: EventName<HTMLArcgisChartElement["arcgisLegendItemVisibilityChange"]>;
+    onArcgisNoRenderPropChange: EventName<HTMLArcgisChartElement["arcgisNoRenderPropChange"]>;
+    onArcgisRuntimeError: EventName<HTMLArcgisChartElement["arcgisRuntimeError"]>;
+    onArcgisSelectionComplete: EventName<HTMLArcgisChartElement["arcgisSelectionComplete"]>;
+    onArcgisSeriesColorChange: EventName<HTMLArcgisChartElement["arcgisSeriesColorChange"]>;
+    onArcgisSeriesOrder: EventName<HTMLArcgisChartElement["arcgisSeriesOrder"]>;
+    onArcgisUpdateComplete: EventName<HTMLArcgisChartElement["arcgisUpdateComplete"]>;
+}>;
+export declare const ArcgisChartsActionBar: import("@lit/react").ReactWebComponent<HTMLArcgisChartsActionBarElement & {
+    class?: string;
+}, {
+    onArcgisActionBarToggle: EventName<HTMLArcgisChartsActionBarElement["arcgisActionBarToggle"]>;
+    onArcgisDefaultActionSelect: EventName<HTMLArcgisChartsActionBarElement["arcgisDefaultActionSelect"]>;
+}>;

package/dist/components.js

@@ -1,6 +1,24 @@
-/* eslint-disable */
-/* tslint:disable */
-/* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';
-export const ArcgisChart = /*@__PURE__*/ createReactComponent('arcgis-chart');
-export const ArcgisChartsActionBar = /*@__PURE__*/ createReactComponent('arcgis-charts-action-bar');
+/// <reference types="@arcgis/charts-components" preserve="true" />
+import React from "react";
+import { createComponent } from "@lit/react";
+import { makeReactWrapperFactory, getReactWrapperOptions } from "@arcgis/lumina";
+const createWrapper = /*@__PURE__*/ makeReactWrapperFactory(React, createComponent);
+export const ArcgisChart = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-chart", {
+    onArcgisAxesMinMaxChange: "arcgisAxesMinMaxChange",
+    onArcgisBadDataWarningRaise: "arcgisBadDataWarningRaise",
+    onArcgisConfigChange: "arcgisConfigChange",
+    onArcgisDataFetchComplete: "arcgisDataFetchComplete",
+    onArcgisDataProcessComplete: "arcgisDataProcessComplete",
+    onArcgisDataProcessError: "arcgisDataProcessError",
+    onArcgisLegendItemVisibilityChange: "arcgisLegendItemVisibilityChange",
+    onArcgisNoRenderPropChange: "arcgisNoRenderPropChange",
+    onArcgisRuntimeError: "arcgisRuntimeError",
+    onArcgisSelectionComplete: "arcgisSelectionComplete",
+    onArcgisSeriesColorChange: "arcgisSeriesColorChange",
+    onArcgisSeriesOrder: "arcgisSeriesOrder",
+    onArcgisUpdateComplete: "arcgisUpdateComplete",
+}));
+export const ArcgisChartsActionBar = /*@__PURE__*/ createWrapper(getReactWrapperOptions("arcgis-charts-action-bar", {
+    onArcgisActionBarToggle: "arcgisActionBarToggle",
+    onArcgisDefaultActionSelect: "arcgisDefaultActionSelect",
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/charts-components-react",
-  "version": "4.33.0-next.16",
+  "version": "4.33.0-next.160",
   "description": "A set of React components that wrap ArcGIS charts components",
   "keywords": [
     "ArcGIS",
@@ -18,6 +18,7 @@
   ],
   "homepage": "https://developers.arcgis.com/javascript/latest/",
   "sideEffects": false,
+  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,13 +27,13 @@
   ],
   "license": "SEE LICENSE.md",
   "dependencies": {
-    "@arcgis/charts-components": "4.33.0-next.16",
-    "@arcgis/charts-shared-utils": "4.33.0-next.16",
-    "@arcgis/charts-spec": "4.33.0-next.16"
+    "@arcgis/charts-components": "4.33.0-next.160",
+    "@lit/react": "^1.0.7",
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "@arcgis/core": ">=4.33.0-next <4.34",
-    "react": ">=18.0.0 <19.0.0",
-    "react-dom": ">=18.0.0 <19.0.0"
+    "react": ">=18.0.0 <20.0.0",
+    "react-dom": ">=18.0.0 <20.0.0"
   }
 }

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

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

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

@@ -1,21 +0,0 @@
-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>;
-}> & React.RefAttributes<OverlayType>>;
-export {};

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

@@ -1,95 +0,0 @@
-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.d.ts

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

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

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

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

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

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

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

@@ -1,16 +0,0 @@
-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;
-    };
-}, eventName: string, newEventHandler?: (e: Event) => any) => void;

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

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

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

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

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

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

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

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

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

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