@juspay/svelte-ui-components 4.36.0 → 4.37.0

package/dist/ChatComposer/ChatComposer.svelte

@@ -21,6 +21,7 @@
   let {
     value = $bindable(''),
     layout = 'row',
+    variant = 'default',
     placeholder = '',
     disabled = false,
     textDisabled = null,
@@ -497,6 +498,7 @@
 <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}
@@ -623,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/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;
     /**

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

@@ -142,11 +142,11 @@
     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;
     }
 

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

@@ -169,6 +169,9 @@
   --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",