@juspay/svelte-ui-components 3.4.1 → 3.5.1

package/dist/ChatComposer/ChatComposer.svelte

@@ -26,18 +26,12 @@
     richVideoTooltip,
     richRemoveIcon,
     richFileIcon,
-    onremoverichimage: onremoverichimageLegacy,
-    onRemoveRichImage,
-    onremoverichfile: onremoverichfileLegacy,
-    onRemoveRichFile,
-    onremoverichvideo: onremoverichvideoLegacy,
-    onRemoveRichVideo,
-    onopenrichimage: onopenrichimageLegacy,
-    onOpenRichImage,
-    onopenrichvideo: onopenrichvideoLegacy,
-    onOpenRichVideo,
-    onopenrichfile: onopenrichfileLegacy,
-    onOpenRichFile,
+    onremoverichimage,
+    onremoverichfile,
+    onremoverichvideo,
+    onopenrichimage,
+    onopenrichvideo,
+    onopenrichfile,
     sendable = null,
     accept = '',
     multiple = false,
@@ -52,21 +46,15 @@
     actionIcon,
     actionLabel = 'Voice conversation',
     leading,
-    onsubmit: onsubmitLegacy,
-    onSubmit,
+    onsubmit,
     oninput,
     onkeydown,
     onpaste,
-    onstop: onstopLegacy,
-    onStop,
-    onvoice: onvoiceLegacy,
-    onVoice,
-    onattach: onattachLegacy,
-    onAttach,
-    onattachclick: onattachclickLegacy,
-    onAttachClick,
-    onaction: onactionLegacy,
-    onAction,
+    onstop,
+    onvoice,
+    onattach,
+    onattachclick,
+    onaction,
     testId,
     inputTestId,
     inputAriaLabel,
@@ -79,20 +67,6 @@
     classes
   }: ChatComposerProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onaction = $derived(onAction ?? onactionLegacy);
-  const onattach = $derived(onAttach ?? onattachLegacy);
-  const onattachclick = $derived(onAttachClick ?? onattachclickLegacy);
-  const onopenrichfile = $derived(onOpenRichFile ?? onopenrichfileLegacy);
-  const onopenrichimage = $derived(onOpenRichImage ?? onopenrichimageLegacy);
-  const onopenrichvideo = $derived(onOpenRichVideo ?? onopenrichvideoLegacy);
-  const onremoverichfile = $derived(onRemoveRichFile ?? onremoverichfileLegacy);
-  const onremoverichimage = $derived(onRemoveRichImage ?? onremoverichimageLegacy);
-  const onremoverichvideo = $derived(onRemoveRichVideo ?? onremoverichvideoLegacy);
-  const onstop = $derived(onStop ?? onstopLegacy);
-  const onsubmit = $derived(onSubmit ?? onsubmitLegacy);
-  const onvoice = $derived(onVoice ?? onvoiceLegacy);
-
   let fileInput: HTMLInputElement | null = $state(null);
 
   let showVoice = $derived(typeof onvoice === 'function');
@@ -170,12 +144,12 @@
         images={richImages}
         videos={richVideos}
         files={richFiles}
-        onRemoveImage={onremoverichimage}
-        onRemoveVideo={onremoverichvideo}
-        onRemoveFile={onremoverichfile}
-        onOpenImage={onopenrichimage}
-        onOpenVideo={onopenrichvideo}
-        onOpenFile={onopenrichfile}
+        onremoveimage={onremoverichimage}
+        onremovevideo={onremoverichvideo}
+        onremovefile={onremoverichfile}
+        onopenimage={onopenrichimage}
+        onopenvideo={onopenrichvideo}
+        onopenfile={onopenrichfile}
         imageTooltip={richImageTooltip}
         videoTooltip={richVideoTooltip}
         removeIcon={richRemoveIcon}

package/dist/ChatComposer/properties.d.ts

