genesys-spark-components-react 4.0.0-beta.39 → 4.0.0-beta.41

package/README.md

@@ -1,3 +1,33 @@
-# genesys-spark-components-react
+# React Integration
 
-This should contain useful information about the package
+This package generates a set of react wrapper elements which are published in `genesys-spark-components-react` and should be used in favor of directly using the custom elements in a React app.
+
+## Installation
+
+Install `genesys-spark-components-react` with same version as the desired `genesys-spark-components` version. (e.g. `genesys-spark-components-react@X.Y.Z` will install `genesys-spark-components@X.Y.Z`). To avoid version conflicts, remove the direct dependency on `genesys-spark-components` if adding to an existing consumer of the spark components.
+
+## Usage
+
+Native React elements are imported from `genesys-spark-components-react`, the custom elements still need to be registered as before, (e.g. with `registerElements` imported from `genesys-spark-components`).
+
+## Example
+
+```ts
+import { registerElements } from 'genesys-spark-components';
+import { GuxButton } from 'genesys-spark-components-react';
+registerElements(); // Realistically this would probably be in something like index.tsx
+
+const MyReactComponent = () => {
+  const [counter, setCounter] = useState(0);
+
+  return (
+    <GuxButton onClick={() => setCounter(x => x + 1)}>
+      You have clicked {counter} times
+    </GuxButton>
+  );
+};
+```
+
+## Events
+
+If a stencil component defines an event called `eventname`, then the React wrapper element will have a corresponding `onEventname` prop. For example, `<GuxModal>` has `onGuxdismiss` corresponding to the `guxdismiss` event from `<gux-modal>`.

package/dist/index.d.ts

@@ -103,7 +103,6 @@ export declare const GuxTabList: import("react").ForwardRefExoticComponent<JSX.G
 export declare const GuxTabPanel: import("react").ForwardRefExoticComponent<JSX.GuxTabPanel & Omit<import("react").HTMLAttributes<HTMLGuxTabPanelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLGuxTabPanelElement>>;
 export declare const GuxTable: import("react").ForwardRefExoticComponent<JSX.GuxTable & Omit<import("react").HTMLAttributes<HTMLGuxTableElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLGuxTableElement>>;
 export declare const GuxTableSelectMenu: import("react").ForwardRefExoticComponent<JSX.GuxTableSelectMenu & Omit<import("react").HTMLAttributes<HTMLGuxTableSelectMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLGuxTableSelectMenuElement>>;
-export declare const GuxTableSelectPopover: import("react").ForwardRefExoticComponent<JSX.GuxTableSelectPopover & Omit<import("react").HTMLAttributes<HTMLGuxTableSelectPopoverElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLGuxTableSelectPopoverElement>>;
 export declare const GuxTableToolbar: import("react").ForwardRefExoticComponent<JSX.GuxTableToolbar & Omit<import("react").HTMLAttributes<HTMLGuxTableToolbarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLGuxTableToolbarElement>>;
 export declare const GuxTableToolbarAction: import("react").ForwardRefExoticComponent<JSX.GuxTableToolbarAction & Omit<import("react").HTMLAttributes<HTMLGuxTableToolbarActionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLGuxTableToolbarActionElement>>;
 export declare const GuxTableToolbarCustomAction: import("react").ForwardRefExoticComponent<JSX.GuxTableToolbarCustomAction & Omit<import("react").HTMLAttributes<HTMLGuxTableToolbarCustomActionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLGuxTableToolbarCustomActionElement>>;

package/dist/index.js

@@ -105,7 +105,6 @@ export const GuxTabList = /*@__PURE__*/ createReactComponent('gux-tab-list');
 export const GuxTabPanel = /*@__PURE__*/ createReactComponent('gux-tab-panel');
 export const GuxTable = /*@__PURE__*/ createReactComponent('gux-table');
 export const GuxTableSelectMenu = /*@__PURE__*/ createReactComponent('gux-table-select-menu');
-export const GuxTableSelectPopover = /*@__PURE__*/ createReactComponent('gux-table-select-popover');
 export const GuxTableToolbar = /*@__PURE__*/ createReactComponent('gux-table-toolbar');
 export const GuxTableToolbarAction = /*@__PURE__*/ createReactComponent('gux-table-toolbar-action');
 export const GuxTableToolbarCustomAction = /*@__PURE__*/ createReactComponent('gux-table-toolbar-custom-action');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genesys-spark-components-react",
-  "version": "4.0.0-beta.39",
+  "version": "4.0.0-beta.41",
   "description": "",
   "license": "MIT",
   "main": "dist/index.js",
@@ -19,7 +19,7 @@
     "version-sync": "npm version --no-git-tag-version --allow-same-version"
   },
   "dependencies": {
-    "genesys-spark-components": "4.0.0-beta.39"
+    "genesys-spark-components": "4.0.0-beta.41"
   },
   "peerDependencies": {
     "@types/react": "16 - 18",