@plusui/library 0.1.2 → 0.1.4

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,
@@ -46,8 +46,8 @@ export const PlusPopover = forwardRef((props, forwardedRef) => {
       part: props.part,
       tabindex: props.tabIndex,
       dismissable: props.dismissable ? "" : undefined,
-      statusIcon: props.statusIcon ? "" : undefined,
-      showArrow: props.showArrow ? "" : undefined,
+      "status-icon": props.statusIcon ? "" : undefined,
+      "show-arrow": props.showArrow ? "" : undefined,
       style: { ...props.style },
     },
     props.children,

package/react/PlusRadio.d.ts

@@ -19,19 +19,19 @@ export interface PlusRadioProps
     | "onFocus"
     | "onBlur"
   > {
-  /** Indicates whether the radio button is checked */
+  /** Whether the radio is checked. */
   checked?: boolean;
 
-  /** Indicates if the radio button is in an error state */
+  /** Whether the radio is in an error state. */
   error?: boolean;
 
-  /** Disables the radio button interaction */
+  /** Whether the radio is disabled. */
   disabled?: boolean;
 
-  /** Makes the radio button readonly (non-interactive but not disabled) */
+  /** Whether the radio is readonly. */
   readonly?: boolean;
 
-  /** Indicates if the radio input is required */
+  /** Whether the radio is required. */
   required?: boolean;
 
   /** Sets the size of the radio button
@@ -43,10 +43,10 @@ export interface PlusRadioProps
   /** Defines the text label for the radio button */
   text?: PlusRadioElement["text"];
 
-  /** The name of the radio button, used for form submission and radio grouping */
+  /** The radio's name attribute. */
   name?: PlusRadioElement["name"];
 
-  /** The value associated with the radio button */
+  /** The radio's value attribute. */
   value?: PlusRadioElement["value"];
 
   /** 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()`. */

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.d.ts

@@ -19,13 +19,13 @@ export interface PlusRadioGroupProps
     | "onFocus"
     | "onBlur"
   > {
-  /** undefined */
+  /** Disables all radio buttons in the group. */
   disabled?: boolean;
 
-  /** undefined */
+  /** Makes the radio group required for form submission. */
   required?: boolean;
 
-  /** Shows error styling on the radio group */
+  /** Displays the radio buttons in an error state. */
   error?: boolean;
 
   /** undefined */

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,

package/react/PlusSegmentedPickerItem.d.ts

@@ -19,10 +19,10 @@ export interface PlusSegmentedPickerItemProps
     | "onFocus"
     | "onBlur"
   > {
-  /** Whether the item is checked. */
+  /** The value associated with the item. */
   checked?: boolean;
 
-  /** Whether the item is disabled. */
+  /** Disables the item, making it non-interactive. */
   disabled?: boolean;
 
   /** The status of the item. */
@@ -70,6 +70,9 @@ export interface PlusSegmentedPickerItemProps
  * ### **Slots:**
  *  - _default_ - The content of the item.
  *
+ * ### **CSS Properties:**
+ *  - **--active-color** - Color of the active indicator _(default: undefined)_
+ *
  * ### **CSS Parts:**
  *  - **label** - The label element.
  * - **input** - The input element.

package/react/PlusSegmentedPickerItem.js

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

package/react/PlusSelect.d.ts

@@ -34,6 +34,9 @@ export interface PlusSelectProps
   /** Enables a clear button to reset the selection. */
   clearable?: boolean;
 
+  /** Makes the select full width. */
+  fullWidth?: boolean;
+
   /** Sets the size of the select button. */
   size?: PlusSelectElement["size"];
 

package/react/PlusSelect.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useRef, useEffect } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/select/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -10,6 +15,7 @@ export const PlusSelect = forwardRef((props, forwardedRef) => {
     required,
     readonly,
     clearable,
+    fullWidth,
     size,
     placeholder,
     label,
@@ -26,17 +32,12 @@ export const PlusSelect = forwardRef((props, forwardedRef) => {
     props.onPlusSelectSelectedItem,
   );
 
+  useImperativeHandle(forwardedRef, () => ({}));
+
   return React.createElement(
     "plus-select",
     {
-      ref: (node) => {
-        ref.current = node;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
+      ref,
       ...filteredProps,
       size: props.size,
       placeholder: props.placeholder,
@@ -52,6 +53,7 @@ export const PlusSelect = forwardRef((props, forwardedRef) => {
       required: props.required ? "" : undefined,
       readonly: props.readonly ? "" : undefined,
       clearable: props.clearable ? "" : undefined,
+      "full-width": props.fullWidth ? "" : undefined,
       style: { ...props.style },
     },
     props.children,

package/react/PlusSelectItem.js

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

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

package/react/PlusTab.d.ts

@@ -49,10 +49,10 @@ This is controlled by the parent tab-group */
 - vertical: Tabs arranged vertically */
   orientation?: PlusTabElement["orientation"];
 
-  /** Icon to display before the tab content */
+  /** Icon name to display before the tab content */
   prefixIcon?: PlusTabElement["prefixIcon"];
 
-  /** Icon to display after the tab content */
+  /** Icon name to display after the tab content */
   suffixIcon?: PlusTabElement["suffixIcon"];
 
   /** 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()`. */

package/react/PlusTab.js

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

package/react/PlusTabGroup.d.ts

@@ -22,7 +22,7 @@ export interface PlusTabGroupProps
   /** Disables all tabs */
   disabled?: boolean;
 
-  /** Enables the dismiss button on all tabs */
+  /** Allows individual tabs to be dismissed (closed). */
   dismissible?: boolean;
 
   /** Enables animated sliding indicator for active tab */

package/react/PlusTabGroup.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useRef, useEffect } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/tab-group/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -17,17 +22,12 @@ 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: (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/PlusTabPanel.d.ts

@@ -19,13 +19,13 @@ export interface PlusTabPanelProps
     | "onFocus"
     | "onBlur"
   > {
-  /** Indicates if the panel is currently visible */
+  /** Indicates whether the panel is currently active/visible. */
   active?: boolean;
 
   /** Sets the value of the tab panel, used for matching with a tab */
   value?: PlusTabPanelElement["value"];
 
-  /** Custom CSS class to apply to the panel */
+  /** An optional class to apply to the panel container. */
   panelClass?: PlusTabPanelElement["panelClass"];
 
   /** 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()`. */

package/react/PlusTabPanel.js

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

package/react/PlusToast.js

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

package/react/PlusToastContainer.js

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

@@ -67,9 +67,6 @@ export interface PlusToggleProps
   /** undefined */
   toggleInActiveIcon?: PlusToggleElement["toggleInActiveIcon"];
 
-  /** undefined */
-  iconSize?: PlusToggleElement["iconSize"];
-
   /** undefined */
   errorMessage?: PlusToggleElement["errorMessage"];
 

package/react/PlusToggle.js

@@ -1,4 +1,9 @@
-import React, { forwardRef, useRef, useEffect } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+} from "react";
 import "../dist/components/toggle/index.js";
 import { useEventListener } from "./react-utils.js";
 
@@ -21,7 +26,6 @@ export const PlusToggle = forwardRef((props, forwardedRef) => {
     toggleIcon,
     toggleActiveIcon,
     toggleInActiveIcon,
-    iconSize,
     errorMessage,
     animation,
     customAriaLabel,
@@ -35,17 +39,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: (node) => {
-        ref.current = node;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
+      ref,
       ...filteredProps,
       name: props.name,
       value: props.value,
@@ -59,7 +63,6 @@ export const PlusToggle = forwardRef((props, forwardedRef) => {
         props.toggleActiveIcon || props["toggle-active-icon"],
       "toggle-inactive-icon":
         props.toggleInActiveIcon || props["toggle-inactive-icon"],
-      "icon-size": props.iconSize || props["icon-size"],
       "error-message": props.errorMessage || props["error-message"],
       animation: props.animation,
       "custom-aria-label": props.customAriaLabel || props["custom-aria-label"],

package/react/PlusTooltip.js

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