@@ -73,49 +73,37 @@ export type OptionalChatComposerProperties = {
 };
 export type ChatComposerEventProperties = {
     onsubmit?: (value: string, attachments: File[]) => void;
-    onSubmit?: (value: string, attachments: File[]) => void;
     oninput?: (value: string, event: Event) => void;
     onkeydown?: (event: KeyboardEvent) => void;
     onpaste?: (event: ClipboardEvent) => void;
     onstop?: () => void;
-    onStop?: () => void;
     onvoice?: () => void;
-    onVoice?: () => void;
     onattach?: (files: File[]) => void;
-    onAttach?: (files: File[]) => void;
     /**
      * Intercepts the attach button: when provided, clicking it calls this instead of
      * opening the built-in file picker — for apps with their own chooser (camera /
      * gallery / files).
      */
     onattachclick?: () => void;
-    onAttachClick?: () => void;
     /**
      * Removal callbacks for the rich strip's chips. Omit them to render the rich
      * chips read-only (no remove buttons), mirroring AttachmentChipRow.
      */
     onremoverichimage?: (id: string) => void;
-    onRemoveRichImage?: (id: string) => void;
     onremoverichfile?: (id: string) => void;
-    onRemoveRichFile?: (id: string) => void;
     onremoverichvideo?: (id: string) => void;
-    onRemoveRichVideo?: (id: string) => void;
     /**
      * Open/preview callbacks for the rich strip's chips — when provided, a chip's
      * tile becomes a real button and clicking it fires with the attachment (e.g.
      * open a lightbox, play the video).
      */
     onopenrichimage?: (image: AttachmentChipImage) => void;
-    onOpenRichImage?: (image: AttachmentChipImage) => void;
     onopenrichvideo?: (video: AttachmentChipVideo) => void;
-    onOpenRichVideo?: (video: AttachmentChipVideo) => void;
     onopenrichfile?: (file: AttachmentChipFile) => void;
-    onOpenRichFile?: (file: AttachmentChipFile) => void;
     /**
      * The composer's idle action (e.g. voice conversation mode). While the value is
      * empty, nothing is sendable and no reply is streaming, the send button gives way
      * to an action button that fires this.
      */
     onaction?: () => void;
-    onAction?: () => void;
 };

package/dist/ChatHeader/ChatHeader.svelte

@@ -14,16 +14,12 @@
     closeIcon,
     closeLabel = 'Close',
     showClose,
-    onclose: oncloseLegacy,
-    onClose,
+    onclose,
     children,
     testId,
     classes
   }: ChatHeaderProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclose = $derived(onClose ?? oncloseLegacy);
-
   let displayClose = $derived(showClose ?? typeof onclose === 'function');
 </script>
 

package/dist/ChatHeader/properties.d.ts

@@ -16,5 +16,4 @@ export type OptionalChatHeaderProperties = {
 };
 export type ChatHeaderEventProperties = {
     onclose?: () => void;
-    onClose?: () => void;
 };

package/dist/ChatMessage/ChatMessage.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Button from '../Button/Button.svelte';
   import LoadingDots from '../LoadingDots/LoadingDots.svelte';
+  import TypewriterText from '../TypewriterText/TypewriterText.svelte';
   import copySvg from '../assets/copy.svg?raw';
   import checkmarkSvg from '../assets/checkmark.svg?raw';
   import retrySvg from '../assets/retry.svg?raw';
@@ -17,6 +18,10 @@
     markdown,
     body,
     streaming = false,
+    typewriter = false,
+    typewriterSpeed,
+    clampLines = 0,
+    marker = false,
     status,
     avatar,
     header,
@@ -25,22 +30,48 @@
     actions,
     copyLabel = 'Copy',
     retryLabel = 'Retry',
+    expandLabel = 'Expand message',
+    collapseLabel = 'Collapse message',
     feedbackUpLabel = 'Good response',
     feedbackDownLabel = 'Bad response',
-    onretry: onretryLegacy,
-    onRetry,
-    onfeedback: onfeedbackLegacy,
-    onFeedback,
-    oncopy: oncopyLegacy,
-    onCopy,
+    onretry,
+    onfeedback,
+    oncopy,
     testId,
     classes
   }: ChatMessageProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const oncopy = $derived(onCopy ?? oncopyLegacy);
-  const onfeedback = $derived(onFeedback ?? onfeedbackLegacy);
-  const onretry = $derived(onRetry ?? onretryLegacy);
+  // A long message can be collapsed to a few lines and opened by click or keyboard.
+  // Consumers had been rebuilding this around the `body` snippet; it belongs here so
+  // the chrome, the clamp and the expanded state stay one component's concern.
+  let expanded = $state(false);
+  let clampable = $derived(typeof clampLines === 'number' && clampLines > 0);
+  let clampActive = $derived(clampable && !expanded);
+  // Turning clamping off must not leave the message stuck open: without this, a parent
+  // that sets clampLines to 0 and later restores it would get an already-expanded bubble
+  // instead of the clamped default. A prop going away cannot be observed from a $derived
+  // without writing to state, so this is the sanctioned escape hatch rather than a
+  // reactive convenience.
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    if (!clampable) {
+      expanded = false;
+    }
+  });
+  // Ties the toggle to the region it expands. Per-instance, so two clamped messages
+  // on one page never collide.
+  const uid = $props.id();
+  const bodyId = `chat-message-body-${uid}`;
+  // Spread rather than a ternary: Button's testId is `string | undefined` and the
+  // repo forbids the `undefined` literal, so the prop is omitted instead of blanked.
+  let clampToggleTestId = $derived(
+    typeof testId === 'string' ? { testId: `${testId}-clamp-toggle` } : {}
+  );
+  const toggleExpanded = () => {
+    if (clampable) {
+      expanded = !expanded;
+    }
+  };
 
   let party = $derived(partyOf(role));
 
@@ -75,8 +106,40 @@
     hasMarkdown && renderMarkdownFn !== null ? renderMarkdownFn(markdown ?? '') : html
   );
   let hasHtml = $derived(typeof effectiveHtml === 'string' && effectiveHtml.length > 0);
+
   let hasBody = $derived(typeof body === 'function');
-  let hasContent = $derived(hasBody || hasHtml || content.length > 0);
+
+  /* The typewriter reveals SOURCE text, not rendered HTML: typing a pre-rendered
+     `html` string character by character would put its tags on screen. So it drives
+     off `markdown` or `content` and leaves an `html`-only message to the normal
+     path. `markdown` is typed through the same pipeline the static branch uses, so
+     rich text reveals as rich text rather than as raw syntax that reformats at the
+     end. */
+  let typewriterSource = $derived(hasMarkdown ? (markdown ?? '') : content);
+  /* Gated on the pipeline for a markdown source. The renderer loads asynchronously, and
+     without this the typewriter starts on the SOURCE: `**bold**` is typed literally and
+     then reformats when the module resolves. Waiting matches what the static branch
+     already does — degrade to the `html`/`content` fallback until the renderer is there —
+     rather than showing syntax the consumer never asked to display. */
+  let typewriterActive = $derived(
+    typewriter &&
+      !hasBody &&
+      typewriterSource.length > 0 &&
+      (!hasMarkdown || renderMarkdownFn !== null)
+  );
+  let typewriterRenderText = $derived(
+    hasMarkdown && renderMarkdownFn !== null ? { renderText: renderMarkdownFn } : {}
+  );
+  // Clamped at the boundary the way LoadingDots clamps `dots`, so the prop's floor is part
+  // of this component's contract rather than something a consumer discovers. The finite
+  // check is not redundant: `typeof NaN === 'number'`, and `Math.max(1, NaN)` is `NaN`, so
+  // without it the documented floor is not actually enforced.
+  let typewriterPacing = $derived(
+    typeof typewriterSpeed === 'number' && Number.isFinite(typewriterSpeed)
+      ? { speed: Math.max(1, typewriterSpeed) }
+      : {}
+  );
+  let hasContent = $derived(hasBody || hasHtml || content.length > 0 || typewriterActive);
   let showTyping = $derived(streaming && !hasContent);
   let showRetry = $derived(typeof onretry === 'function');
   let showFeedback = $derived(typeof onfeedback === 'function');
@@ -136,14 +199,64 @@
         <div class="header">{@render header()}</div>
       {/if}
 
