@plusui/library 0.1.0 → 0.1.3

package/react/PlusInput.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/input/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -53,17 +48,17 @@ export const PlusInput = forwardRef((props, forwardedRef) => {
   useEventListener(ref, "plus-password-toggle", props.onPlusPasswordToggle);
   useEventListener(ref, "plus-invalid", props.onPlusInvalid);
 
-  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
-  useImperativeHandle(forwardedRef, () => ({
-    checkValidity: () => ref.current.checkValidity(),
-    reportValidity: () => ref.current.reportValidity(),
-    setCustomValidity: (message) => ref.current.setCustomValidity(message),
-  }));
-
   return React.createElement(
     "plus-input",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       type: props.type,
       name: props.name,

package/react/PlusLink.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/link/index.js";
 
 export const PlusLink = forwardRef((props, forwardedRef) => {
@@ -16,8 +16,6 @@ export const PlusLink = forwardRef((props, forwardedRef) => {
     ...filteredProps
   } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-link",
     {

package/react/PlusListBoxItem.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/list-box-item/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -14,12 +9,17 @@ export const PlusListBoxItem = forwardRef((props, forwardedRef) => {
   /** Event listeners - run once */
   useEventListener(ref, "click", props.onClick);
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-list-box-item",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       text: props.text,

package/react/PlusModal.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/modal/index.js";
 
 export const PlusModal = forwardRef((props, forwardedRef) => {
@@ -12,12 +12,6 @@ export const PlusModal = forwardRef((props, forwardedRef) => {
     ...filteredProps
   } = props;
 
-  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
-  useImperativeHandle(forwardedRef, () => ({
-    hide: () => ref.current.hide(),
-    show: () => ref.current.show(),
-  }));
-
   return React.createElement(
     "plus-modal",
     {

package/react/PlusPopconfirm.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/popconfirm/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -32,12 +27,17 @@ export const PlusPopconfirm = forwardRef((props, forwardedRef) => {
   );
   useEventListener(ref, "plus-popconfirm-cancel", props.onPlusPopconfirmCancel);
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-popconfirm",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       orientation: props.orientation,

package/react/PlusPopover.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/popover/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -27,12 +22,17 @@ export const PlusPopover = forwardRef((props, forwardedRef) => {
   useEventListener(ref, "plus-popover-close", props.onPlusPopoverClose);
   useEventListener(ref, "plus-popover-dismiss", props.onPlusPopoverDismiss);
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-popover",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       orientation: props.orientation,

package/react/PlusRadio.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/radio/index.js";
 import { useEventListener, useProperties } from "./react-utils.js";
 
@@ -29,15 +24,17 @@ export const PlusRadio = forwardRef((props, forwardedRef) => {
   /** Properties - run whenever a property has changed */
   useProperties(ref, "hasFocus", props.hasFocus);
 
-  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
-  useImperativeHandle(forwardedRef, () => ({
-    handleChange: () => ref.current.handleChange(),
-  }));
-
   return React.createElement(
     "plus-radio",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       text: props.text,

package/react/PlusRadioGroup.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/radio-group/index.js";
 
 export const PlusRadioGroup = forwardRef((props, forwardedRef) => {
@@ -13,8 +13,6 @@ export const PlusRadioGroup = forwardRef((props, forwardedRef) => {
     ...filteredProps
   } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-radio-group",
     {

package/react/PlusRating.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/rating/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -29,15 +24,17 @@ export const PlusRating = forwardRef((props, forwardedRef) => {
   useEventListener(ref, "plus-change", props.onPlusChange);
   useEventListener(ref, "plus-hover", props.onPlusHover);
 
-  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
-  useImperativeHandle(forwardedRef, () => ({
-    reportValidity: () => ref.current.reportValidity(),
-  }));
-
   return React.createElement(
     "plus-rating",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       value: props.value,
       max: props.max,

package/react/PlusSegmentedPicker.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/segmented-picker/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -18,12 +13,17 @@ export const PlusSegmentedPicker = forwardRef((props, forwardedRef) => {
     props.onPlusSegmentedPickerItemChanged,
   );
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-segmented-picker",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       status: props.status,
       shape: props.shape,

package/react/PlusSegmentedPickerItem.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/segmented-picker-item/index.js";
 
 export const PlusSegmentedPickerItem = forwardRef((props, forwardedRef) => {
@@ -13,8 +13,6 @@ export const PlusSegmentedPickerItem = forwardRef((props, forwardedRef) => {
     ...filteredProps
   } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-segmented-picker-item",
     {

package/react/PlusSelect.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/select/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -31,12 +26,17 @@ export const PlusSelect = forwardRef((props, forwardedRef) => {
     props.onPlusSelectSelectedItem,
   );
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-select",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       placeholder: props.placeholder,

package/react/PlusSelectItem.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/select-item/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -14,12 +9,17 @@ export const PlusSelectItem = forwardRef((props, forwardedRef) => {
   /** Event listeners - run once */
   useEventListener(ref, "click", props.onClick);
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-select-item",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       text: props.text,

package/react/PlusService.js

@@ -1,9 +1,7 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/service/index.js";
 
 export const PlusService = forwardRef((props, forwardedRef) => {
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-service",
     {

package/react/PlusSvgIcon.js

@@ -1,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/svg-icon/index.js";
 
 export const PlusSvgIcon = forwardRef((props, forwardedRef) => {
   const { iconName, ...filteredProps } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-svg-icon",
     {

package/react/PlusTab.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/tab/index.js";
 
 export const PlusTab = forwardRef((props, forwardedRef) => {
@@ -16,8 +16,6 @@ export const PlusTab = forwardRef((props, forwardedRef) => {
     ...filteredProps
   } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-tab",
     {

package/react/PlusTabGroup.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/tab-group/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -22,12 +17,17 @@ export const PlusTabGroup = forwardRef((props, forwardedRef) => {
   /** Event listeners - run once */
   useEventListener(ref, "plus-tabs-change", props.onPlusTabsChange);
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-tab-group",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       orientation: props.orientation,

package/react/PlusTabPanel.js

@@ -1,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/tab-panel/index.js";
 
 export const PlusTabPanel = forwardRef((props, forwardedRef) => {
   const { active, value, panelClass, ...filteredProps } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-tab-panel",
     {

package/react/PlusTag.js

@@ -1,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/tag/index.js";
 
 export const PlusTag = forwardRef((props, forwardedRef) => {
   const { invert, status, size, radius, ...filteredProps } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-tag",
     {

package/react/PlusText.js

@@ -1,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/text/index.js";
 
 export const PlusText = forwardRef((props, forwardedRef) => {
   const { kind, ...filteredProps } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-text",
     {

package/react/PlusTextarea.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/textarea/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -38,17 +33,17 @@ export const PlusTextarea = forwardRef((props, forwardedRef) => {
   useEventListener(ref, "plus-blur", props.onPlusBlur);
   useEventListener(ref, "plus-invalid", props.onPlusInvalid);
 
-  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
-  useImperativeHandle(forwardedRef, () => ({
-    checkValidity: () => ref.current.checkValidity(),
-    reportValidity: () => ref.current.reportValidity(),
-    setCustomValidity: (message) => ref.current.setCustomValidity(message),
-  }));
-
   return React.createElement(
     "plus-textarea",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       name: props.name,
       value: props.value,

package/react/PlusToast.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/toast/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -24,12 +19,17 @@ export const PlusToast = forwardRef((props, forwardedRef) => {
   /** Event listeners - run once */
   useEventListener(ref, "plus-close", props.onPlusClose);
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-toast",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       size: props.size,
       kind: props.kind,

package/react/PlusToastContainer.js

@@ -1,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/toast-container/index.js";
 
 export const PlusToastContainer = forwardRef((props, forwardedRef) => {
   const { position, ...filteredProps } = props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-toast-container",
     {

package/react/PlusToggle.js

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/toggle/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -40,17 +35,17 @@ export const PlusToggle = forwardRef((props, forwardedRef) => {
   useEventListener(ref, "plus-blur", props.onPlusBlur);
   useEventListener(ref, "plus-invalid", props.onPlusInvalid);
 
-  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
-  useImperativeHandle(forwardedRef, () => ({
-    checkValidity: () => ref.current.checkValidity(),
-    reportValidity: () => ref.current.reportValidity(),
-    setCustomValidity: (message) => ref.current.setCustomValidity(message),
-  }));
-
   return React.createElement(
     "plus-toggle",
     {
-      ref,
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
       ...filteredProps,
       name: props.name,
       value: props.value,

package/react/PlusTooltip.js

@@ -1,12 +1,10 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/tooltip/index.js";
 
 export const PlusTooltip = forwardRef((props, forwardedRef) => {
   const { size, message, trigger, orientation, hideDelay, ...filteredProps } =
     props;
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-tooltip",
     {

package/react/Tailwind.js

@@ -1,9 +1,7 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components//index.js";
 
 export const Tailwind = forwardRef((props, forwardedRef) => {
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "undefined",
     {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@plusui/library",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {