@plusui/library 0.1.2 → 0.1.4

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

@@ -37,7 +37,7 @@ export interface PlusAvatarProps
 Can be a predefined size (xs, sm, md, lg, xl) or custom value */
   size?: PlusAvatarElement["size"];
 
-  /** Icon class to use when no image is available */
+  /** Icon name to use when no image is available */
   icon?: PlusAvatarElement["icon"];
 
   /** Text to display as initials when no image is available */

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

@@ -19,11 +19,17 @@ export interface PlusIconProps
     | "onFocus"
     | "onBlur"
   > {
-  /** undefined */
+  /** Name of the icon to display */
   iconName?: PlusIconElement["iconName"];
 
-  /** undefined */
-  prefix?: PlusIconElement["prefix"];
+  /** Style variant of the icon: solid, regular, or light */
+  iconStyle?: PlusIconElement["iconStyle"];
+
+  /** Size variant for the icon */
+  size?: PlusIconElement["size"];
+
+  /** Label for accessibility - will be used as aria-label */
+  label?: PlusIconElement["label"];
 
   /** 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;
@@ -51,5 +57,13 @@ export interface PlusIconProps
  *
  * ---
  *
+ *
+ * ### **CSS Properties:**
+ *  - **--icon-size** - Custom icon size (overrides size variants) _(default: undefined)_
+ * - **--icon-color** - Custom icon color (overrides currentColor) _(default: undefined)_
+ *
+ * ### **CSS Parts:**
+ *  - **base** - The component's base wrapper
+ * - **icon** - The SVG icon element
  */
 export const PlusIcon: React.ForwardRefExoticComponent<PlusIconProps>;

package/react/PlusIcon.js

@@ -1,15 +1,19 @@
-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, prefix, ...filteredProps } = props;
+  const { iconName, iconStyle, size, label, ...filteredProps } = props;
+
+  useImperativeHandle(forwardedRef, () => ({}));
 
   return React.createElement(
     "plus-icon",
     {
       ...filteredProps,
-      iconName: props.iconName,
-      prefix: props.prefix,
+      "icon-name": props.iconName || props["icon-name"],
+      "icon-style": props.iconStyle || props["icon-style"],
+      size: props.size,
+      label: props.label,
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,

package/react/PlusInput.d.ts

@@ -37,21 +37,18 @@ export interface PlusInputProps
   /** Whether the password is visible */
   passwordVisible?: boolean;
 
+  /** Whether the input is in an error state */
+  error?: boolean;
+
   /** Whether the input should automatically get focus */
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
 
   /** Whether spellcheck is enabled */
-  spellCheck?: boolean;
-
-  /** Whether the input is in an error state */
-  error?: boolean;
+  spellCheck?: boolean | undefined;
 
   /** Whether the input should take up full width */
   fullWidth?: boolean;
 
-  /** Whether the input is used as part of a select component */
-  isSelect?: boolean;
-
   /** The type of input */
   type?: PlusInputElement["type"];
 

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";
 
@@ -11,11 +16,10 @@ export const PlusInput = forwardRef((props, forwardedRef) => {
     required,
     passwordToggle,
     passwordVisible,
+    error,
     autoFocus,
     spellCheck,
-    error,
     fullWidth,
-    isSelect,
     type,
     name,
     value,
@@ -48,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,
@@ -91,11 +95,10 @@ export const PlusInput = forwardRef((props, forwardedRef) => {
       required: props.required ? "" : undefined,
       "password-toggle": props.passwordToggle ? "" : undefined,
       "password-visible": props.passwordVisible ? "" : undefined,
+      error: props.error ? "" : undefined,
       autoFocus: props.autoFocus ? "" : undefined,
       spellCheck: props.spellCheck ? "" : undefined,
-      error: props.error ? "" : undefined,
       "full-width": props.fullWidth ? "" : undefined,
-      isSelect: props.isSelect ? "" : undefined,
       style: { ...props.style },
     },
     props.children,

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

@@ -19,12 +19,10 @@ export interface PlusListBoxItemProps
     | "onFocus"
     | "onBlur"
   > {
-  /** Disables the list box item interaction
-When disabled, the item cannot be clicked or selected */
+  /** Disables the item, making it non-interactive. */
   disabled?: boolean;
 
-  /** Sets the selected state of the list box item
-When selected, the item will display with a highlighted background */
+  /** Indicates whether the item is currently selected. */
   selected?: boolean;
 
   /** Sets the size of the list box item

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

@@ -19,16 +19,10 @@ export interface PlusPopconfirmProps
     | "onFocus"
     | "onBlur"
   > {
-  /** Determines whether a status icon should be displayed in the popconfirm.
-
-- `true` (default) - An icon representing the status will be displayed.
-- `false` - No icon will be displayed. */
+  /** Determines whether a status icon should be displayed in the popconfirm. */
   statusIcon?: boolean;
 
-  /** Determines whether the arrow should be displayed.
-
-- `true` (default) - Arrow will be displayed.
-- `false` - Arrow will be hidden. */
+  /** Determines whether the arrow should be displayed. */
   showArrow?: boolean;
 
   /** The size of the popconfirm.

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,