-      <div class="bubble">
+      <!-- The bubble deliberately carries no role and no handler of its own. A button has
+           presentational children, so making the bubble one would flatten the paragraphs and
+           lists a message body renders; and a click target that is not focusable is a control
+           keyboard users cannot reach. The Button below is the whole control. -->
+      <div
+        class="bubble"
+        class:clampable
+        class:has-marker={marker}
+        style={clampable ? `--chat-message-clamp-lines-prop: ${clampLines};` : null}
+        data-clamped={clampActive ? 'true' : null}
+        data-expanded={clampable ? String(expanded) : null}
+      >
+        {#if marker}
+          <span class="marker" aria-hidden="true"></span>
+        {/if}
+
         {#if hasBody}
-          <div class="body">{@render body?.()}</div>
+          <div class="body" id={bodyId}>{@render body?.()}</div>
+        {:else if typewriterActive}
+          <!-- ChatMessageList is a role="log" aria-live="polite" region, so a body whose text
+               grows one character at a time would be announced as it grows. Silence it only
+               WHILE it is growing: leaving it off once streaming ends would suppress the
+               settled message too, which is the announcement the live region exists for.
+               `aria-live="off"` is the spec answer (the innermost live setting wins), and
+               `aria-busy` is the purpose-built one — "being modified, wait before exposing" —
+               so the two together do not depend on a single behaviour being implemented. -->
+          <div
+            class="body"
+            id={bodyId}
+            aria-live={streaming ? 'off' : null}
+            aria-busy={streaming ? 'true' : null}
+          >
+            <TypewriterText
+              text={typewriterSource}
+              isStreaming={streaming}
+              {...typewriterRenderText}
+              {...typewriterPacing}
+            />
+          </div>
         {:else if hasHtml}
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-          <div class="body">{@html effectiveHtml}</div>
+          <div class="body" id={bodyId}>{@html effectiveHtml}</div>
         {:else if content.length > 0}
-          <div class="body text">{content}</div>
+          <div class="body text" id={bodyId}>{content}</div>
+        {/if}
+
+        {#if clampable}
+          <div class="clamp-toggle">
+            <Button
+              variant="ghost"
+              size="sm"
+              onclick={toggleExpanded}
+              ariaExpanded={expanded}
+              ariaControls={bodyId}
+              text={expanded ? collapseLabel : expandLabel}
+              {...clampToggleTestId}
+            />
+          </div>
         {/if}
 
         {#if showTyping}
@@ -264,6 +377,27 @@
     overflow-wrap: anywhere;
   }
 
+  /* Only the marker variant becomes a containing block: making every bubble relative
+     would silently re-base any absolutely-positioned content a consumer renders in a
+     body snippet. */
+  .bubble.has-marker {
+    position: relative;
+  }
+
+  .marker {
+    /* Decorative and absolutely positioned, so it sits over the bubble's leading
+       padding — where a link at the start of a responder message also sits. Without
+       this it silently eats those clicks. */
+    pointer-events: none;
+    position: absolute;
+    inset-block: var(--chat-message-marker-inset-block, 0);
+    /* Logical, so the bar follows `role` alignment into RTL instead of pinning left. */
+    inset-inline-start: var(--chat-message-marker-offset, 0px);
+    width: var(--chat-message-marker-width, 2px);
+    border-radius: var(--chat-message-marker-border-radius, 0);
+    background: var(--chat-message-marker-color, #6d28d9);
+  }
+
   .chat-message.party-sender .bubble {
     color: var(--chat-message-sender-color, #ffffff);
     background: var(--chat-message-sender-background, #18181b);
@@ -341,6 +475,21 @@
     }
   }
 
+  .clamp-toggle {
+    display: flex;
+    margin-top: var(--chat-message-clamp-toggle-margin-top, 4px);
+  }
+
+  /* Clamp the rendered body, not the source: the message keeps its markup and its
+     copy text, and expanding is a state change rather than a re-render. */
+  .bubble[data-clamped='true'] .body {
+    display: -webkit-box;
+    line-clamp: var(--chat-message-clamp-lines, var(--chat-message-clamp-lines-prop, 2));
+    -webkit-line-clamp: var(--chat-message-clamp-lines, var(--chat-message-clamp-lines-prop, 2));
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
   .body :global(p) {
     margin: var(--chat-message-paragraph-margin, 0 0 0.5em 0);
   }

package/dist/ChatMessage/properties.d.ts

@@ -27,7 +27,35 @@ export type OptionalChatMessageProperties = {
      * action still has something to copy.
      */
     body?: Snippet | null;
+    /**
+     * Collapse the rendered body to this many lines and render a `Button` below it
+     * that expands and re-collapses the message; that button is the only control.
+     * `0` or omitted leaves the message uncollapsed and renders no control.
+     * The clamp applies to the rendered body, so `content` — and therefore the copy
+     * action — always carries the whole message. A consumer stylesheet setting
+     * `--chat-message-clamp-lines` takes priority over this value, so a theme can set
+     * the line count for every message without touching each call site.
+     */
+    clampLines?: number;
+    /**
+     * Draw an accent bar along the bubble's leading edge — the quote-bar shape a chat
+     * surface uses to mark one party's turns without giving them a filled bubble.
+     * Decorative: it carries no text and is hidden from assistive technology, so the
+     * distinction it makes must also be carried by `role`, which it is.
+     */
+    marker?: boolean;
     streaming?: boolean;
+    /**
+     * Reveal the message progressively instead of all at once, using `TypewriterText`.
+     * Drives off `markdown` or `content` — never `html`, since typing a pre-rendered
+     * string would put its tags on screen — and types `markdown` through the same
+     * pipeline the static branch uses, so rich text reveals as rich text. `streaming`
+     * decides the mode: while it is true, text keeps typing as it grows; the moment it
+     * turns false the remainder is shown at once. Ignored when a `body` snippet is set.
+     */
+    typewriter?: boolean;
+    /** Milliseconds between characters while typing, clamped to a minimum of 1. A non-finite value is ignored. Defaults to `TypewriterText`'s own. */
+    typewriterSpeed?: number;
     status?: ChatMessageStatus;
     avatar?: Snippet;
     header?: Snippet;
@@ -36,6 +64,12 @@ export type OptionalChatMessageProperties = {
     actions?: Snippet;
     copyLabel?: string;
     retryLabel?: string;
+    /**
+     * Label on the expand/collapse button rendered when `clampLines` is set, swapped
+     * on the expanded state.
+     */
+    expandLabel?: string;
+    collapseLabel?: string;
     feedbackUpLabel?: string;
     feedbackDownLabel?: string;
     testId?: string;
@@ -43,9 +77,6 @@ export type OptionalChatMessageProperties = {
 };
 export type ChatMessageEventProperties = {
     onretry?: (() => void) | null;
-    onRetry?: (() => void) | null;
     onfeedback?: ((value: ChatMessageFeedback) => void) | null;
-    onFeedback?: ((value: ChatMessageFeedback) => void) | null;
     oncopy?: (text: string) => void;
-    onCopy?: (text: string) => void;
 };

package/dist/ChatMessageList/ChatMessageList.svelte

@@ -23,21 +23,13 @@
     jumpLabel = 'Jump to latest',
     jumpIcon,
     allowCopy = false,
-    onscrollstate: onscrollstateLegacy,
-    onScrollState,
-    onretry: onretryLegacy,
-    onRetry,
-    onfeedback: onfeedbackLegacy,
-    onFeedback,
+    onscrollstate,
+    onretry,
+    onfeedback,
     testId,
     classes
   }: ChatMessageListProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onfeedback = $derived(onFeedback ?? onfeedbackLegacy);
-  const onretry = $derived(onRetry ?? onretryLegacy);
-  const onscrollstate = $derived(onScrollState ?? onscrollstateLegacy);
-
   let listEl: HTMLElement | null = $state(null);
   let innerEl: HTMLElement | null = $state(null);
   let atBottom = $state(true);
@@ -311,6 +303,8 @@
           markdown={msg.markdown}
           body={typeof messageBody === 'function' ? bodyFor : null}
           streaming={msg.streaming}
+          typewriter={msg.typewriter}
+          typewriterSpeed={msg.typewriterSpeed}
           status={msg.status}
           allowCopy={allowCopy && partyOf(msg.role) === 'responder'}
           attachments={typeof messageAttachments === 'function' ? attachmentsFor : null}

package/dist/ChatMessageList/properties.d.ts

@@ -49,12 +49,6 @@ export type ChatMessageListEventProperties = {
         atBottom: boolean;
         scrollable: boolean;
     }) => void;
-    onScrollState?: (state: {
-        atBottom: boolean;
-        scrollable: boolean;
-    }) => void;
     onretry?: () => void;
-    onRetry?: () => void;
     onfeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
-    onFeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
 };

package/dist/ChatSuggestions/ChatSuggestions.svelte

@@ -13,15 +13,11 @@
     loading = false,
     icon,
     chipClasses,
-    onselect: onselectLegacy,
-    onSelect,
+    onselect,
     testId,
     classes
   }: ChatSuggestionsProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onselect = $derived(onSelect ?? onselectLegacy);
-
   const labelOf = (item: ChatSuggestion): string => (typeof item === 'string' ? item : item.label);
 
   const valueOf = (item: ChatSuggestion): string => {

package/dist/ChatSuggestions/properties.d.ts

@@ -55,5 +55,4 @@ export type OptionalChatSuggestionsProperties = {
 };
 export type ChatSuggestionsEventProperties = {
     onselect?: (value: string, index: number) => void;
-    onSelect?: (value: string, index: number) => void;
 };

package/dist/CheckListItem/CheckListItem.svelte

@@ -8,14 +8,10 @@
     disabled = false,
     checkboxLabel,
     testId,
-    onclick: onclickLegacy,
-    onClick,
+    onclick,
     classes
   }: CheckListItemProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclick = $derived(onClick ?? onclickLegacy);
-
   function handleClick(value: boolean): void {
     checked = value;
     onclick?.(checked);

package/dist/CheckListItem/properties.d.ts

@@ -12,5 +12,4 @@ export type OptionalCheckListItemProperties = {
 };
 export type CheckListItemEventProperties = {
     onclick?: (checked: boolean) => void;
-    onClick?: (checked: boolean) => void;
 };

package/dist/Checkbox/Checkbox.svelte

@@ -11,16 +11,12 @@
     testId,
     checkedIcon,
     indeterminateIcon,
-    onclick: onclickLegacy,
-    onClick,
+    onclick,
     classes,
     ariaControls,
     ariaLabel
   }: CheckboxProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclick = $derived(onClick ?? onclickLegacy);
-
   function handleClick(): void {
     if (disabled) {
       return;

package/dist/Checkbox/properties.d.ts

@@ -20,5 +20,4 @@ export type OptionalCheckboxProperties = {
 };
 export type CheckboxEventProperties = {
     onclick?: (checked: boolean) => void;
-    onClick?: (checked: boolean) => void;
 };

package/dist/ChipInput/ChipInput.svelte

@@ -11,22 +11,12 @@
     editable = false,
     testId,
     classes,
-    onadd: onaddLegacy,
-    onAdd,
-    ondismiss: ondismissLegacy,
-    onDismiss,
-    onedit: oneditLegacy,
-    onEdit,
-    onchange: onchangeLegacy,
-    onChange
+    onadd,
+    ondismiss,
+    onedit,
+    onchange
   }: ChipInputProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onadd = $derived(onAdd ?? onaddLegacy);
-  const onchange = $derived(onChange ?? onchangeLegacy);
-  const ondismiss = $derived(onDismiss ?? ondismissLegacy);
-  const onedit = $derived(onEdit ?? oneditLegacy);
-
   let draft = $state('');
 
   // The chip currently swapped for an inline edit field, held by VALUE rather than by slot
@@ -153,11 +143,11 @@
           actionInput={false}
           classes="chip-input-edit"
           bind:this={editInputRef}
-          onInput={(nextValue) => {
+          oninput={(nextValue) => {
             editDraft = nextValue;
           }}
-          onKeyDown={(event) => handleEditKeyDown(event, chip)}
-          onBlur={() => handleEditBlur(chip)}
+          onkeydown={(event) => handleEditKeyDown(event, chip)}
+          onblur={() => handleEditBlur(chip)}
           {...typeof testId === 'string' ? { testId: `${testId}-item-${index}-edit` } : {}}
         />
       </div>
@@ -186,11 +176,11 @@
       actionInput={false}
       disable={disabled}
       classes="chip-input-draft"
-      onInput={(nextValue) => {
+      oninput={(nextValue) => {
         draft = nextValue;
       }}
-      onKeyDown={handleKeyDown}
-      onBlur={addChip}
+      onkeydown={handleKeyDown}
+      onblur={addChip}
       {...typeof testId === 'string' ? { testId: `${testId}-add` } : {}}
     />
   </div>

package/dist/ChipInput/properties.d.ts

@@ -34,16 +34,12 @@ export type OptionalChipInputProperties = {
 };
 export type ChipInputEventProperties = {
     onadd?: (value: string) => void;
-    onAdd?: (value: string) => void;
     ondismiss?: (value: string) => void;
-    onDismiss?: (value: string) => void;
     /**
      * Fires after an in-place edit (see `editable`) commits a value that actually changed. Not
      * fired when the edit is cancelled (Escape) or committed with the text unchanged.
      */
     onedit?: (value: string, previousValue: string) => void;
-    onEdit?: (value: string, previousValue: string) => void;
     /** Fires alongside `onadd`/`ondismiss`/`onedit`, after any of them has already updated `values`. */
     onchange?: (values: string[]) => void;
-    onChange?: (values: string[]) => void;
 };