@govtechsg/sgds-web-component 3.19.0 → 3.20.0-rc.1

package/types/react.d.ts

@@ -82,6 +82,7 @@ interface IStepMetaData {
     component: unknown;
     stepHeader: string;
     iconName?: string;
+    isCompleted?: boolean;
 }
 
 // ── Switch ─────────────────────────────────────────────────────────────
@@ -353,6 +354,8 @@ export interface SgdsComboBoxProps extends SgdsBaseProps {
   badgeFullWidth?: boolean;
   /** If true, a clear button will be enabled on focus */
   clearable?: boolean;
+  /** Disables native and sgds validation for the combo box. */
+  noValidate?: boolean;
   /** Enables the asynchronous behaviour of a combo box. When true, filterFunction is ignored and filtering is done remotely. */
   async?: boolean;
   /** When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only. */
@@ -408,6 +411,8 @@ value: string;
   "onsgds-input"?: (event: CustomEvent<ISgdsComboBoxInputEventDetail>) => void;
   "onsgds-focus"?: SgdsEventHandler;
   "onsgds-blur"?: SgdsEventHandler;
+  "onsgds-invalid"?: SgdsEventHandler;
+  "onsgds-valid"?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
@@ -1214,11 +1219,29 @@ export interface SgdsSpinnerProps extends SgdsBaseProps {
   orientation?: "horizontal" | "vertical";
 }
 
+// ── Step ─────────────────────────────────────────────────────────────
+
+export interface SgdsStepProps extends SgdsBaseProps {
+  /** The header text for the step */
+  stepHeader?: string;
+  /** Optional icon name to display instead of step number */
+  iconName?: string | undefined;
+  /** Optional component to render for this step */
+  component?: unknown;
+  /** Whether this step is clickable */
+  clickable?: boolean;
+  /** Whether this step is currently active */
+  active?: boolean;
+  /** Whether this step is currently disabled */
+  disabled?: boolean;
+  /** Whether this step is completed */
+  completed?: boolean;
+}
+
 // ── Stepper ─────────────────────────────────────────────────────────────
 
 export interface SgdsStepperProps extends SgdsBaseProps {
-  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.
-It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional. */
+  /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead. */
   steps?: IStepMetaData[];
   /** The current state of active step. Defaults to 0 */
   activeStep?: number;
@@ -1226,6 +1249,8 @@ It is required to populate this array to properly render the stepper. By default
   orientation?: "horizontal" | "vertical";
   /** When true, the stepper's steps will be clickable */
   clickable?: boolean;
+  /** When true, the stepper's steps can only be clicked in a linear manner */
+  linear?: boolean;
   "onsgds-next-step"?: SgdsEventHandler;
   "onsgds-previous-step"?: SgdsEventHandler;
   "onsgds-last-step"?: SgdsEventHandler;
@@ -1440,6 +1465,8 @@ export interface SgdsTextareaProps extends SgdsBaseProps {
   "onsgds-input"?: SgdsEventHandler;
   "onsgds-focus"?: SgdsEventHandler;
   "onsgds-blur"?: SgdsEventHandler;
+  "onsgds-invalid"?: SgdsEventHandler;
+  "onsgds-valid"?: SgdsEventHandler;
 }
 
 // ── ThumbnailCard ─────────────────────────────────────────────────────────────
@@ -1565,6 +1592,7 @@ declare module "react" {
       "sgds-sidenav": SgdsSidenavProps;
       "sgds-skeleton": SgdsSkeletonProps;
       "sgds-spinner": SgdsSpinnerProps;
+      "sgds-step": SgdsStepProps;
       "sgds-stepper": SgdsStepperProps;
       "sgds-subnav-item": SgdsSubnavItemProps;
       "sgds-subnav": SgdsSubnavProps;
@@ -1647,6 +1675,7 @@ declare global {
     "sgds-sidenav": HTMLElement;
     "sgds-skeleton": HTMLElement;
     "sgds-spinner": HTMLElement;
+    "sgds-step": HTMLElement;
     "sgds-stepper": HTMLElement;
     "sgds-subnav-item": HTMLElement;
     "sgds-subnav": HTMLElement;