@juspay/svelte-ui-components 2.80.2 → 2.80.4

package/dist/Combobox/Combobox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
   import Input from '../Input/Input.svelte';
+  import Pill from '../Pill/Pill.svelte';
   import type { ComboboxItem, ComboboxProperties } from './properties';
 
   function defaultFilter(item: ComboboxItem, query: string): boolean {
@@ -29,13 +30,27 @@
     inputSuffix,
     dropdownHeader,
     dropdownFooter,
+    // multi-select + create/action
+    multiple = false,
+    selected = $bindable([]),
+    maxSelected,
+    maxSelectedText,
+    pillSnippet,
+    allowCreate = false,
+    createLabel = (query: string) => `Create "${query}"`,
+    action,
+    actionIcon,
     onselect,
     oninput,
     onopen,
     onclose,
     onkeydown,
     onfocus,
-    onblur
+    onblur,
+    onchange,
+    onadd,
+    onremove,
+    oncreate
   }: ComboboxProperties = $props();
 
   let containerEl: HTMLDivElement | null = $state(null);
@@ -45,20 +60,63 @@
     return inputRef?.getInputRef() ?? null;
   }
 
+  function focusInput(): void {
+    inputRef?.getInputRef()?.focus();
+  }
+
   const listboxId = `combobox-listbox-${Math.random().toString(36).slice(2, 9)}`;
 
+  let selectedSet = $derived(new Set(selected));
+  let trimmedQuery = $derived(inputValue.trim());
+
   let filteredItems: ComboboxItem[] = $derived(
-    inputValue.length > 0 ? items.filter((item) => filterFn(item, inputValue)) : items
+    items.filter((item) => {
+      if (multiple && selectedSet.has(item.id)) {
+        return false;
+      }
+      return inputValue.length > 0 ? filterFn(item, inputValue) : true;
+    })
   );
 
   let selectableItems: ComboboxItem[] = $derived(
     filteredItems.filter((item) => item.disabled !== true)
   );
 
+  let exactMatch: ComboboxItem | null = $derived(
+    items.find((item) => item.label.toLowerCase() === trimmedQuery.toLowerCase()) ?? null
+  );
+
+  let atLimit = $derived(
+    multiple && typeof maxSelected === 'number' && selected.length >= maxSelected
+  );
+
+  let limitText = $derived(
+    maxSelectedText ??
+      (typeof maxSelected === 'number'
+        ? `You can select up to ${maxSelected}.`
+        : 'Selection limit reached.')
+  );
+
+  let showCreate = $derived(
+    allowCreate &&
+      !atLimit &&
+      trimmedQuery !== '' &&
+      exactMatch === null &&
+      !(multiple && selectedSet.has(trimmedQuery))
+  );
+
+  // Navigable rows: selectable options (hidden at the limit) → create → action.
+  let navItemCount = $derived(atLimit ? 0 : selectableItems.length);
+  let createNavIndex = $derived(showCreate ? navItemCount : -1);
+  let actionNavIndex = $derived(action ? navItemCount + (showCreate ? 1 : 0) : -1);
+  let navCount = $derived(navItemCount + (showCreate ? 1 : 0) + (action ? 1 : 0));
+
   let highlightedOptionId: string | null = $derived(
     highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : null
   );
 
