@warp-ds/elements 2.10.0-next.10 → 2.10.0-next.11

package/dist/index.d.ts

@@ -70,6 +70,15 @@ export type ScopedElements<
   [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
 };
 
+/**
+ * A generic type for strongly typing custom events with their targets
+ * @template T - The type of the event target (extends EventTarget)
+ * @template D - The type of the detail payload for the custom event
+ */
+type TypedEvent<T extends EventTarget, E = Event> = E & {
+  target: T;
+};
+
 type BaseProps<T extends HTMLElement> = {
   /** Content added between the opening and closing tags of the element */
   children?: any;
@@ -93,6 +102,8 @@ type BaseProps<T extends HTMLElement> = {
   key?: string | number;
   /** Specifies the language of the element. */
   lang?: string;
+  /** Defines the element's semantic role for accessibility APIs. */
+  role?: 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;
   /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
@@ -115,7 +126,113 @@ type BaseProps<T extends HTMLElement> = {
   popovertargetaction?: "show" | "hide" | "toggle";
 };
 
-type BaseEvents = {};
+type BaseEvents = {
+  // Mouse Events
+
+  /** Triggered when the element is clicked by the user by mouse or keyboard. */
+  onClick?: (event: MouseEvent) => void;
+  /** Fired when the context menu is triggered, often by right-clicking. */
+  onContextMenu?: (event: MouseEvent) => void;
+  /** Fired when the element is double-clicked. */
+  onDoubleClick?: (event: MouseEvent) => void;
+  /** Fired repeatedly as the draggable element is being dragged. */
+  onDrag?: (event: DragEvent) => void;
+  /** Fired when the dragging of a draggable element is finished. */
+  onDragEnd?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection enters a valid drop target. */
+  onDragEnter?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragExit?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragLeave?: (event: DragEvent) => void;
+  /** Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds). */
+  onDragOver?: (event: DragEvent) => void;
+  /** Fired when a draggable element starts being dragged. */
+  onDragStart?: (event: DragEvent) => void;
+  /** Fired when a dragged element is dropped onto a drop target. */
+  onDrop?: (event: DragEvent) => void;
+  /** Fired when a mouse button is pressed down on the element. */
+  onMouseDown?: (event: MouseEvent) => void;
+  /** Fired when the mouse cursor enters the element. */
+  onMouseEnter?: (event: MouseEvent) => void;
+  /** Triggered when the mouse cursor leaves the element. */
+  onMouseLeave?: (event: MouseEvent) => void;
+  /** Fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it. */
+  onMouseMove?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. */
+  onMouseOut?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements. */
+  onMouseOver?: (event: MouseEvent) => void;
+  /** Fired when a mouse button is released on the element. */
+  onMouseUp?: (event: MouseEvent) => void;
+
+  // Keyboard Events
+
+  /** Fired when a key is pressed down. */
+  onKeyDown?: (event: KeyboardEvent) => void;
+  /** Fired when a key is released.. */
+  onKeyUp?: (event: KeyboardEvent) => void;
+  /** Fired when a key is pressed down. */
+  onKeyPressed?: (event: KeyboardEvent) => void;
+
+  // Focus Events
+
+  /** Fired when the element receives focus, often triggered by tab navigation. */
+  onFocus?: (event: FocusEvent) => void;
+  /** Fired when the element loses focus. */
+  onBlur?: (event: FocusEvent) => void;
+
+  // Form Events
+
+  /** Fired when the value of an input element changes, such as with text inputs or select elements. */
+  onChange?: (event: Event) => void;
+  /** Fires when the value of an <input>, <select>, or <textarea> element has been changed. */
+  onInput?: (event: Event) => void;
+  /** Fired when a form is submitted, usually on pressing Enter in a text input. */
+  onSubmit?: (event: Event) => void;
+  /** Fired when a form is reset. */
+  onReset?: (event: Event) => void;
+
+  // UI Events
+
+  /** Fired when the content of an element is scrolled. */
+  onScroll?: (event: UIEvent) => void;
+
+  // Wheel Events
+
+  /** Fired when the mouse wheel is scrolled while the element is focused. */
+  onWheel?: (event: WheelEvent) => void;
+
+  // Animation Events
+
+  /** Fired when a CSS animation starts. */
+  onAnimationStart?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes. */
+  onAnimationEnd?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes one iteration. */
+  onAnimationIteration?: (event: AnimationEvent) => void;
+
+  // Transition Events
+
+  /** Fired when a CSS transition has completed. */
+  onTransitionEnd?: (event: TransitionEvent) => void;
+
+  // Media Events
+
+  /** Fired when an element (usually an image) finishes loading */
+  onLoad?: (event: Event) => void;
+  /** Fired when an error occurs during the loading of an element, like an image not being found. */
+  onError?: (event: Event) => void;
+
+  // Clipboard Events
+
+  /** Fires when the user initiates a copy action through the browser's user interface. */
+  onCopy?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "cut" action through the browser's user interface. */
+  onCut?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "paste" action through the browser's user interface. */
+  onPaste?: (event: ClipboardEvent) => void;
+};
 
 export type WarpIconProps = {
   /** Icon filename (without .svg) */
@@ -776,6 +893,9 @@ When set, the card becomes keyboard focusable and Enter or Space triggers a clic
   textContent?: string | number;
 };
 
+/** `WarpCheckbox` component event */
+export type WarpCheckboxElementEvent<E = Event> = TypedEvent<WarpCheckbox, E>;
+
 export type WarpCheckboxProps = {
   /** The name of the checkbox.
 
@@ -809,7 +929,7 @@ Use this to show an externally managed validation error. Required validation als
   input?: WarpCheckbox["input"];
 
   /**  */
-  onchange?: (e: Event) => void;
+  onchange?: (e: WarpCheckboxElementEvent) => void;
 };
 
 export type WarpCheckboxSolidJsProps = {
@@ -844,7 +964,7 @@ Use this to show an externally managed validation error. Required validation als
   /**  */
   "prop:input"?: WarpCheckbox["input"];
   /**  */
-  "on:change"?: (e: Event) => void;
+  "on:change"?: (e: WarpCheckboxElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1304,6 +1424,9 @@ export type WarpExpandableSolidJsProps = {
   textContent?: string | number;
 };
 
+/** `WarpModal` component event */
+export type WarpModalElementEvent<E = Event> = TypedEvent<WarpModal, E>;
+
 export type WarpModalProps = {
   /** Controls if the modal should show or hide.
 
@@ -1319,9 +1442,9 @@ You can also call the `open()` and `close()` methods. */
   ignoreBackdropClicks?: WarpModal["ignoreBackdropClicks"];
 
   /**  */
-  onshown?: (e: CustomEvent) => void;
+  onshown?: (e: WarpModalElementEvent) => void;
   /**  */
-  onhidden?: (e: CustomEvent) => void;
+  onhidden?: (e: WarpModalElementEvent) => void;
 };
 
 export type WarpModalSolidJsProps = {
@@ -1338,9 +1461,9 @@ You can also call the `open()` and `close()` methods. */
   /** Ignores clicks to the backdrop when set */
   "prop:ignoreBackdropClicks"?: WarpModal["ignoreBackdropClicks"];
   /**  */
-  "on:shown"?: (e: CustomEvent) => void;
+  "on:shown"?: (e: WarpModalElementEvent) => void;
   /**  */
-  "on:hidden"?: (e: CustomEvent) => void;
+  "on:hidden"?: (e: WarpModalElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1357,6 +1480,12 @@ export type WarpModalFooterSolidJsProps = {
   textContent?: string | number;
 };
 
+/** `WarpModalHeader` component event */
+export type WarpModalHeaderElementEvent<E = Event> = TypedEvent<
+  WarpModalHeader,
+  E
+>;
+
 export type WarpModalHeaderProps = {
   /** A short but descriptive title for the modal */
   title?: WarpModalHeader["title"];
@@ -1368,7 +1497,7 @@ export type WarpModalHeaderProps = {
   noClose?: WarpModalHeader["noClose"];
 
   /**  */
-  onbackClicked?: (e: CustomEvent) => void;
+  onbackClicked?: (e: WarpModalHeaderElementEvent) => void;
 };
 
 export type WarpModalHeaderSolidJsProps = {
@@ -1381,7 +1510,7 @@ export type WarpModalHeaderSolidJsProps = {
   /** Lets you hide the close button in the header */
   "prop:noClose"?: WarpModalHeader["noClose"];
   /**  */
-  "on:backClicked"?: (e: CustomEvent) => void;
+  "on:backClicked"?: (e: WarpModalHeaderElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1416,6 +1545,12 @@ export type WarpPageIndicatorSolidJsProps = {
   textContent?: string | number;
 };
 
+/** `WarpPagination` component event */
+export type WarpPaginationElementEvent<E = Event> = TypedEvent<
+  WarpPagination,
+  E
+>;
+
 export type WarpPaginationProps = {
   /** The base URL used to construct page links, for example `/search?page=`.
 
@@ -1437,7 +1572,7 @@ The page number is appended to this URL. */
   visiblePages?: WarpPagination["visiblePages"];
 
   /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
-  "onpage-click"?: (e: CustomEvent) => void;
+  "onpage-click"?: (e: WarpPaginationElementEvent) => void;
 };
 
 export type WarpPaginationSolidJsProps = {
@@ -1460,7 +1595,7 @@ The page number is appended to this URL. */
   /** The maximum number of page numbers visible. */
   "prop:visiblePages"?: WarpPagination["visiblePages"];
   /** Triggered when a link in the pagination is clicked. Contains the page number in `string` form. */
-  "on:page-click"?: (e: CustomEvent) => void;
+  "on:page-click"?: (e: WarpPaginationElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1468,6 +1603,9 @@ The page number is appended to this URL. */
   textContent?: string | number;
 };
 
+/** `WarpPill` component event */
+export type WarpPillElementEvent<E = Event> = TypedEvent<WarpPill, E>;
+
 export type WarpPillProps = {
   /** Whether the pill should be removable via a close button. */
   "can-close"?: WarpPill["canClose"];
@@ -1493,9 +1631,9 @@ export type WarpPillProps = {
   closeAriaLabel?: WarpPill["closeAriaLabel"];
 
   /** Fires when the pill itself is clicked. */
-  "onw-pill-click"?: (e: CustomEvent) => void;
+  "onw-pill-click"?: (e: WarpPillElementEvent) => void;
   /** Fires when the pill's close button is clicked. */
-  "onw-pill-close"?: (e: CustomEvent) => void;
+  "onw-pill-close"?: (e: WarpPillElementEvent) => void;
 };
 
 export type WarpPillSolidJsProps = {
@@ -1522,9 +1660,9 @@ export type WarpPillSolidJsProps = {
   /** Label read by screen readers when targeting the close button. */
   "prop:closeAriaLabel"?: WarpPill["closeAriaLabel"];
   /** Fires when the pill itself is clicked. */
-  "on:w-pill-click"?: (e: CustomEvent) => void;
+  "on:w-pill-click"?: (e: WarpPillElementEvent) => void;
   /** Fires when the pill's close button is clicked. */
-  "on:w-pill-close"?: (e: CustomEvent) => void;
+  "on:w-pill-close"?: (e: WarpPillElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1618,6 +1756,9 @@ If you set `required` and `invalid` the group gets a default error message, but
   textContent?: string | number;
 };
 
+/** `WarpSelect` component event */
+export type WarpSelectElementEvent<E = Event> = TypedEvent<WarpSelect, E>;
+
 export type WarpSelectProps = {
   /** @deprecated Use the native `autofocus` attribute instead. - Whether the element should receive focus on render. */
   "auto-focus"?: WarpSelect["autoFocus"];
@@ -1659,7 +1800,7 @@ Paired with `help-text` to provide feedback about the error. */
   value?: WarpSelect["value"];
 
   /**  */
-  onchange?: (e: CustomEvent) => void;
+  onchange?: (e: WarpSelectElementEvent) => void;
 };
 
 export type WarpSelectSolidJsProps = {
@@ -1702,7 +1843,7 @@ Paired with `help-text` to provide feedback about the error. */
   /** Lets you set the current value. */
   "prop:value"?: WarpSelect["value"];
   /**  */
-  "on:change"?: (e: CustomEvent) => void;
+  "on:change"?: (e: WarpSelectElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1710,6 +1851,12 @@ Paired with `help-text` to provide feedback about the error. */
   textContent?: string | number;
 };
 
+/** `WarpSliderThumb` component event */
+export type WarpSliderThumbElementEvent<E = Event> = TypedEvent<
+  WarpSliderThumb,
+  E
+>;
+
 export type WarpSliderThumbProps = {
   /** Label for the range input. */
   "aria-label"?: WarpSliderThumb["ariaLabel"];
@@ -1727,9 +1874,9 @@ export type WarpSliderThumbProps = {
   placeholder?: WarpSliderThumb["placeholder"];
 
   /** Internal event used by (and stopped by) `w-slider`. */
-  onthumbreset?: (e: CustomEvent) => void;
+  onthumbreset?: (e: WarpSliderThumbElementEvent) => void;
   /** Internal event used by (and stopped by) `w-slider`. */
-  onslidervalidity?: (e: CustomEvent) => void;
+  onslidervalidity?: (e: WarpSliderThumbElementEvent) => void;
 };
 
 export type WarpSliderThumbSolidJsProps = {
@@ -1748,9 +1895,9 @@ export type WarpSliderThumbSolidJsProps = {
   /** Placeholder in empty text fields */
   "prop:placeholder"?: WarpSliderThumb["placeholder"];
   /** Internal event used by (and stopped by) `w-slider`. */
-  "on:thumbreset"?: (e: CustomEvent) => void;
+  "on:thumbreset"?: (e: WarpSliderThumbElementEvent) => void;
   /** Internal event used by (and stopped by) `w-slider`. */
-  "on:slidervalidity"?: (e: CustomEvent) => void;
+  "on:slidervalidity"?: (e: WarpSliderThumbElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1899,6 +2046,12 @@ export type WarpStepIndicatorSolidJsProps = {
   textContent?: string | number;
 };
 
+/** `WarpSwitch` component event */
+export type WarpSwitchElementEvent<E = Event> = TypedEvent<WarpSwitch, E>;
+/** `change` event type */
+export type WarpSwitchChangeElementEvent =
+  WarpSwitchElementEvent<WarpSwitchChangeEvent>;
+
 export type WarpSwitchProps = {
   /** Name used when submitting an HTML form. */
   name?: WarpSwitch["name"];
@@ -1912,7 +2065,7 @@ The component reports `null` as the value in the `change` event when `value` is
   disabled?: WarpSwitch["disabled"];
 
   /** Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`. */
-  onchange?: (e: WarpSwitchChangeEvent) => void;
+  onchange?: (e: WarpSwitchChangeElementEvent) => void;
 };
 
 export type WarpSwitchSolidJsProps = {
@@ -1927,7 +2080,7 @@ The component reports `null` as the value in the `change` event when `value` is
   /** Whether the switch is disabled. */
   "prop:disabled"?: WarpSwitch["disabled"];
   /** Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`. */
-  "on:change"?: (e: WarpSwitchChangeEvent) => void;
+  "on:change"?: (e: WarpSwitchChangeElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1969,19 +2122,25 @@ export type WarpTabPanelSolidJsProps = {
   textContent?: string | number;
 };
 
+/** `WarpTabs` component event */
+export type WarpTabsElementEvent<E = Event> = TypedEvent<WarpTabs, E>;
+/** `change` event type */
+export type WarpTabsChangeElementEvent =
+  WarpTabsElementEvent<WarpTabsChangeEvent>;
+
 export type WarpTabsProps = {
   /** The `id` of the panel that should be active. */
   active?: WarpTabs["active"];
 
   /** Includes `details.panelId` with the now active tab's ID */
-  onchange?: (e: WarpTabsChangeEvent) => void;
+  onchange?: (e: WarpTabsChangeElementEvent) => void;
 };
 
 export type WarpTabsSolidJsProps = {
   /** The `id` of the panel that should be active. */
   "prop:active"?: WarpTabs["active"];
   /** Includes `details.panelId` with the now active tab's ID */
-  "on:change"?: (e: WarpTabsChangeEvent) => void;
+  "on:change"?: (e: WarpTabsChangeElementEvent) => void;
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -3116,6 +3275,106 @@ export type CustomElements = {
   >;
 };
 
+type ReactElementProps<T extends HTMLElement> = import("react").DOMAttributes<T> &
+  import("react").AriaAttributes &
+  import("react").RefAttributes<T> &
+  Pick<
+    import("react").HTMLAttributes<T>,
+    | "className"
+    | "style"
+    | "suppressContentEditableWarning"
+    | "suppressHydrationWarning"
+  >;
+
+// Merge order matters: component props must win over React/global/base props
+// when names collide, e.g. w-attention's boolean popover prop.
+type ReactCustomElementProps<T extends HTMLElement, Props> = Omit<
+  BaseProps<T> & BaseEvents,
+  keyof ReactElementProps<T> | keyof Props
+> &
+  Omit<ReactElementProps<T>, keyof Props> &
+  Props;
+
+type CustomElementInstances = {
+  "w-icon": WarpIcon;
+  "w-textfield": WarpTextField;
+  "w-affix": WarpAffix;
+  "w-alert": WarpAlert;
+  "w-link": WarpLink;
+  "w-button": WarpButton;
+  "w-attention": WarpAttention;
+  "w-badge": WarpBadge;
+  "w-box": WarpBox;
+  "w-breadcrumbs": WarpBreadcrumbs;
+  "w-card": WarpCard;
+  "w-checkbox": WarpCheckbox;
+  "w-checkbox-group": WarpCheckboxGroup;
+  "w-combobox": WarpCombobox;
+  "w-datepicker": WarpDatepicker;
+  "w-expandable": WarpExpandable;
+  "w-modal": WarpModal;
+  "w-modal-footer": WarpModalFooter;
+  "w-modal-header": WarpModalHeader;
+  "w-page-indicator": WarpPageIndicator;
+  "w-pagination": WarpPagination;
+  "w-pill": WarpPill;
+  "w-radio": WarpRadio;
+  "w-radio-group": WarpRadioGroup;
+  "w-select": WarpSelect;
+  "w-slider-thumb": WarpSliderThumb;
+  "w-slider": WarpSlider;
+  "w-step": WarpStep;
+  "w-step-indicator": WarpStepIndicator;
+  "w-switch": WarpSwitch;
+  "w-tab": WarpTab;
+  "w-tab-panel": WarpTabPanel;
+  "w-tabs": WarpTabs;
+  "w-textarea": WarpTextarea;
+};
+
+type CustomElementComponentProps = {
+  "w-icon": WarpIconProps;
+  "w-textfield": WarpTextFieldProps;
+  "w-affix": WarpAffixProps;
+  "w-alert": WarpAlertProps;
+  "w-link": WarpLinkProps;
+  "w-button": WarpButtonProps;
+  "w-attention": WarpAttentionProps;
+  "w-badge": WarpBadgeProps;
+  "w-box": WarpBoxProps;
+  "w-breadcrumbs": WarpBreadcrumbsProps;
+  "w-card": WarpCardProps;
+  "w-checkbox": WarpCheckboxProps;
+  "w-checkbox-group": WarpCheckboxGroupProps;
+  "w-combobox": WarpComboboxProps;
+  "w-datepicker": WarpDatepickerProps;
+  "w-expandable": WarpExpandableProps;
+  "w-modal": WarpModalProps;
+  "w-modal-footer": WarpModalFooterProps;
+  "w-modal-header": WarpModalHeaderProps;
+  "w-page-indicator": WarpPageIndicatorProps;
+  "w-pagination": WarpPaginationProps;
+  "w-pill": WarpPillProps;
+  "w-radio": WarpRadioProps;
+  "w-radio-group": WarpRadioGroupProps;
+  "w-select": WarpSelectProps;
+  "w-slider-thumb": WarpSliderThumbProps;
+  "w-slider": WarpSliderProps;
+  "w-step": WarpStepProps;
+  "w-step-indicator": WarpStepIndicatorProps;
+  "w-switch": WarpSwitchProps;
+  "w-tab": WarpTabProps;
+  "w-tab-panel": WarpTabPanelProps;
+  "w-tabs": WarpTabsProps;
+  "w-textarea": WarpTextareaProps;
+};
+
+export type ReactCustomElements = {
+  [Tag in keyof CustomElementComponentProps]: Tag extends keyof CustomElementInstances
+    ? Partial<ReactCustomElementProps<CustomElementInstances[Tag], CustomElementComponentProps[Tag]>>
+    : never;
+};
+
 export type CustomElementsSolidJs = {
   /**
    *
@@ -4245,7 +4504,7 @@ export type CustomCssProperties = {};
 
 declare module "react" {
   namespace JSX {
-    interface IntrinsicElements extends CustomElements {}
+    interface IntrinsicElements extends ReactCustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }