@plusui/library 0.1.8 → 0.1.9

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";
 
@@ -32,12 +27,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/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";
 
@@ -39,17 +34,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/types/custom-element-jsx.d.ts

@@ -111,6 +111,23 @@ export type PlusButtonProps = {
   loading?: boolean;
   /**  */
   "full-width"?: boolean;
+  /** When provided, renders as an anchor link instead of a button */
+  href?: string | undefined;
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: string | undefined;
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: string | undefined;
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: string | undefined;
+  /** When true, link opens in new tab with secure attributes
+Automatically sets target="_blank" and rel="noopener noreferrer" */
+  external?: boolean;
+  /** Specifies the button type for form interactions
+Only applies when rendering as a button (no href) */
+  type?: "button" | "submit" | "reset";
 };
 
 export type PlusButtonGroupProps = {

package/types/custom-element-solidjs.d.ts

@@ -115,6 +115,23 @@ type PlusButtonProps = {
   loading?: boolean;
   /**  */
   "full-width"?: boolean;
+  /** When provided, renders as an anchor link instead of a button */
+  href?: string | undefined;
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: string | undefined;
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: string | undefined;
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: string | undefined;
+  /** When true, link opens in new tab with secure attributes
+Automatically sets target="_blank" and rel="noopener noreferrer" */
+  external?: boolean;
+  /** Specifies the button type for form interactions
+Only applies when rendering as a button (no href) */
+  type?: "button" | "submit" | "reset";
 } & JSX.DirectiveFunctionAttributes<PlusButton> &
   JSX.OnAttributes<PlusButton> &
   JSX.OnCaptureAttributes<PlusButton>;

package/types/custom-element-svelte.d.ts

@@ -88,6 +88,23 @@ type PlusButtonProps = {
   loading?: boolean;
   /**  */
   "full-width"?: boolean;
+  /** When provided, renders as an anchor link instead of a button */
+  href?: string | undefined;
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: string | undefined;
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: string | undefined;
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: string | undefined;
+  /** When true, link opens in new tab with secure attributes
+Automatically sets target="_blank" and rel="noopener noreferrer" */
+  external?: boolean;
+  /** Specifies the button type for form interactions
+Only applies when rendering as a button (no href) */
+  type?: "button" | "submit" | "reset";
 };
 
 type PlusButtonGroupProps = {

package/types/custom-element-vuejs.d.ts

@@ -51,6 +51,23 @@ type PlusButtonProps = {
   loading?: boolean;
   /**  */
   "full-width"?: boolean;
+  /** When provided, renders as an anchor link instead of a button */
+  href?: string | undefined;
+  /** Specifies where to display the linked URL
+Common values: _blank, _self, _parent, _top */
+  target?: string | undefined;
+  /** Specifies the relationship between the current document and the linked document
+Common values: nofollow, noopener, noreferrer */
+  rel?: string | undefined;
+  /** Sets the link to download the target URL instead of navigating
+Optional value specifies the suggested filename */
+  download?: string | undefined;
+  /** When true, link opens in new tab with secure attributes
+Automatically sets target="_blank" and rel="noopener noreferrer" */
+  external?: boolean;
+  /** Specifies the button type for form interactions
+Only applies when rendering as a button (no href) */
+  type?: "button" | "submit" | "reset";
 };
 
 type PlusButtonGroupProps = {

package/vscode.html-custom-data.json

@@ -94,7 +94,41 @@
           "description": "Shows loading spinner and disables interaction",
           "values": []
         },
-        { "name": "full-width", "values": [] }
+        { "name": "full-width", "values": [] },
+        {
+          "name": "href",
+          "description": "When provided, renders as an anchor link instead of a button",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Specifies where to display the linked URL\nCommon values: _blank, _self, _parent, _top",
+          "values": []
+        },
+        {
+          "name": "rel",
+          "description": "Specifies the relationship between the current document and the linked document\nCommon values: nofollow, noopener, noreferrer",
+          "values": []
+        },
+        {
+          "name": "download",
+          "description": "Sets the link to download the target URL instead of navigating\nOptional value specifies the suggested filename",
+          "values": []
+        },
+        {
+          "name": "external",
+          "description": "When true, link opens in new tab with secure attributes\nAutomatically sets target=\"_blank\" and rel=\"noopener noreferrer\"",
+          "values": []
+        },
+        {
+          "name": "type",
+          "description": "Specifies the button type for form interactions\nOnly applies when rendering as a button (no href)",
+          "values": [
+            { "name": "button" },
+            { "name": "submit" },
+            { "name": "reset" }
+          ]
+        }
       ],
       "references": []
     },

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.7",
+  "version": "0.1.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -151,6 +151,39 @@
             {
               "name": "full-width",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "href",
+              "description": "When provided, renders as an anchor link instead of a button",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "target",
+              "description": "Specifies where to display the linked URL\nCommon values: _blank, _self, _parent, _top",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "rel",
+              "description": "Specifies the relationship between the current document and the linked document\nCommon values: nofollow, noopener, noreferrer",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "download",
+              "description": "Sets the link to download the target URL instead of navigating\nOptional value specifies the suggested filename",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "external",
+              "description": "When true, link opens in new tab with secure attributes\nAutomatically sets target=\"_blank\" and rel=\"noopener noreferrer\"",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "type",
+              "description": "Specifies the button type for form interactions\nOnly applies when rendering as a button (no href)",
+              "value": {
+                "type": "'button' | 'submit' | 'reset'",
+                "default": "'button'"
+              }
             }
           ],
           "events": [],
@@ -181,7 +214,37 @@
                 "description": "Shows loading spinner and disables interaction",
                 "type": "boolean"
               },
-              { "name": "fullWidth", "type": "boolean" }
+              { "name": "fullWidth", "type": "boolean" },
+              {
+                "name": "href",
+                "description": "When provided, renders as an anchor link instead of a button",
+                "type": "string | undefined"
+              },
+              {
+                "name": "target",
+                "description": "Specifies where to display the linked URL\nCommon values: _blank, _self, _parent, _top",
+                "type": "string | undefined"
+              },
+              {
+                "name": "rel",
+                "description": "Specifies the relationship between the current document and the linked document\nCommon values: nofollow, noopener, noreferrer",
+                "type": "string | undefined"
+              },
+              {
+                "name": "download",
+                "description": "Sets the link to download the target URL instead of navigating\nOptional value specifies the suggested filename",
+                "type": "string | undefined"
+              },
+              {
+                "name": "external",
+                "description": "When true, link opens in new tab with secure attributes\nAutomatically sets target=\"_blank\" and rel=\"noopener noreferrer\"",
+                "type": "boolean"
+              },
+              {
+                "name": "type",
+                "description": "Specifies the button type for form interactions\nOnly applies when rendering as a button (no href)",
+                "type": "'button' | 'submit' | 'reset'"
+              }
             ],
             "events": []
           }