@nysds/components 1.15.0 → 1.15.1

package/packages/react/NysRadiobutton.js

@@ -0,0 +1,68 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
+
+export const NysRadiobutton = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    checked,
+    disabled,
+    required,
+    inverted,
+    tile,
+    other,
+    showOtherError,
+    label,
+    description,
+    id,
+    name,
+    value,
+    form,
+    size,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-error-clear", props.onNysErrorClear);
+  useEventListener(ref, "nys-change", props.onNysChange);
+  useEventListener(ref, "nys-other-input", props.onNysOtherInput);
+  useEventListener(ref, "nys-focus", props.onNysFocus);
+  useEventListener(ref, "nys-blur", props.onNysBlur);
+  useEventListener(ref, "nys-error", props.onNysError);
+
+  return React.createElement(
+    "nys-radiobutton",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      label: props.label,
+      description: props.description,
+      id: props.id,
+      name: props.name,
+      value: props.value,
+      form: props.form,
+      size: props.size,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      checked: props.checked ? true : undefined,
+      disabled: props.disabled ? true : undefined,
+      required: props.required ? true : undefined,
+      inverted: props.inverted ? true : undefined,
+      tile: props.tile ? true : undefined,
+      other: props.other ? true : undefined,
+      showOtherError: props.showOtherError ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysRadiogroup.d.ts

@@ -0,0 +1,91 @@
+import React from "react";
+import { NysRadiogroup as NysRadiogroupElement } from "../../dist/nysds.es.js";
+
+export type { NysRadiogroupElement };
+
+export interface NysRadiogroupProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Requires a selection before form submission. */
+  required?: boolean;
+
+  /** Shows "Optional" flag. */
+  optional?: boolean;
+
+  /** Shows error message when true. */
+  showError?: boolean;
+
+  /** Renders all radiobuttons as tiles with larger clickable area. */
+  tile?: boolean;
+
+  /** Adjusts colors for dark backgrounds. Applied to all children. */
+  inverted?: boolean;
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysRadiogroupElement["id"];
+
+  /** Name for form submission. Auto-populated from child radiobuttons. */
+  name?: NysRadiogroupElement["name"];
+
+  /** Error message text. Shown only when `showError` is true. */
+  errorMessage?: NysRadiogroupElement["errorMessage"];
+
+  /** Visible label text for the group. */
+  label?: NysRadiogroupElement["label"];
+
+  /** Helper text below label. Use slot for custom HTML. */
+  description?: NysRadiogroupElement["description"];
+
+  /** Tooltip text shown on hover/focus of info icon. */
+  tooltip?: NysRadiogroupElement["tooltip"];
+
+  /** Form `id` to associate with. Applied to all children. */
+  form?: NysRadiogroupElement["form"];
+
+  /** Radio size for all children: `sm` (24px) or `md` (32px, default). */
+  size?: NysRadiogroupElement["size"];
+
+  /** 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;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ * Container for grouping radio buttons as a single form control.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for `nys-radiobutton` elements.
+ * - **description** - Custom HTML description content.
+ */
+export const NysRadiogroup: React.ForwardRefExoticComponent<NysRadiogroupProps>;

package/packages/react/NysRadiogroup.js

@@ -0,0 +1,48 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysRadiogroup = forwardRef((props, forwardedRef) => {
+  const {
+    required,
+    optional,
+    showError,
+    tile,
+    inverted,
+    id,
+    name,
+    errorMessage,
+    label,
+    description,
+    tooltip,
+    form,
+    size,
+    ...filteredProps
+  } = props;
+
+  return React.createElement(
+    "nys-radiogroup",
+    {
+      ...filteredProps,
+      id: props.id,
+      name: props.name,
+      errorMessage: props.errorMessage,
+      label: props.label,
+      description: props.description,
+      tooltip: props.tooltip,
+      form: props.form,
+      size: props.size,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      required: props.required ? true : undefined,
+      optional: props.optional ? true : undefined,
+      showError: props.showError ? true : undefined,
+      tile: props.tile ? true : undefined,
+      inverted: props.inverted ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysSelect.d.ts

@@ -0,0 +1,116 @@
+import React from "react";
+import {
+  NysSelect as NysSelectElement,
+  CustomEvent,
+  Event,
+} from "../../dist/nysds.es.js";
+
+export type { NysSelectElement, CustomEvent, Event };
+
+export interface NysSelectProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Prevents interaction. */
+  disabled?: boolean;
+
+  /** Marks as required. Shows "Required" flag and validates on blur. */
+  required?: boolean;
+
+  /** Shows "Optional" flag. Use when most fields are required. */
+  optional?: boolean;
+
+  /** Adjusts colors for dark backgrounds. */
+  inverted?: boolean;
+
+  /** Shows error message when true. Set by validation or manually. */
+  showError?: boolean;
+
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysSelectElement["id"];
+
+  /** Name for form submission. */
+  name?: NysSelectElement["name"];
+
+  /** Visible label text. Required for accessibility. */
+  label?: NysSelectElement["label"];
+
+  /** Helper text below label. Use slot for custom HTML. */
+  description?: NysSelectElement["description"];
+
+  /** Currently selected option value. */
+  value?: NysSelectElement["value"];
+
+  /** Tooltip text shown on hover/focus of info icon. */
+  tooltip?: NysSelectElement["tooltip"];
+
+  /** Form `id` to associate with when select is outside form element. */
+  form?: NysSelectElement["form"];
+
+  /** Error message text. Shown only when `showError` is true. */
+  errorMessage?: NysSelectElement["errorMessage"];
+
+  /** Select width: `sm` (88px), `md` (200px), `lg` (384px), `full` (100%, default). */
+  width?: NysSelectElement["width"];
+
+  /** 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;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** Fired when selection changes. Detail: `{id, value}`. */
+  onNysChange?: (event: CustomEvent) => void;
+
+  /** Fired when select gains focus. */
+  onNysFocus?: (event: CustomEvent) => void;
+
+  /** Fired when select loses focus. Triggers validation. */
+  onNysBlur?: (event: CustomEvent) => void;
+}
+
+/**
+ * Dropdown select for choosing one option from a list.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-change** - Fired when selection changes. Detail: `{id, value}`.
+ * - **nys-focus** - Fired when select gains focus.
+ * - **nys-blur** - Fired when select loses focus. Triggers validation.
+ *
+ * ### **Methods:**
+ *  - **checkValidity(): _boolean_** - Functions
+ * --------------------------------------------------------------------------
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for `<option>` and `<optgroup>` elements.
+ * - **description** - Custom HTML description content below the label.
+ */
+export const NysSelect: React.ForwardRefExoticComponent<NysSelectProps>;

package/packages/react/NysSelect.js

@@ -0,0 +1,65 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener } from "./react-utils.js";
+
+export const NysSelect = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    disabled,
+    required,
+    optional,
+    inverted,
+    showError,
+    id,
+    name,
+    label,
+    description,
+    value,
+    tooltip,
+    form,
+    errorMessage,
+    width,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-change", props.onNysChange);
+  useEventListener(ref, "nys-focus", props.onNysFocus);
+  useEventListener(ref, "nys-blur", props.onNysBlur);
+
+  return React.createElement(
+    "nys-select",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      id: props.id,
+      name: props.name,
+      label: props.label,
+      description: props.description,
+      value: props.value,
+      tooltip: props.tooltip,
+      form: props.form,
+      errorMessage: props.errorMessage,
+      width: props.width,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? true : undefined,
+      required: props.required ? true : undefined,
+      optional: props.optional ? true : undefined,
+      inverted: props.inverted ? true : undefined,
+      showError: props.showError ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysSkipnav.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+import { NysSkipnav as NysSkipnavElement } from "../../dist/nysds.es.js";
+
+export type { NysSkipnavElement };
+
+export interface NysSkipnavProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Unique identifier. Auto-generated if not provided. */
+  id?: NysSkipnavElement["id"];
+
+  /** Target element ID (with `#`). Defaults to `#main-content`. */
+  href?: NysSkipnavElement["href"];
+
+  /** 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;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ * Skip navigation link for keyboard accessibility. Hidden until focused.
+ * ---
+ *
+ */
+export const NysSkipnav: React.ForwardRefExoticComponent<NysSkipnavProps>;

package/packages/react/NysSkipnav.js

@@ -0,0 +1,22 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysSkipnav = forwardRef((props, forwardedRef) => {
+  const { id, href, ...filteredProps } = props;
+
+  return React.createElement(
+    "nys-skipnav",
+    {
+      ...filteredProps,
+      id: props.id,
+      href: props.href,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysStep.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+import { NysStep as NysStepElement } from "../../dist/nysds.es.js";
+
+export type { NysStepElement };
+
+export interface NysStepProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Whether this step is currently being viewed. Set by parent stepper. */
+  selected?: boolean;
+
+  /** Marks the furthest reached step. Steps before this are navigable. */
+  current?: boolean;
+
+  /** Internal: Whether parent stepper's compact view is expanded. */
+  isCompactExpanded?: boolean;
+
+  /** Step label text displayed alongside the step number. */
+  label?: NysStepElement["label"];
+
+  /** URL for page navigation when step is clicked. Optional for SPA routing. */
+  href?: NysStepElement["href"];
+
+  /** Step number (1-indexed). Auto-assigned by parent stepper. */
+  stepNumber?: NysStepElement["stepNumber"];
+
+  /** 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;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** Custom click handler. Called before `nys-step-click` event. */
+  onClick?: NysStepElement["onClick"];
+
+  /** Fired when a navigable step is clicked. Detail: `{href, label}`. Cancelable. */
+  onNysStepClick?: (event: CustomEvent) => void;
+}
+
+/**
+ * Individual step for use within nys-stepper with navigation support.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **nys-step-click** - Fired when a navigable step is clicked. Detail: `{href, label}`. Cancelable.
+ */
+export const NysStep: React.ForwardRefExoticComponent<NysStepProps>;

package/packages/react/NysStep.js

@@ -0,0 +1,51 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "../../dist/nysds.es.js";
+import { useEventListener, useProperties } from "./react-utils.js";
+
+export const NysStep = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    selected,
+    current,
+    isCompactExpanded,
+    label,
+    href,
+    stepNumber,
+    onClick,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "nys-step-click", props.onNysStepClick);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "onClick", props.onClick);
+
+  return React.createElement(
+    "nys-step",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      label: props.label,
+      href: props.href,
+      stepNumber: props.stepNumber,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      selected: props.selected ? true : undefined,
+      current: props.current ? true : undefined,
+      isCompactExpanded: props.isCompactExpanded ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/NysStepper.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+import { NysStepper as NysStepperElement } from "../../dist/nysds.es.js";
+
+export type { NysStepperElement };
+
+export interface NysStepperProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Whether compact mobile view is expanded to show all steps. */
+  isCompactExpanded?: boolean;
+
+  /** Unique identifier. */
+  id?: NysStepperElement["id"];
+
+  /** Name attribute for form association. */
+  name?: NysStepperElement["name"];
+
+  /** Title displayed above the step counter. */
+  label?: NysStepperElement["label"];
+
+  /** Progress text (e.g., "Step 2 of 5"). Auto-updated based on selection. */
+  counterText?: NysStepperElement["counterText"];
+
+  /** 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;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ * Multi-step progress indicator with navigation and mobile-friendly compact view.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for `nys-step` elements.
+ * - **actions** - Navigation buttons (e.g., Back, Continue). Must be wrapped in a `<div>`.
+ */
+export const NysStepper: React.ForwardRefExoticComponent<NysStepperProps>;

package/packages/react/NysStepper.js

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysStepper = forwardRef((props, forwardedRef) => {
+  const { isCompactExpanded, id, name, label, counterText, ...filteredProps } =
+    props;
+
+  return React.createElement(
+    "nys-stepper",
+    {
+      ...filteredProps,
+      id: props.id,
+      name: props.name,
+      label: props.label,
+      counterText: props.counterText,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      isCompactExpanded: props.isCompactExpanded ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});