+  const labelOf = (id: string): string => items.find((item) => item.id === id)?.label ?? id;
+
   function openDropdown() {
     if (disabled || open) {
       return;
@@ -77,37 +135,75 @@
     onclose?.();
   }
 
+  function emitChange(): void {
+    onchange?.([...selected]);
+  }
+
+  function addValue(id: string): void {
+    if (atLimit || selectedSet.has(id)) {
+      return;
+    }
+    selected = [...selected, id];
+    inputValue = '';
+    highlightedIndex = -1;
+    onadd?.(id);
+    emitChange();
+    focusInput();
+  }
+
+  function removeValue(id: string): void {
+    if (!selectedSet.has(id)) {
+      return;
+    }
+    selected = selected.filter((current) => current !== id);
+    onremove?.(id);
+    emitChange();
+  }
+
   function selectItem(item: ComboboxItem) {
     if (item.disabled === true) {
       return;
     }
+    onselect?.(item);
+    if (multiple) {
+      addValue(item.id);
+      return;
+    }
     value = item.id;
     inputValue = item.label;
-    onselect?.(item);
     closeDropdown();
   }
 
-  function getFilteredSelectableIndex(item: ComboboxItem): number {
-    let selectableIdx = 0;
-    for (let i = 0; i < filteredItems.length; i++) {
-      if (filteredItems[i] === item) {
-        return filteredItems[i].disabled === true ? -1 : selectableIdx;
-      }
-      if (filteredItems[i].disabled !== true) {
-        selectableIdx++;
-      }
+  function create(): void {
+    const created = trimmedQuery;
+    if (created === '') {
+      return;
+    }
+    oncreate?.(created);
+    if (multiple) {
+      addValue(created);
+      return;
+    }
+    value = created;
+    inputValue = created;
+    closeDropdown();
+  }
+
+  function runAction(): void {
+    action?.onClick();
+    if (!action?.keepOpen) {
+      closeDropdown();
     }
-    return -1;
   }
 
   async function moveHighlight(delta: number): Promise<void> {
-    if (selectableItems.length === 0) {
+    if (navCount === 0) {
       return;
     }
     let next = highlightedIndex + delta;
     if (next < 0) {
-      next = selectableItems.length - 1;
-    } else if (next >= selectableItems.length) {
+      next = navCount - 1;
+    } else if (next >= navCount) {
       next = 0;
     }
     highlightedIndex = next;
@@ -121,19 +217,38 @@
   }
 
   function selectHighlighted() {
-    if (highlightedIndex < 0 || highlightedIndex >= selectableItems.length) {
+    if (highlightedIndex < 0 || highlightedIndex >= navCount) {
       return;
     }
-    const item = selectableItems.at(highlightedIndex);
-    if (typeof item === 'object' && item !== null) {
-      selectItem(item);
+    if (highlightedIndex < navItemCount) {
+      const item = selectableItems.at(highlightedIndex);
+      if (item) {
+        selectItem(item);
+      }
+    } else if (highlightedIndex === createNavIndex) {
+      create();
+    } else if (highlightedIndex === actionNavIndex) {
+      runAction();
+    }
+  }
+
+  function getFilteredSelectableIndex(item: ComboboxItem): number {
+    let selectableIdx = 0;
+    for (let i = 0; i < filteredItems.length; i++) {
+      if (filteredItems[i] === item) {
+        return filteredItems[i].disabled === true ? -1 : selectableIdx;
+      }
+      if (filteredItems[i].disabled !== true) {
+        selectableIdx++;
+      }
     }
+    return -1;
   }
 
-  function handleInput(val: string, _event: Event) {
+  function handleInput(val: string, event: Event) {
     inputValue = val;
     oninput?.(val);
-    inputEventProperties?.onInput?.(val, _event);
+    inputEventProperties?.onInput?.(val, event);
     if (!open) {
       openDropdown();
     }
@@ -167,6 +282,17 @@
         if (open && highlightedIndex >= 0) {
           event.preventDefault();
           selectHighlighted();
+        } else if (exactMatch && !(multiple && selectedSet.has(exactMatch.id))) {
+          event.preventDefault();
+          selectItem(exactMatch);
+        } else if (showCreate) {
+          event.preventDefault();
+          create();
+        }
+        break;
+      case 'Backspace':
+        if (multiple && inputValue === '' && selected.length > 0) {
+          removeValue(selected[selected.length - 1]);
         }
         break;
       case 'Escape':
@@ -194,6 +320,13 @@
     inputEventProperties?.onBlur?.(event);
   }
 
+  function handleControlClick() {
+    if (multiple && !disabled) {
+      focusInput();
+      openDropdown();
+    }
+  }
+
   function handleClickOutside(event: Event) {
     if (
       event.target instanceof Node &&
@@ -213,16 +346,26 @@
 </script>
 
 <div class="combobox {classes ?? ''}" class:disabled bind:this={containerEl} data-pw={testId}>
-  <div class="combobox-input-wrapper">
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+  <div class="combobox-input-wrapper" class:multiple onclick={handleControlClick}>
     {#if typeof inputPrefix === 'function'}
       <div class="combobox-input-prefix">{@render inputPrefix()}</div>
     {/if}
+    {#if multiple}
+      {#each selected as id (id)}
+        {#if typeof pillSnippet === 'function'}
+          {@render pillSnippet(id, () => !disabled && removeValue(id), disabled)}
+        {:else}
+          <Pill text={labelOf(id)} dismissible {disabled} ondismiss={() => removeValue(id)} />
+        {/if}
+      {/each}
+    {/if}
     <div class="combobox-input">
       <Input
         {...inputProperties}
         bind:value={inputValue}
         bind:this={inputRef}
-        {placeholder}
+        placeholder={multiple && selected.length > 0 ? '' : placeholder}
         {name}
         disable={disabled}
         autoComplete="off"
@@ -249,7 +392,10 @@
       {#if typeof dropdownHeader === 'function'}
         <div class="combobox-dropdown-header">{@render dropdownHeader()}</div>
       {/if}
-      {#if filteredItems.length === 0}
+
+      {#if atLimit}
+        <div class="combobox-limit" role="alert">{limitText}</div>
+      {:else if filteredItems.length === 0 && !showCreate && !action}
         {#if typeof emptySnippet === 'function'}
           {@render emptySnippet()}
         {:else}
@@ -263,11 +409,11 @@
           <div
             class="combobox-option"
             class:highlighted={isHighlighted}
-            class:selected={item.id === value}
+            class:selected={!multiple && item.id === value}
             class:combobox-option-disabled={item.disabled === true}
             role="option"
             id={`${listboxId}-option-${selectableIndex}`}
-            aria-selected={item.id === value}
+            aria-selected={!multiple && item.id === value}
             aria-disabled={item.disabled === true ? 'true' : null}
             tabindex="-1"
             onclick={() => selectItem(item)}
@@ -286,6 +432,56 @@
           </div>
         {/each}
       {/if}
+
+      {#if showCreate}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div
+          class="combobox-option combobox-create"
+          class:highlighted={highlightedIndex === createNavIndex}
+          class:with-divider={navItemCount > 0}
+          role="option"
+          id={`${listboxId}-option-${createNavIndex}`}
+          aria-selected="false"
+          tabindex="-1"
+          onclick={() => create()}
+          onmouseenter={() => (highlightedIndex = createNavIndex)}
+          data-pw={typeof testId === 'string' ? `${testId}-create` : null}
+        >
+          <span class="combobox-create-icon" aria-hidden="true">
+            <svg viewBox="0 0 20 20" width="14" height="14" fill="none">
+              <path
+                d="M10 4v12M4 10h12"
+                stroke="currentColor"
+                stroke-width="1.7"
+                stroke-linecap="round"
+              />
+            </svg>
+          </span>
+          {createLabel(trimmedQuery)}
+        </div>
+      {/if}
+
+      {#if action}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div
+          class="combobox-option combobox-action"
+          class:highlighted={highlightedIndex === actionNavIndex}
+          class:with-divider={navItemCount > 0 || showCreate}
+          role="option"
+          id={`${listboxId}-option-${actionNavIndex}`}
+          aria-selected="false"
+          tabindex="-1"
+          onclick={() => runAction()}
+          onmouseenter={() => (highlightedIndex = actionNavIndex)}
+          data-pw={typeof testId === 'string' ? `${testId}-action` : null}
+        >
+          {#if typeof actionIcon === 'function'}
+            <span class="combobox-action-icon" aria-hidden="true">{@render actionIcon()}</span>
+          {/if}
+          {action.label}
+        </div>
+      {/if}
+
       {#if typeof dropdownFooter === 'function'}
         <div class="combobox-dropdown-footer">{@render dropdownFooter()}</div>
       {/if}
@@ -317,6 +513,14 @@
     transition: var(--combobox-input-transition, border-color 0.15s, box-shadow 0.15s);
   }
 
+  /* Multi-select control: pills wrap above the typeahead input. */
+  .combobox-input-wrapper.multiple {
+    flex-wrap: wrap;
+    gap: var(--combobox-pill-gap, 4px);
+    padding: var(--combobox-multiple-padding, 4px 6px);
+    cursor: text;
+  }
+
   .combobox-input-wrapper:hover {
     border-color: var(--combobox-input-hover-border-color, #999999);
   }
@@ -357,6 +561,12 @@
     --input-radius: 0;
   }
 
+  .combobox-input-wrapper.multiple .combobox-input {
+    flex: 1 1 60px;
+    min-width: 60px;
+    --input-padding: var(--combobox-multiple-input-padding, 2px 4px);
+  }
+
   .combobox-input::placeholder {
     color: var(--combobox-placeholder-color, #999999);
   }
@@ -378,6 +588,9 @@
   }
 
   .combobox-option {
+    display: flex;
+    align-items: center;
+    gap: var(--combobox-option-gap, 8px);
     padding: var(--combobox-option-padding, 8px 12px);
     color: var(--combobox-option-color, #333333);
     font-size: var(--combobox-option-font-size, inherit);
@@ -414,6 +627,41 @@
     pointer-events: none;
   }
 
+  .combobox-create {
+    color: var(--combobox-create-color, #2563eb);
+  }
+
+  .combobox-action {
+    color: var(--combobox-action-color, #374151);
+  }
+
+  .combobox-option.with-divider {
+    border-top: var(--combobox-divider, 1px solid #e5e7eb);
+  }
+
+  .combobox-create-icon,
+  .combobox-action-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .combobox-action-icon :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  .combobox-limit {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: var(--combobox-limit-padding, 8px 12px);
+    font-size: var(--combobox-limit-font-size, 13px);
+    font-weight: 500;
+    color: var(--combobox-limit-color, #b45309);
+    background: var(--combobox-limit-background, #fffbeb);
+  }
+
   .combobox-dropdown-header {
     border-bottom: var(--combobox-dropdown-header-border, none);
     padding: var(--combobox-dropdown-header-padding, 0);

package/dist/Combobox/Combobox.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { ComboboxProperties } from './properties';
 declare const Combobox: import("svelte").Component<ComboboxProperties, {
     getInputRef: () => HTMLInputElement | HTMLTextAreaElement | null;
-}, "value" | "open" | "inputValue" | "highlightedIndex">;
+}, "value" | "open" | "selected" | "inputValue" | "highlightedIndex">;
 type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

package/dist/Combobox/properties.d.ts

@@ -5,6 +5,13 @@ export type ComboboxItem = {
     label: string;
     disabled?: boolean;
 };
+/** A persistent custom action row rendered at the foot of the dropdown. */
+export type ComboboxAction = {
+    label: string;
+    onClick: () => void;
+    /** Keep the dropdown open after the action runs. Defaults to `false`. */
+    keepOpen?: boolean;
+};
 export type ComboboxProperties = MandatoryComboboxProperties & OptionalComboboxProperties & ComboboxEventProperties;
 export type MandatoryComboboxProperties = {
     items: ComboboxItem[];
@@ -30,6 +37,27 @@ export type OptionalComboboxProperties = {
     inputSuffix?: Snippet;
     dropdownHeader?: Snippet;
     dropdownFooter?: Snippet;
+    /** Enable multi-select: picked options become removable pills inside the control. */
+    multiple?: boolean;
+    /** Bindable array of selected ids (multi-select mode). */
+    selected?: string[];
+    /** Cap the number of selections (multi-select mode). */
+    maxSelected?: number;
+    /**
+     * Message shown in the dropdown once `maxSelected` is reached (option/create rows are hidden).
+     * Defaults to "You can select up to {maxSelected}.".
+     */
+    maxSelectedText?: string;
+    /** Custom pill renderer; receives `(value, remove, disabled)`. */
+    pillSnippet?: Snippet<[string, () => void, boolean]>;
+    /** Show a "Create …" row when the query has no exact match. Default `false`. */
+    allowCreate?: boolean;
+    /** Build the create-row label from the current query. */
+    createLabel?: (query: string) => string;
+    /** A persistent custom action row shown at the foot of the dropdown. */
+    action?: ComboboxAction;
+    /** Custom leading icon for the persistent action row. */
+    actionIcon?: Snippet;
 };
 export type ComboboxEventProperties = {
     onselect?: (item: ComboboxItem) => void;
@@ -39,4 +67,12 @@ export type ComboboxEventProperties = {
     onkeydown?: (event: KeyboardEvent) => void;
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
+    /** Multi-select: fires whenever the selection changes (add, remove, or create). */
+    onchange?: (selected: string[]) => void;
+    /** Multi-select: fires when a value is added. */
+    onadd?: (value: string) => void;
+    /** Multi-select: fires when a value is removed. */
+    onremove?: (value: string) => void;
+    /** Fires when the create row is chosen, with the trimmed query. */
+    oncreate?: (value: string) => void;
 };

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -14,6 +14,7 @@
   import { formatNumber } from '../_chart/format';
   import { roundedRectPath, linePath } from '../_chart/paths';
   import type { LegendItem, TooltipData, LinearScale, BandScale, Point } from '../_chart/types';
+  import { DEFAULT_CHART_CORNER_RADIUS } from '../_chart/types';
 
   // ── Per-instance uid for SVG <defs> ids ────────────────────────
   const uid = Math.random().toString(36).slice(2, 9);
@@ -27,9 +28,12 @@
     rightAxis = {},
     showGridlines = true,
     showLegend = true,
-    barRadius = 3,
+    barRadius = DEFAULT_CHART_CORNER_RADIUS,
     barPadding = 0.25,
     aspectRatio = 16 / 9,
+    minBarHeight = 2,
+    margin,
+    tooltipPortal = false,
     tooltipSnippet,
     onbarclick,
     testId,
@@ -44,6 +48,8 @@
   let hoveredCategoryIndex = $state<number | null>(null);
   let mouseX = $state(0);
   let mouseY = $state(0);
+  let mouseClientX = $state(0);
+  let mouseClientY = $state(0);
 
   // ── Formatters ─────────────────────────────────────────────────
 
@@ -53,7 +59,13 @@
   // ── Layout — wider right margin to accommodate right-axis labels ─
 
   const dims = $derived(
-    computeChartDimensions(chartWidth, chartHeight, { top: 24, right: 56, bottom: 40, left: 56 })
+    computeChartDimensions(chartWidth, chartHeight, {
+      top: 24,
+      right: 56,
+      bottom: 40,
+      left: 56,
+      ...margin
+    })
   );
 
   // ── Scales ─────────────────────────────────────────────────────
@@ -152,7 +164,7 @@
         const barX = bandStart + subIndex * subBandWidth + barGap;
         const valueY = scale(value);
         const barY = value >= 0 ? valueY : zeroY;
-        const barHeight = Math.max(2, Math.abs(valueY - zeroY));
+        const barHeight = Math.max(minBarHeight, Math.abs(valueY - zeroY));
 
         const path = roundedRectPath(barX, barY, barW, barHeight, barRadius, barRadius, 0, 0);
 
@@ -278,6 +290,22 @@
     const rect = containerEl.getBoundingClientRect();
     mouseX = event.clientX - rect.left;
     mouseY = event.clientY - rect.top;
+    mouseClientX = event.clientX;
+    mouseClientY = event.clientY;
+  };
+
+  /**
+   * Svelte action: relocates the tooltip layer to `document.body` so a `position:fixed`
+   * tooltip is never clipped by an `overflow`/scroll ancestor. Used only when
+   * `tooltipPortal` is set; `use:` actions never run during SSR.
+   */
+  const portalToBody = (node: HTMLElement) => {
+    document.body.appendChild(node);
+    return {
+      destroy: () => {
+        node.remove();
+      }
+    };
   };
 
   const handleCategoryEnter = (event: MouseEvent, catIdx: number) => {
@@ -439,12 +467,31 @@
     </ChartContainer>
 
     <!-- Tooltip -->
-    {#if typeof tooltipSnippet === 'function' && hoveredCategoryIndex !== null}
-      <div class="chart-tooltip-slot" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
-        {@render tooltipSnippet(buildTooltipContext(hoveredCategoryIndex))}
-      </div>
-    {:else}
-      <ChartTooltip data={tooltipData} {mouseX} {mouseY} />
+    {#if hoveredCategoryIndex !== null}
+      {#if tooltipPortal}
+        <!-- Portaled to <body> with fixed viewport coords so the tooltip is never
+             clipped by an overflow/scroll ancestor (e.g. a scrollable report sheet).
+             The inner elements keep their own +12/-12 offset relative to this layer. -->
+        <div
+          class="chart-tooltip-portal"
+          style="left: {mouseClientX}px; top: {mouseClientY}px;"
+          use:portalToBody
+        >
+          {#if typeof tooltipSnippet === 'function'}
+            <div class="chart-tooltip-slot" style="left: 12px; top: -12px;">
+              {@render tooltipSnippet(buildTooltipContext(hoveredCategoryIndex))}
+            </div>
+          {:else}
+            <ChartTooltip data={tooltipData} mouseX={0} mouseY={0} />
+          {/if}
+        </div>
+      {:else if typeof tooltipSnippet === 'function'}
+        <div class="chart-tooltip-slot" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
+          {@render tooltipSnippet(buildTooltipContext(hoveredCategoryIndex))}
+        </div>
+      {:else}
+        <ChartTooltip data={tooltipData} {mouseX} {mouseY} />
+      {/if}
     {/if}
   {:else}
     <div class="chart-empty">No data available.</div>
@@ -513,6 +560,12 @@
     pointer-events: none;
   }
 
+  .chart-tooltip-portal {
+    position: fixed;
+    z-index: var(--chart-tooltip-z-index, 10);
+    pointer-events: none;
+  }
+
   .chart-empty {
     padding: var(--chart-empty-padding, 32px 24px);
     color: var(--chart-empty-color, #9ca3af);

package/dist/DualAxisBarChart/properties.d.ts

@@ -77,7 +77,12 @@ export type OptionalDualAxisBarChartProperties = {
     showGridlines?: boolean;
     /** Whether to render the shared legend below the chart. Default `true`. */
     showLegend?: boolean;
-    /** Corner radius on column/bar shapes in pixels. Default `3`. */
+    /**
+     * Corner radius on column/bar shapes in pixels. Defaults to
+     * `DEFAULT_CHART_CORNER_RADIUS` (4), mirroring the design system's base
+     * `--radius` token. SVG `rx`/`ry` cannot read CSS `var()`, so pass this
+     * prop explicitly to track a changed `--radius` at runtime.
+     */
     barRadius?: number;
     /** Padding between category bands as a fraction of band width (0–1). Default `0.25`. */
     barPadding?: number;
@@ -95,6 +100,32 @@ export type OptionalDualAxisBarChartProperties = {
     testId?: string;
     /** Extra CSS class string on the root `<div>`. */
     classes?: string;
+    /**
+     * Minimum rendered bar height in pixels. The default `2` keeps very small non-zero
+     * values visible, but it also paints a 2px stub for genuine zeros — set `0` so an
+     * all-zero/dormant series renders nothing (letting the consumer detect it and show
+     * an empty state instead of a row of indistinguishable baseline stubs). Default `2`.
+     */
+    minBarHeight?: number;
+    /**
+     * Override the plot margins (px) reserved for axis titles and tick labels. Merged
+     * over the defaults `{ top: 24, right: 56, bottom: 40, left: 56 }`; widen `left`/`right`
+     * when long currency tick labels (e.g. `₹1,00,000`) would otherwise overlap the
+     * gridlines in a narrow container.
+     */
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /**
+     * Render the hover tooltip on `document.body` with `position: fixed` viewport
+     * coordinates instead of `position: absolute` inside the chart. Set `true` when the
+     * chart sits in an `overflow:auto`/scrollable container that would otherwise clip the
+     * tooltip. Default `false` (in-chart positioning, unchanged).
+     */
+    tooltipPortal?: boolean;
 };
 export type DualAxisBarChartEventProperties = {
     /**