@plusui/library 0.1.9 → 0.1.10

package/react/PlusAccordion.js

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

package/react/PlusAccordionGroup.js

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

package/react/PlusAlert.js

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

package/react/PlusAvatar.js

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

package/react/PlusBadge.js

@@ -1,10 +1,12 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useImperativeHandle } from "react";
 import "../dist/components/badge/index.js";
 
 export const PlusBadge = forwardRef((props, forwardedRef) => {
   const { status, size, orientation, offset, content, ...filteredProps } =
     props;
 
+  useImperativeHandle(forwardedRef, () => ({}));
+
   return React.createElement(
     "plus-badge",
     {

package/react/PlusBreadcrumb.js

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

package/react/PlusBreadcrumbItem.js

@@ -1,9 +1,11 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useImperativeHandle } from "react";
 import "../dist/components/breadcrumb-item/index.js";
 
 export const PlusBreadcrumbItem = forwardRef((props, forwardedRef) => {
   const { href, prefixIcon, suffixIcon, ...filteredProps } = props;
 
+  useImperativeHandle(forwardedRef, () => ({}));
+
   return React.createElement(
     "plus-breadcrumb-item",
     {

package/react/PlusButton.js

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

package/react/PlusButtonGroup.js

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

package/react/PlusCheckbox.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useRef, useEffect } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/checkbox/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -21,17 +26,20 @@ export const PlusCheckbox = forwardRef((props, forwardedRef) => {
   useEventListener(ref, "plus-focus", props.onPlusFocus);
   useEventListener(ref, "plus-blur", props.onPlusBlur);
 
+  /** Methods - uses `useImperativeHandle` hook to pass ref to component */
+  useImperativeHandle(forwardedRef, () => ({
+    formResetCallback: () => ref.current.formResetCallback(),
+    formDisabledCallback: (disabled) =>
+      ref.current.formDisabledCallback(disabled),
+    click: () => ref.current.click(),
+    focus: (options) => ref.current.focus(options),
+    blur: () => ref.current.blur(),
+  }));
+
   return React.createElement(
     "plus-checkbox",
     {
-      ref: (node) => {
-        ref.current = node;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
+      ref,
       ...filteredProps,
       name: props.name,
       size: props.size,

package/react/PlusCheckboxGroup.js

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

package/react/PlusChip.js

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

package/react/PlusDivider.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useRef, useEffect } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/divider/index.js";
 import { useProperties } from "./react-utils.js";
 
@@ -16,17 +21,12 @@ export const PlusDivider = forwardRef((props, forwardedRef) => {
   /** Properties - run whenever a property has changed */
   useProperties(ref, "hasContent", props.hasContent);
 
+  useImperativeHandle(forwardedRef, () => ({}));
+
   return React.createElement(
     "plus-divider",
     {
-      ref: (node) => {
-        ref.current = node;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
+      ref,
       ...filteredProps,
       orientation: props.orientation,
       kind: props.kind,

package/react/PlusDrawer.js

@@ -1,10 +1,16 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useImperativeHandle } from "react";
 import "../dist/components/drawer/index.js";
 
 export const PlusDrawer = forwardRef((props, forwardedRef) => {
   const { isOpen, size, orientation, animationDuration, ...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-drawer",
     {

package/react/PlusDropDownItem.js

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

package/react/PlusDropdown.js

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

package/react/PlusIcon.js

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

package/react/PlusInput.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useRef, useEffect } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/input/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -47,17 +52,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: (node) => {
-        ref.current = node;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
+      ref,
       ...filteredProps,
       type: props.type,
       name: props.name,

package/react/PlusLink.js

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

package/react/PlusListBoxItem.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useRef, useEffect } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/list-box-item/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -9,17 +14,12 @@ 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: (node) => {
-        ref.current = node;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
+      ref,
       ...filteredProps,
       size: props.size,
       text: props.text,

package/react/PlusModal.js

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

package/react/PlusPopover.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useRef, useEffect } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/popover/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -22,17 +27,12 @@ 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: (node) => {
-        ref.current = node;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
+      ref,
       ...filteredProps,
       size: props.size,
       orientation: props.orientation,

package/react/PlusRadio.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useRef, useEffect } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/radio/index.js";
 import { useEventListener, useProperties } from "./react-utils.js";
 
@@ -24,17 +29,15 @@ 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: (node) => {
-        ref.current = node;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
+      ref,
       ...filteredProps,
       size: props.size,
       text: props.text,

package/react/PlusRadioGroup.js

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

package/react/PlusRating.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useRef, useEffect } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/rating/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -24,17 +29,15 @@ 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: (node) => {
-        ref.current = node;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
+      ref,
       ...filteredProps,
       value: props.value,
       max: props.max,

package/react/PlusSegmentedPicker.js

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