@juspay/svelte-ui-components 4.35.1 → 4.37.0

package/dist/ChatComposer/ChatComposer.svelte

@@ -21,6 +21,7 @@
   let {
     value = $bindable(''),
     layout = 'row',
+    variant = 'default',
     placeholder = '',
     disabled = false,
     textDisabled = null,
@@ -60,6 +61,7 @@
     actionLabel = 'Voice conversation',
     actionText,
     leading,
+    trailing,
     statusText,
     statusTestId,
     slashCommands = null,
@@ -71,6 +73,7 @@
     slashItem,
     onsubmit,
     oninput,
+    oninputfocus,
     onkeydown,
     onpaste,
     onstop,
@@ -92,6 +95,11 @@
   }: ChatComposerProperties = $props();
 
   let fileInput: HTMLInputElement | null = $state(null);
+  let inputElement: HTMLTextAreaElement | null = $state(null);
+
+  export const focus = (options?: FocusOptions): void => {
+    inputElement?.focus(options);
+  };
 
   let showVoice = $derived(typeof onvoice === 'function');
   let showAttach = $derived(typeof onattach === 'function' || typeof onattachclick === 'function');
@@ -391,6 +399,7 @@
 {#snippet textInput()}
   <textarea
     class="input"
+    bind:this={inputElement}
     data-pw={inputTestId ?? null}
     bind:value
     {placeholder}
@@ -404,6 +413,7 @@
     aria-activedescendant={slashActiveId}
     maxlength={maxLength > 0 ? maxLength : null}
     oninput={handleInput}
+    onfocus={(event) => oninputfocus?.(event)}
     onkeydown={handleKeydown}
     onpaste={(event) => onpaste?.(event)}
     use:autoGrow={value}
@@ -480,11 +490,15 @@
       </Button>
     </div>
   {/if}
+  {#if typeof trailing === 'function'}
+    {@render trailing()}
+  {/if}
 {/snippet}
 
 <div
   class="chat-composer {classes ?? ''}"
   class:disabled
+  class:pill={variant === 'pill'}
   data-has-slash={slashCommands !== null ? '' : null}
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
@@ -611,6 +625,10 @@
     opacity: var(--chat-composer-disabled-opacity, 0.6);
   }
 
+  .chat-composer.pill {
+    border-radius: var(--chat-composer-pill-border-radius, 999px);
+  }
+
   /* .input below sets outline: none with nothing standing in for it, so the
      visible replacement lives here on the surrounding surface instead --
      :focus-within lights up whenever the textarea inside is focused, the same

package/dist/ChatComposer/ChatComposer.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { ChatComposerProperties } from './properties';
-declare const ChatComposer: import("svelte").Component<ChatComposerProperties, {}, "value" | "attachments">;
+declare const ChatComposer: import("svelte").Component<ChatComposerProperties, {
+    focus: (options?: FocusOptions) => void;
+}, "value" | "attachments">;
 type ChatComposer = ReturnType<typeof ChatComposer>;
 export default ChatComposer;

package/dist/ChatComposer/properties.d.ts

@@ -5,6 +5,7 @@ export type OptionalChatComposerProperties = {
     value?: string;
     /** Text above a separate control row when stacked; row preserves the default. */
     layout?: 'row' | 'stacked';
+    variant?: 'default' | 'pill';
     placeholder?: string;
     disabled?: boolean;
     /**
@@ -85,6 +86,8 @@ export type OptionalChatComposerProperties = {
     /** Optional visible text beside the idle action icon; omitted keeps icon-only markup. */
     actionText?: string;
     leading?: Snippet;
+    /** Additional controls after the send/stop control. */
+    trailing?: Snippet;
     /**
      * Opt-in sr-only status region (`role="status" aria-live="polite"`) for
      * narrating composer state changes -- e.g. "Recording. Press Escape to stop
@@ -145,6 +148,8 @@ export type ChatComposerEventProperties = {
      */
     onsubmit?: (value: string, attachments: File[]) => boolean | void | Promise<boolean | void>;
     oninput?: (value: string, event: Event) => void;
+    /** Textarea focus, named separately from the native HTMLElement onfocus accessor. */
+    oninputfocus?: (event: FocusEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
     onpaste?: (event: ClipboardEvent) => void;
     onstop?: () => void;

package/dist/ChatHeader/ChatHeader.svelte

@@ -2,6 +2,8 @@
   import Button from '../Button/Button.svelte';
   import Img from '../Img/Img.svelte';
   import closeSvg from '../assets/close.svg?raw';
+  import fullscreenSvg from '../assets/fullscreen.svg?raw';
+  import exitFullscreenSvg from '../assets/exit-fullscreen.svg?raw';
   import type { ChatHeaderProperties } from './properties';
 
   let {
@@ -11,6 +13,11 @@
     imageAlt = '',
     avatar,
     actions,
+    expanded = $bindable(false),
+    showExpand,
+    expandLabel = 'Expand',
+    collapseLabel = 'Collapse',
+    onexpandchange,
     closeIcon,
     closeLabel = 'Close',
     showClose,
@@ -21,6 +28,12 @@
   }: ChatHeaderProperties = $props();
 
   let displayClose = $derived(showClose ?? typeof onclose === 'function');
+  let displayExpand = $derived(showExpand ?? typeof onexpandchange === 'function');
+
+  const toggleExpanded = (): void => {
+    expanded = !expanded;
+    onexpandchange?.(expanded);
+  };
 </script>
 
 <header
@@ -53,6 +66,18 @@
       {#if typeof actions === 'function'}
         {@render actions()}
       {/if}
+      {#if displayExpand}
+        <div class="expand">
+          <Button
+            variant="ghost"
+            onclick={toggleExpanded}
+            ariaLabel={expanded ? collapseLabel : expandLabel}
+          >
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html expanded ? exitFullscreenSvg : fullscreenSvg}
+          </Button>
+        </div>
+      {/if}
       {#if displayClose}
         <div class="close">
           <Button onclick={() => onclose?.()} ariaLabel={closeLabel}>
@@ -166,4 +191,21 @@
     height: 100%;
     width: 100%;
   }
+
+  .expand {
+    --button-width: var(--chat-header-expand-size, var(--chat-header-close-size, 36px));
+    --button-height: var(--chat-header-expand-size, var(--chat-header-close-size, 36px));
+    --button-padding: var(--chat-header-expand-padding, var(--chat-header-close-padding, 8px));
+    --button-border-radius: var(--chat-header-expand-border-radius, 50%);
+    --button-color: var(--chat-header-expand-background-color, transparent);
+    --button-text-color: var(--chat-header-expand-color, #52525b);
+    --button-hover-text-color: var(--chat-header-expand-color, #52525b);
+    --button-content-gap: 0px;
+    --button-hover-color: var(--chat-header-expand-hover-background-color, #f4f4f5);
+  }
+
+  .expand :global(svg) {
+    height: 100%;
+    width: 100%;
+  }
 </style>

package/dist/ChatHeader/ChatHeader.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ChatHeaderProperties } from './properties';
-declare const ChatHeader: import("svelte").Component<ChatHeaderProperties, {}, "">;
+declare const ChatHeader: import("svelte").Component<ChatHeaderProperties, {}, "expanded">;
 type ChatHeader = ReturnType<typeof ChatHeader>;
 export default ChatHeader;

package/dist/ChatHeader/properties.d.ts

@@ -7,6 +7,10 @@ export type OptionalChatHeaderProperties = {
     imageAlt?: string;
     avatar?: Snippet;
     actions?: Snippet;
+    expanded?: boolean;
+    showExpand?: boolean;
+    expandLabel?: string;
+    collapseLabel?: string;
     closeIcon?: Snippet;
     closeLabel?: string;
     showClose?: boolean;
@@ -16,4 +20,5 @@ export type OptionalChatHeaderProperties = {
 };
 export type ChatHeaderEventProperties = {
     onclose?: () => void;
+    onexpandchange?: (expanded: boolean) => void;
 };

package/dist/DockPanel/DockPanel.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+  import Resizable from '../Resizable/Resizable.svelte';
+  import { registerDismissible } from '../_interaction/dismissal';
+  import type { ResizeSize } from '../Resizable/properties';
+  import type { DockPanelProperties, DockPanelSnapshot, DockPanelState } from './properties';
+
+  let {
+    state: panelState = $bindable('closed'),
+    width = $bindable(380),
+    minWidth = 300,
+    maxWidth = 600,
+    reservedWidth = $bindable(0),
+    label = 'Panel',
+    resizeLabel = 'Resize panel',
+    header,
+    body,
+    footer,
+    children,
+    testId,
+    classes,
+    onstatechange,
+    onwidthchange
+  }: DockPanelProperties = $props();
+
+  const lowerWidth = $derived(Number.isFinite(minWidth) ? Math.max(0, minWidth) : 300);
+  const upperWidth = $derived(
+    Number.isFinite(maxWidth) ? Math.max(lowerWidth, maxWidth) : Math.max(lowerWidth, 600)
+  );
+  const clampedWidth = $derived(
+    Math.min(upperWidth, Math.max(lowerWidth, Number.isFinite(width) ? width : 380))
+  );
+
+  const changeState = (nextState: DockPanelState): void => {
+    if (panelState !== nextState) {
+      panelState = nextState;
+      onstatechange?.(nextState);
+    }
+  };
+  const expand = (): void => changeState('expanded');
+  const collapse = (): void => changeState('docked');
+  const close = (): void => changeState('closed');
+
+  const handleResize = (size: ResizeSize): void => {
+    const nextWidth = Math.min(upperWidth, Math.max(lowerWidth, size.width));
+    if (width !== nextWidth) {
+      width = nextWidth;
+      onwidthchange?.(width);
+    }
+  };
+
+  const synchronizePanel = (node: HTMLElement, snapshot: DockPanelSnapshot) => {
+    let releaseDismissal: (() => void) | null = null;
+    const update = (nextSnapshot: DockPanelSnapshot): void => {
+      if (width !== nextSnapshot.width) {
+        width = nextSnapshot.width;
+        onwidthchange?.(width);
+      }
+      const nextReservation = nextSnapshot.state === 'docked' ? nextSnapshot.width : 0;
+      if (reservedWidth !== nextReservation) {
+        reservedWidth = nextReservation;
+      }
+      if (nextSnapshot.state === 'expanded' && releaseDismissal === null) {
+        releaseDismissal = registerDismissible({ element: () => node, onEscape: collapse });
+      } else if (nextSnapshot.state !== 'expanded' && releaseDismissal !== null) {
+        releaseDismissal();
+        releaseDismissal = null;
+      }
+    };
+    update(snapshot);
+    return { update, destroy: () => releaseDismissal?.() };
+  };
+</script>
+
+<div
+  class="dock-panel {classes ?? ''}"
+  class:closed={panelState === 'closed'}
+  class:expanded={panelState === 'expanded'}
+  data-state={panelState}
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+  role="complementary"
+  aria-label={label}
+  inert={panelState === 'closed'}
+  use:synchronizePanel={{ state: panelState, width: clampedWidth }}
+  style:width={panelState === 'expanded' ? null : `${clampedWidth}px`}
+>
+  <Resizable
+    width={panelState === 'docked' ? clampedWidth : null}
+    minWidth={lowerWidth}
+    maxWidth={upperWidth}
+    handles={panelState === 'docked' ? ['left'] : []}
+    handleLabel={resizeLabel}
+    onresize={handleResize}
+    classes="dock-panel-frame"
+  >
+    {#if typeof header === 'function'}
+      <div class="header">{@render header({ state: panelState, expand, collapse, close })}</div>
+    {/if}
+    <div class="body">
+      {#if typeof body === 'function'}
+        {@render body()}
+      {:else if typeof children === 'function'}
+        {@render children()}
+      {/if}
+    </div>
+    {#if typeof footer === 'function'}
+      <div class="footer">{@render footer()}</div>
+    {/if}
+  </Resizable>
+</div>
+
+<style>
+  .dock-panel {
+    box-sizing: border-box;
+    position: var(--dock-panel-position, fixed);
+    top: var(--dock-panel-top, 0px);
+    right: var(--dock-panel-right, 0px);
+    bottom: var(--dock-panel-bottom, 0px);
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    z-index: var(--dock-panel-z-index, 30);
+    background: var(--dock-panel-background, #ffffff);
+    color: var(--dock-panel-color, #18181b);
+    border-radius: var(--dock-panel-border-radius, 0px);
+    box-shadow: var(--dock-panel-box-shadow, -4px 0 16px #00000012);
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      opacity
+        var(--dock-panel-transition-duration, var(--duration-base, var(--motion-duration, 200ms)))
+        var(--dock-panel-transition-easing, var(--ease-smooth-out, var(--motion-easing, ease-out))),
+      transform
+        var(--dock-panel-transition-duration, var(--duration-base, var(--motion-duration, 200ms)))
+        var(--dock-panel-transition-easing, var(--ease-smooth-out, var(--motion-easing, ease-out))),
+      display
+        var(--dock-panel-transition-duration, var(--duration-base, var(--motion-duration, 200ms)))
+        allow-discrete;
+  }
+
+  .dock-panel.closed {
+    display: none;
+    opacity: 0;
+    transform: translateX(var(--dock-panel-enter-distance, var(--distance-base, 8px)));
+  }
+
+  .dock-panel.expanded {
+    left: var(--dock-panel-left, 0px);
+    width: calc(100% - var(--dock-panel-left, 0px) - var(--dock-panel-right, 0px));
+  }
+
+  .dock-panel :global(.dock-panel-frame) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    border: var(--dock-panel-border, 1px solid #e4e4e7);
+    --resizable-transition: none;
+  }
+
+  .header {
+    flex-shrink: 0;
+    padding: var(--dock-panel-header-padding, 0px);
+    border-bottom: var(--dock-panel-header-border, none);
+  }
+
+  .body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--dock-panel-body-padding, 0px);
+  }
+
+  .footer {
+    flex-shrink: 0;
+    padding: var(--dock-panel-footer-padding, 0px);
+    border-top: var(--dock-panel-footer-border, none);
+  }
+
+  @starting-style {
+    .dock-panel:not(.closed) {
+      opacity: 0;
+      transform: translateX(var(--dock-panel-enter-distance, var(--distance-base, 8px)));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dock-panel {
+      transition: none;
+    }
+  }
+</style>

package/dist/DockPanel/DockPanel.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DockPanelProperties } from './properties';
+declare const DockPanel: import("svelte").Component<DockPanelProperties, {}, "state" | "width" | "reservedWidth">;
+type DockPanel = ReturnType<typeof DockPanel>;
+export default DockPanel;

package/dist/DockPanel/properties.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+export type DockPanelState = 'closed' | 'docked' | 'expanded';
+export type DockPanelControls = {
+    state: DockPanelState;
+    expand: () => void;
+    collapse: () => void;
+    close: () => void;
+};
+export type DockPanelSnapshot = {
+    state: DockPanelState;
+    width: number;
+};
+export type DockPanelProperties = {
+    state?: DockPanelState;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    /** Published layout reservation. Bind to observe; zero when closed or expanded. */
+    reservedWidth?: number;
+    label?: string;
+    resizeLabel?: string;
+    header?: Snippet<[DockPanelControls]>;
+    body?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    testId?: string;
+    classes?: string;
+    onstatechange?: (state: DockPanelState) => void;
+    onwidthchange?: (width: number) => void;
+};

package/dist/DockPanel/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Resizable/Resizable.svelte

@@ -88,8 +88,13 @@
     event.preventDefault();
     const startW = clampWidth(measuredWidth());
     const startH = clampHeight(measuredHeight());
-    width = startW;
-    height = startH;
+    const direction = DIRS[edge];
+    if (direction.x !== 0) {
+      width = startW;
+    }
+    if (direction.y !== 0) {
+      height = startH;
+    }
     active = {
       edge,
       pointerId: event.pointerId,
@@ -137,18 +142,22 @@
     let handled = false;
 
     if (dir.x !== 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
-      nextWidth = clampWidth(nextWidth + (event.key === 'ArrowRight' ? step : -step));
+      nextWidth = clampWidth(nextWidth + dir.x * (event.key === 'ArrowRight' ? step : -step));
       handled = true;
     }
     if (dir.y !== 0 && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-      nextHeight = clampHeight(nextHeight + (event.key === 'ArrowDown' ? step : -step));
+      nextHeight = clampHeight(nextHeight + dir.y * (event.key === 'ArrowDown' ? step : -step));
       handled = true;
     }
 
     if (handled) {
       event.preventDefault();
-      width = nextWidth;
-      height = nextHeight;
+      if (dir.x !== 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
+        width = nextWidth;
+      }
+      if (dir.y !== 0 && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+        height = nextHeight;
+      }
       onresize?.({ width: nextWidth, height: nextHeight });
     }
   }

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { default as ArmedButton } from './ArmedButton/ArmedButton.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
+export { default as DockPanel } from './DockPanel/DockPanel.svelte';
+export type { DockPanelState, DockPanelControls, DockPanelProperties } from './DockPanel/properties';
 export { default as BrandLoader } from './BrandLoader/BrandLoader.svelte';
 export { default as Button } from './Button/Button.svelte';
 export { default as Input } from './Input/Input.svelte';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { default as ArmedButton } from './ArmedButton/ArmedButton.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
+export { default as DockPanel } from './DockPanel/DockPanel.svelte';
 export { default as BrandLoader } from './BrandLoader/BrandLoader.svelte';
 export { default as Button } from './Button/Button.svelte';
 export { default as Input } from './Input/Input.svelte';

package/dist/styles/theme-dark.css

@@ -167,6 +167,11 @@
   --chat-header-subtitle-color: #9ca3af;
   --chat-header-close-color: #9ca3af;
   --chat-header-close-hover-background-color: #252535;
+  --chat-header-expand-color: #9ca3af;
+  --chat-header-expand-hover-background-color: #252535;
+  --dock-panel-background: #17171f;
+  --dock-panel-color: #e5e7eb;
+  --dock-panel-border: 1px solid #30303d;
 
   /* ChatMessageList */
   --chat-message-list-jump-background-color: #1e1e2e;

package/dist-codemod/codemod/migration-assets/legacy-display.css

@@ -17,7 +17,7 @@
  * stylesheet is a crutch for the migration window, not a permanent override.
  */
 
-/* components whose new default is `block` (88) */
+/* components whose new default is `block` (89) */
 sui-accordion { --sui-accordion-display: inline; }
 sui-area-chart { --sui-area-chart-display: inline; }
 sui-aspect-ratio { --sui-aspect-ratio-display: inline; }
@@ -47,6 +47,7 @@ sui-color-picker { --sui-color-picker-display: inline; }
 sui-combobox { --sui-combobox-display: inline; }
 sui-command-menu { --sui-command-menu-display: inline; }
 sui-context-menu { --sui-context-menu-display: inline; }
+sui-dock-panel { --sui-dock-panel-display: inline; }
 sui-draggable { --sui-draggable-display: inline; }
 sui-dual-axis-bar-chart { --sui-dual-axis-bar-chart-display: inline; }
 sui-empty-state { --sui-empty-state-display: inline; }

package/dist-codemod/codemod/migration-assets/wc-display.json

@@ -174,6 +174,11 @@
     "property": "--sui-delta-indicator-display",
     "default": "inline-block"
   },
+  {
+    "tag": "sui-dock-panel",
+    "property": "--sui-dock-panel-display",
+    "default": "block"
+  },
   {
     "tag": "sui-draggable",
     "property": "--sui-draggable-display",