@plusui/library 0.1.7 → 0.1.9

package/react/PlusAccordion.js

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

package/react/PlusAccordionGroup.js

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

package/react/PlusAvatar.js

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

package/react/PlusBadge.js

@@ -1,12 +1,10 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } 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,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } 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,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } 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.d.ts

@@ -28,6 +28,10 @@ export interface PlusButtonProps
   /** undefined */
   fullWidth?: boolean;
 
+  /** When true, link opens in new tab with secure attributes
+Automatically sets target="_blank" and rel="noopener noreferrer" */
+  external?: boolean;
+
   /** Determines the visual style of the button
 - filled: Solid background color
 - outlined: Transparent background with border
@@ -50,6 +54,25 @@ export interface PlusButtonProps
 - lg: Large size */
   size?: PlusButtonElement["size"];
 
+  /** When provided, renders as an anchor link instead of a button */
+  href?: PlusButtonElement["href"];
+
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: PlusButtonElement["target"];
+
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: PlusButtonElement["rel"];
+
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: PlusButtonElement["download"];
+
+  /** Specifies the button type for form interactions
+Only applies when rendering as a button (no href) */
+  type?: PlusButtonElement["type"];
+
   /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
   className?: string;
 

package/react/PlusButton.js

@@ -1,11 +1,22 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } from "react";
 import "../dist/components/button/index.js";
 
 export const PlusButton = forwardRef((props, forwardedRef) => {
-  const { disabled, loading, fullWidth, kind, status, size, ...filteredProps } =
-    props;
-
-  useImperativeHandle(forwardedRef, () => ({}));
+  const {
+    disabled,
+    loading,
+    fullWidth,
+    external,
+    kind,
+    status,
+    size,
+    href,
+    target,
+    rel,
+    download,
+    type,
+    ...filteredProps
+  } = props;
 
   return React.createElement(
     "plus-button",
@@ -14,6 +25,11 @@ export const PlusButton = forwardRef((props, forwardedRef) => {
       kind: props.kind,
       status: props.status,
       size: props.size,
+      href: props.href,
+      target: props.target,
+      rel: props.rel,
+      download: props.download,
+      type: props.type,
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,
@@ -22,6 +38,7 @@ export const PlusButton = forwardRef((props, forwardedRef) => {
       disabled: props.disabled ? "" : undefined,
       loading: props.loading ? "" : undefined,
       "full-width": props.fullWidth ? "" : undefined,
+      external: props.external ? "" : undefined,
       style: { ...props.style },
     },
     props.children,

package/react/PlusButtonGroup.js

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

package/react/PlusCheckbox.js

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

package/react/PlusCheckboxGroup.js

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

package/react/PlusChip.js

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

package/react/PlusDivider.js

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

package/react/PlusDrawer.js

@@ -1,16 +1,10 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } 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,9 +1,4 @@
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useEffect,
-} from "react";
+import React, { forwardRef, useRef, useEffect } from "react";
 import "../dist/components/dropdown-item/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -14,12 +9,17 @@ export const PlusDropDownItem = forwardRef((props, forwardedRef) => {
   /** Event listeners - run once */
   useEventListener(ref, "click", props.onClick);
 
-  useImperativeHandle(forwardedRef, () => ({}));
-
   return React.createElement(
     "plus-dropdown-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/PlusDropdown.js

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

package/react/PlusIcon.js

@@ -1,11 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from "react";
+import React, { forwardRef } 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,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";
 
@@ -52,17 +47,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",
     {