npm - @aquera/nile-elements - Versions diffs - 2.0.4 → 2.0.6 - Mend

@aquera/nile-elements 2.0.4 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (225) hide show

package/dist/src/nile-combobox/portal-manager.js CHANGED Viewed

@@ -190,28 +190,8 @@ export class ComboboxPortalManager {
             }
             if (!listbox || !listbox.isConnected)
                 return;
-            listbox.scrollTop = 0;
-            const virtualized = listbox.querySelector('.virtualized');
-            if (virtualized && virtualized.isConnected) {
-                const fewItems = this.component.filteredData?.length < 5;
-                if (fewItems) {
-                    virtualized.style.overflowY = 'hidden';
-                    virtualized.style.maxHeight = 'none';
-                    listbox.style.overflowY = 'hidden';
-                    listbox.style.maxHeight = 'fit-content';
-                }
-                else {
-                    virtualized.style.overflowY = 'auto';
-                    virtualized.style.maxHeight = '';
-                    listbox.style.overflowY = 'auto';
-                    listbox.style.maxHeight = '';
-                }
-                virtualized.scrollTop = 0;
-            }
-            const virtualizer = listbox.querySelector('lit-virtualizer');
-            if (virtualizer && virtualizer.isConnected) {
-                virtualizer.scrollTop = 0;
-            }
+            const scroller = listbox.querySelector('.combobox__options-scroll');
+            (scroller ?? listbox).scrollTop = 0;
         });
     }
 }

package/dist/src/nile-combobox/portal-manager.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"portal-manager.js","sourceRoot":"","sources":["../../../src/nile-combobox/portal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2025\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n autoUpdate,\n computePosition,\n flip,\n offset,\n shift,\n size,\n platform,\n type Placement,\n type MiddlewareData,\n type ComputePositionConfig,\n} from '@floating-ui/dom';\nimport { PortalUtils } from '../nile-select/portal-utils';\n\nexport class ComboboxPortalManager {\n private portalContainer: HTMLElement \| null = null;\n private originalListboxParent: HTMLElement \| null = null;\n private measuredPopupHeight: number \| null = null;\n private component: any;\n private cleanupAutoUpdate: (() => void) \| null = null;\n private currentPlacement: Placement = 'bottom';\n\n constructor(component: any) {\n this.component = component;\n }\n\n get portalContainerElement(): HTMLElement \| null {\n return this.portalContainer;\n }\n\n private createPortalContainer(): HTMLElement {\n const container = document.createElement('div');\n container.style.position = 'absolute';\n container.style.zIndex = '9999';\n container.style.pointerEvents = 'none';\n container.className = 'nile-combobox-portal';\n return container;\n }\n\n private async computePosition(): Promise<void> {\n if (!this.portalContainer) return;\n\n const referenceElement = this.component.combobox \|\| this.component;\n const floatingElement = this.portalContainer;\n\n try {\n const boundary = PortalUtils.findBoundaryElements(referenceElement);\n const initialPlacement = PortalUtils.getOptimalPlacement(referenceElement);\n\n const { x, y, placement } = await computePosition(\n referenceElement,\n floatingElement,\n {\n placement: initialPlacement,\n strategy: 'fixed',\n middleware: [\n offset(4),\n size({\n apply: ({ availableWidth, availableHeight, elements, rects }) => {\n const maxHeight = PortalUtils.calculateOptimalHeight(\n rects.reference,\n window.innerHeight,\n this.currentPlacement,\n );\n elements.floating.style.maxWidth = `${availableWidth}px`;\n elements.floating.style.maxHeight = `${maxHeight}px`;\n elements.floating.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n elements.floating.style.setProperty('--auto-size-available-height', `${maxHeight}px`);\n },\n padding: 10,\n boundary,\n }),\n flip({\n fallbackPlacements: ['bottom', 'top', 'bottom-start', 'top-start'],\n fallbackStrategy: 'bestFit',\n padding: 10,\n boundary,\n }),\n shift({ padding: 10, crossAxis: true, boundary }),\n ],\n platform,\n },\n );\n\n const referenceRect = referenceElement.getBoundingClientRect();\n Object.assign(floatingElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n position: 'fixed',\n pointerEvents: 'auto',\n width: `${referenceRect.width}px`,\n });\n\n this.currentPlacement = placement;\n const placementClass = placement.split('-')[0];\n floatingElement.className = `nile-combobox-portal combobox__listbox--${placementClass}`;\n } catch {\n this.fallbackPositioning();\n }\n }\n\n private fallbackPositioning(): void {\n if (!this.portalContainer) return;\n\n const ref = this.component.combobox \|\| this.component;\n const rect = ref.getBoundingClientRect();\n const vh = window.innerHeight;\n const spaceBelow = vh - rect.bottom;\n const spaceAbove = rect.top;\n\n let top: number;\n let maxH: number;\n let cls: string;\n\n if (spaceAbove > spaceBelow) {\n maxH = Math.max(spaceAbove - 20, 100);\n top = Math.max(rect.top - maxH - 4, 10);\n cls = 'top';\n } else {\n maxH = Math.max(spaceBelow - 20, 100);\n top = rect.bottom + 4;\n cls = 'bottom';\n }\n\n Object.assign(this.portalContainer.style, {\n left: `${rect.left}px`,\n top: `${top}px`,\n width: `${rect.width}px`,\n maxHeight: `${maxH}px`,\n pointerEvents: 'auto',\n });\n this.portalContainer.className = `nile-combobox-portal combobox__listbox--${cls}`;\n this.portalContainer.style.setProperty('--auto-size-available-height', `${maxH}px`);\n this.portalContainer.style.setProperty('--auto-size-available-width', `${rect.width}px`);\n }\n\n private extractStylesAsCSS(styles: any): string {\n if (typeof styles === 'string') return styles;\n if (Array.isArray(styles)) return styles.map(s => this.extractStylesAsCSS(s)).join('\\n');\n if (styles && typeof styles === 'object' && styles.cssText) return styles.cssText;\n return '';\n }\n\n private injectStyles(): void {\n if (!this.portalContainer) return;\n const styleId = `nile-combobox-styles-${Math.random().toString(36).substring(2, 11)}`;\n if (document.getElementById(styleId)) return;\n\n const componentStyles = (this.component.constructor as any).styles;\n if (!componentStyles) return;\n\n const el = document.createElement('style');\n el.id = styleId;\n el.textContent = this.extractStylesAsCSS(componentStyles);\n document.head.appendChild(el);\n (this.portalContainer as any).__injectedStyleId = styleId;\n }\n\n setupPortal(): void {\n if (!this.component.portal) return;\n\n this.component.updateComplete.then(() => {\n const listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;\n if (!listbox) return;\n\n this.originalListboxParent = listbox.parentElement as HTMLElement;\n this.portalContainer = this.createPortalContainer();\n this.portalContainer.appendChild(listbox);\n document.body.appendChild(this.portalContainer);\n this.injectStyles();\n listbox.style.display = '';\n this.computePosition();\n\n this.cleanupAutoUpdate = autoUpdate(\n this.component,\n this.portalContainer,\n () => this.computePosition(),\n { ancestorScroll: true, ancestorResize: true, elementResize: true, layoutShift: true, animationFrame: true },\n );\n });\n }\n\n cleanupPortal(): void {\n if (this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate();\n this.cleanupAutoUpdate = null;\n }\n\n if (this.portalContainer && this.portalContainer.parentNode) {\n const listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;\n if (listbox && this.originalListboxParent) {\n this.originalListboxParent.appendChild(listbox);\n listbox.style.display = this.component.portal ? 'none' : '';\n }\n\n const sid = (this.portalContainer as any).__injectedStyleId;\n if (sid) document.getElementById(sid)?.remove();\n\n this.portalContainer.parentNode.removeChild(this.portalContainer);\n }\n\n this.portalContainer = null;\n this.originalListboxParent = null;\n this.measuredPopupHeight = null;\n this.currentPlacement = 'bottom';\n }\n\n updatePosition(): void {\n if (this.component.portal && this.portalContainer) {\n this.computePosition();\n }\n }\n\n resetMeasuredHeight(): void {\n this.measuredPopupHeight = null;\n }\n\n async resetScrollPosition(): Promise<void> {\n await this.component.updateComplete;\n\n requestAnimationFrame(() => {\n let listbox: HTMLElement \| null = null;\n\n if (this.component.portal && this.portalContainer) {\n listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;\n } else {\n listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;\n }\n\n if (!listbox \|\| !listbox.isConnected) return;\n listbox.scrollTop = 0;\n\n const virtualized = listbox.querySelector('.virtualized') as HTMLElement;\n if (virtualized && virtualized.isConnected) {\n const fewItems = this.component.filteredData?.length < 5;\n if (fewItems) {\n virtualized.style.overflowY = 'hidden';\n virtualized.style.maxHeight = 'none';\n listbox.style.overflowY = 'hidden';\n listbox.style.maxHeight = 'fit-content';\n } else {\n virtualized.style.overflowY = 'auto';\n virtualized.style.maxHeight = '';\n listbox.style.overflowY = 'auto';\n listbox.style.maxHeight = '';\n }\n virtualized.scrollTop = 0;\n }\n\n const virtualizer = listbox.querySelector('lit-virtualizer') as HTMLElement;\n if (virtualizer && virtualizer.isConnected) {\n virtualizer.scrollTop = 0;\n }\n });\n }\n}\n"]}
1	+ {"version":3,"file":"portal-manager.js","sourceRoot":"","sources":["../../../src/nile-combobox/portal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2025\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n autoUpdate,\n computePosition,\n flip,\n offset,\n shift,\n size,\n platform,\n type Placement,\n type MiddlewareData,\n type ComputePositionConfig,\n} from '@floating-ui/dom';\nimport { PortalUtils } from '../nile-select/portal-utils';\n\nexport class ComboboxPortalManager {\n private portalContainer: HTMLElement \| null = null;\n private originalListboxParent: HTMLElement \| null = null;\n private measuredPopupHeight: number \| null = null;\n private component: any;\n private cleanupAutoUpdate: (() => void) \| null = null;\n private currentPlacement: Placement = 'bottom';\n\n constructor(component: any) {\n this.component = component;\n }\n\n get portalContainerElement(): HTMLElement \| null {\n return this.portalContainer;\n }\n\n private createPortalContainer(): HTMLElement {\n const container = document.createElement('div');\n container.style.position = 'absolute';\n container.style.zIndex = '9999';\n container.style.pointerEvents = 'none';\n container.className = 'nile-combobox-portal';\n return container;\n }\n\n private async computePosition(): Promise<void> {\n if (!this.portalContainer) return;\n\n const referenceElement = this.component.combobox \|\| this.component;\n const floatingElement = this.portalContainer;\n\n try {\n const boundary = PortalUtils.findBoundaryElements(referenceElement);\n const initialPlacement = PortalUtils.getOptimalPlacement(referenceElement);\n\n const { x, y, placement } = await computePosition(\n referenceElement,\n floatingElement,\n {\n placement: initialPlacement,\n strategy: 'fixed',\n middleware: [\n offset(4),\n size({\n apply: ({ availableWidth, availableHeight, elements, rects }) => {\n const maxHeight = PortalUtils.calculateOptimalHeight(\n rects.reference,\n window.innerHeight,\n this.currentPlacement,\n );\n elements.floating.style.maxWidth = `${availableWidth}px`;\n elements.floating.style.maxHeight = `${maxHeight}px`;\n elements.floating.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n elements.floating.style.setProperty('--auto-size-available-height', `${maxHeight}px`);\n },\n padding: 10,\n boundary,\n }),\n flip({\n fallbackPlacements: ['bottom', 'top', 'bottom-start', 'top-start'],\n fallbackStrategy: 'bestFit',\n padding: 10,\n boundary,\n }),\n shift({ padding: 10, crossAxis: true, boundary }),\n ],\n platform,\n },\n );\n\n const referenceRect = referenceElement.getBoundingClientRect();\n Object.assign(floatingElement.style, {\n left: `${x}px`,\n top: `${y}px`,\n position: 'fixed',\n pointerEvents: 'auto',\n width: `${referenceRect.width}px`,\n });\n\n this.currentPlacement = placement;\n const placementClass = placement.split('-')[0];\n floatingElement.className = `nile-combobox-portal combobox__listbox--${placementClass}`;\n } catch {\n this.fallbackPositioning();\n }\n }\n\n private fallbackPositioning(): void {\n if (!this.portalContainer) return;\n\n const ref = this.component.combobox \|\| this.component;\n const rect = ref.getBoundingClientRect();\n const vh = window.innerHeight;\n const spaceBelow = vh - rect.bottom;\n const spaceAbove = rect.top;\n\n let top: number;\n let maxH: number;\n let cls: string;\n\n if (spaceAbove > spaceBelow) {\n maxH = Math.max(spaceAbove - 20, 100);\n top = Math.max(rect.top - maxH - 4, 10);\n cls = 'top';\n } else {\n maxH = Math.max(spaceBelow - 20, 100);\n top = rect.bottom + 4;\n cls = 'bottom';\n }\n\n Object.assign(this.portalContainer.style, {\n left: `${rect.left}px`,\n top: `${top}px`,\n width: `${rect.width}px`,\n maxHeight: `${maxH}px`,\n pointerEvents: 'auto',\n });\n this.portalContainer.className = `nile-combobox-portal combobox__listbox--${cls}`;\n this.portalContainer.style.setProperty('--auto-size-available-height', `${maxH}px`);\n this.portalContainer.style.setProperty('--auto-size-available-width', `${rect.width}px`);\n }\n\n private extractStylesAsCSS(styles: any): string {\n if (typeof styles === 'string') return styles;\n if (Array.isArray(styles)) return styles.map(s => this.extractStylesAsCSS(s)).join('\\n');\n if (styles && typeof styles === 'object' && styles.cssText) return styles.cssText;\n return '';\n }\n\n private injectStyles(): void {\n if (!this.portalContainer) return;\n const styleId = `nile-combobox-styles-${Math.random().toString(36).substring(2, 11)}`;\n if (document.getElementById(styleId)) return;\n\n const componentStyles = (this.component.constructor as any).styles;\n if (!componentStyles) return;\n\n const el = document.createElement('style');\n el.id = styleId;\n el.textContent = this.extractStylesAsCSS(componentStyles);\n document.head.appendChild(el);\n (this.portalContainer as any).__injectedStyleId = styleId;\n }\n\n setupPortal(): void {\n if (!this.component.portal) return;\n\n this.component.updateComplete.then(() => {\n const listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;\n if (!listbox) return;\n\n this.originalListboxParent = listbox.parentElement as HTMLElement;\n this.portalContainer = this.createPortalContainer();\n this.portalContainer.appendChild(listbox);\n document.body.appendChild(this.portalContainer);\n this.injectStyles();\n listbox.style.display = '';\n this.computePosition();\n\n this.cleanupAutoUpdate = autoUpdate(\n this.component,\n this.portalContainer,\n () => this.computePosition(),\n { ancestorScroll: true, ancestorResize: true, elementResize: true, layoutShift: true, animationFrame: true },\n );\n });\n }\n\n cleanupPortal(): void {\n if (this.cleanupAutoUpdate) {\n this.cleanupAutoUpdate();\n this.cleanupAutoUpdate = null;\n }\n\n if (this.portalContainer && this.portalContainer.parentNode) {\n const listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;\n if (listbox && this.originalListboxParent) {\n this.originalListboxParent.appendChild(listbox);\n listbox.style.display = this.component.portal ? 'none' : '';\n }\n\n const sid = (this.portalContainer as any).__injectedStyleId;\n if (sid) document.getElementById(sid)?.remove();\n\n this.portalContainer.parentNode.removeChild(this.portalContainer);\n }\n\n this.portalContainer = null;\n this.originalListboxParent = null;\n this.measuredPopupHeight = null;\n this.currentPlacement = 'bottom';\n }\n\n updatePosition(): void {\n if (this.component.portal && this.portalContainer) {\n this.computePosition();\n }\n }\n\n resetMeasuredHeight(): void {\n this.measuredPopupHeight = null;\n }\n\n async resetScrollPosition(): Promise<void> {\n await this.component.updateComplete;\n\n requestAnimationFrame(() => {\n let listbox: HTMLElement \| null = null;\n\n if (this.component.portal && this.portalContainer) {\n listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;\n } else {\n listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;\n }\n\n if (!listbox \|\| !listbox.isConnected) return;\n\n const scroller = listbox.querySelector(\n '.combobox__options-scroll',\n ) as HTMLElement \| null;\n (scroller ?? listbox).scrollTop = 0;\n });\n }\n}\n"]}

package/dist/src/nile-combobox/renderer.d.ts CHANGED Viewed

@@ -10,12 +10,11 @@ import type { ComboboxRow, ComboboxHeaderRow } from './types';
 export declare class ComboboxRenderer {
     static renderGroupHeader(row: ComboboxHeaderRow): TemplateResult;
     static renderRowsPlain(rows: ComboboxRow[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, showNoResults: boolean, noResultsMessage: string, isLoading: boolean, onScroll: (e: Event) => void, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean, noResultsSubtitle?: string): TemplateResult;
-    static renderRowsVirtualized(virtualItems: VirtualItem[], totalSize: number, rows: ComboboxRow[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean): TemplateResult;
-    static renderVirtualizedOptions(virtualItems: VirtualItem[], totalSize: number, data: any[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, measureElement: (el: Element | null) => void, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean): TemplateResult;
+    static renderRowsVirtualized(virtualItems: VirtualItem[], totalSize: number, rows: ComboboxRow[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean, stickyOverlay?: TemplateResult, stickyIndex?: number): TemplateResult;
+    static renderVirtualizedOptions(virtualItems: VirtualItem[], totalSize: number, data: any[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean): TemplateResult;
     static renderPlainOptions(data: any[], value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, showNoResults: boolean, noResultsMessage: string, isLoading: boolean, onScroll: (e: Event) => void, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean, noResultsSubtitle?: string): TemplateResult;
     static renderNoResults(noResultsMessage: string, noResultsSubtitle?: string): TemplateResult;
     static renderNoData(noDataMessage: string): TemplateResult;
-    private static renderMeasuredItem;
     static renderItem(item: any, value: string | string[], multiple: boolean, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, enableDescription?: boolean): TemplateResult;
     static renderVirtualizedGrid(virtualItems: VirtualItem[], totalSize: number, data: any[], value: string | string[], multiple: boolean, gridColumns: number, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string, gridColumnWidth?: number): TemplateResult;
     static renderHorizontalGrid(virtualItems: VirtualItem[], totalSize: number, data: any[], value: string | string[], multiple: boolean, gridRows: number, gridColumnWidth: number, getDisplayText: (item: any) => string, getItemValue: (item: any) => string, isLoading: boolean, allowHtmlLabel: boolean, getItemDescription?: (item: any) => string, getItemPrefix?: (item: any) => string, getItemSuffix?: (item: any) => string): TemplateResult;

package/dist/src/nile-combobox/renderer.js CHANGED Viewed

@@ -47,13 +47,14 @@ export class ComboboxRenderer {
       </div>
     `;
     }
-    static renderRowsVirtualized(virtualItems, totalSize, rows, value, multiple, getDisplayText, getItemValue, isLoading, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
+    static renderRowsVirtualized(virtualItems, totalSize, rows, value, multiple, getDisplayText, getItemValue, isLoading, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription, stickyOverlay, stickyIndex = -1) {
         return html `
       <div
         part="select-options"
         class="combobox__options ${isLoading ? 'loading' : ''}"
       >
         <div style="position:relative;height:${totalSize}px;width:100%;">
+          ${stickyOverlay ?? ''}
           ${repeat(virtualItems, (vItem) => vItem.key, (vItem) => {
             const row = rows[vItem.index];
             if (!row)
@@ -62,8 +63,9 @@ export class ComboboxRenderer {
                 `transform:translateY(${vItem.start}px);` +
                 `height:${vItem.size}px;`;
             if (row.kind === 'header') {
+                const headerStyle = vItem.index === stickyIndex ? `${posStyle}visibility:hidden;` : posStyle;
                 return html `
-                  <div style=${posStyle} class="combobox__group-header-slot">
+                  <div style=${headerStyle} class="combobox__group-header-slot">
                     ${ComboboxRenderer.renderGroupHeader(row)}
                   </div>
                 `;
@@ -78,20 +80,24 @@ export class ComboboxRenderer {
       </div>
     `;
     }
-    static renderVirtualizedOptions(virtualItems, totalSize, data, value, multiple, getDisplayText, getItemValue, isLoading, allowHtmlLabel, measureElement, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
-        const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
+    static renderVirtualizedOptions(virtualItems, totalSize, data, value, multiple, getDisplayText, getItemValue, isLoading, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
         return html `
       <div
         part="select-options"
         class="combobox__options ${isLoading ? 'loading' : ''}"
       >
         <div style="position:relative;height:${totalSize}px;width:100%;">
-          <div style="position:absolute;top:0;left:0;width:100%;transform:translateY(${offsetTop}px);">
-            ${repeat(virtualItems, (vItem) => vItem.key, (vItem) => {
+          ${repeat(virtualItems, (vItem) => vItem.key, (vItem) => {
             const item = data[vItem.index];
-            return ComboboxRenderer.renderMeasuredItem(item, vItem.index, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription);
+            const posStyle = `position:absolute;top:0;left:0;right:0;` +
+                `transform:translateY(${vItem.start}px);` +
+                `height:${vItem.size}px;`;
+            return html `
+                <div style=${posStyle}>
+                  ${ComboboxRenderer.renderItem(item, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription)}
+                </div>
+              `;
         })}
-          </div>
         </div>
       </div>
     `;
@@ -136,43 +142,6 @@ export class ComboboxRenderer {
       </div>
     `;
     }
-    static renderMeasuredItem(item, index, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
-        if (!item)
-            return html ``;
-        const optionValue = getItemValue(item);
-        const displayText = getDisplayText(item);
-        const isDisabled = item?.disabled || false;
-        const className = item?.className;
-        const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');
-        const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');
-        const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');
-        let isSelected = false;
-        if (multiple) {
-            isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));
-        }
-        else {
-            isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);
-        }
-        return html `
-      <nile-option
-        data-index=${index}
-        value=${optionValue}
-        .selected=${isSelected}
-        .disabled=${isDisabled}
-        .showCheckbox=${multiple}
-        class=${classMap({
-            option: enableDescription ?? false,
-            [className ?? '']: !!className,
-        })}
-        .description=${description}
-        .isDescriptionEnabled=${enableDescription}
-      >
-        ${unsafeHTML(prefix)}
-        ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}
-        ${unsafeHTML(suffix)}
-      </nile-option>
-    `;
-    }
     static renderItem(item, value, multiple, getDisplayText, getItemValue, allowHtmlLabel, getItemDescription, getItemPrefix, getItemSuffix, enableDescription) {
         if (!item)
             return html ``;

package/dist/src/nile-combobox/renderer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../../src/nile-combobox/renderer.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2025\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, type TemplateResult } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { VirtualItem } from '@tanstack/virtual-core';\nimport type { ComboboxRow, ComboboxHeaderRow } from './types';\n\nexport class ComboboxRenderer {\n\n static renderGroupHeader(row: ComboboxHeaderRow): TemplateResult {\n return html`\n <div\n part=\"group-header\"\n class=\"combobox__group-header\"\n role=\"presentation\"\n data-group-id=${row.id}\n style=${`--group-depth:${row.depth}`}\n >\n ${row.prefix\n ? html`<nile-icon\n class=\"combobox__group-prefix\"\n name=${row.prefix}\n size=\"14\"\n method=\"fill\"\n ></nile-icon>`\n : ''}\n <span class=\"combobox__group-label\">${row.label}</span>\n </div>\n `;\n }\n\n static renderRowsPlain(\n rows: ComboboxRow[],\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n showNoResults: boolean,\n noResultsMessage: string,\n isLoading: boolean,\n onScroll: (e: Event) => void,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n noResultsSubtitle?: string,\n ): TemplateResult {\n if (showNoResults && !isLoading && rows.length === 0) {\n return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n }\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n ${rows.map((row) =>\n row.kind === 'header'\n ? ComboboxRenderer.renderGroupHeader(row)\n : ComboboxRenderer.renderItem(\n row.item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n ),\n )}\n </div>\n </div>\n `;\n }\n\n static renderRowsVirtualized(\n virtualItems: VirtualItem[],\n totalSize: number,\n rows: ComboboxRow[],\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const row = rows[vItem.index];\n if (!row) return html``;\n const posStyle =\n `position:absolute;top:0;left:0;right:0;` +\n `transform:translateY(${vItem.start}px);` +\n `height:${vItem.size}px;`;\n if (row.kind === 'header') {\n return html`\n <div style=${posStyle} class=\"combobox__group-header-slot\">\n ${ComboboxRenderer.renderGroupHeader(row)}\n </div>\n `;\n }\n return html`\n <div style=${posStyle}>\n ${ComboboxRenderer.renderItem(\n row.item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n `;\n }\n\n static renderVirtualizedOptions(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n measureElement: (el: Element \| null) => void,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n <div style=\"position:absolute;top:0;left:0;width:100%;transform:translateY(${offsetTop}px);\">\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const item = data[vItem.index];\n return ComboboxRenderer.renderMeasuredItem(\n item, vItem.index, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n );\n },\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderPlainOptions(\n data: any[],\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n showNoResults: boolean,\n noResultsMessage: string,\n isLoading: boolean,\n onScroll: (e: Event) => void,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n noResultsSubtitle?: string,\n ): TemplateResult {\n if (showNoResults && !isLoading && data.length === 0) {\n return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n }\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n ${data.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n ),\n )}\n </div>\n </div>\n `;\n }\n\n static renderNoResults(noResultsMessage: string, noResultsSubtitle?: string): TemplateResult {\n return html`\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-results\" class=\"combobox__no-results\">\n <div part=\"no-results-title\" class=\"combobox__no-results-title\">\n ${noResultsMessage \|\| 'No result found'}\n </div>\n ${noResultsSubtitle\n ? html`<div part=\"no-results-subtitle\" class=\"combobox__no-results-subtitle\">${noResultsSubtitle}</div>`\n : ''}\n </div>\n </div>\n `;\n }\n\n static renderNoData(noDataMessage: string): TemplateResult {\n return html`\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-data\" class=\"combobox__no-results\">\n <div part=\"no-data-title\" class=\"combobox__no-results-title\">\n ${noDataMessage \|\| 'No data available'}\n </div>\n </div>\n </div>\n `;\n }\n\n private static renderMeasuredItem(\n item: any,\n index: number,\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n if (!item) return html``;\n\n const optionValue = getItemValue(item);\n const displayText = getDisplayText(item);\n const isDisabled = item?.disabled \|\| false;\n const className = item?.className;\n const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n let isSelected = false;\n if (multiple) {\n isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n } else {\n isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n }\n\n return html`\n <nile-option\n data-index=${index}\n value=${optionValue}\n .selected=${isSelected}\n .disabled=${isDisabled}\n .showCheckbox=${multiple}\n class=${classMap({\n option: enableDescription ?? false,\n [className ?? '']: !!className,\n })}\n .description=${description}\n .isDescriptionEnabled=${enableDescription}\n >\n ${unsafeHTML(prefix)}\n ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n ${unsafeHTML(suffix)}\n </nile-option>\n `;\n }\n\n static renderItem(\n item: any,\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n if (!item) return html``;\n\n const optionValue = getItemValue(item);\n const displayText = getDisplayText(item);\n const isDisabled = item?.disabled \|\| false;\n const className = item?.className;\n const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n let isSelected = false;\n if (multiple) {\n isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n } else {\n isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n }\n\n return html`\n <nile-option\n value=${optionValue}\n .selected=${isSelected}\n .disabled=${isDisabled}\n .showCheckbox=${multiple}\n class=${classMap({\n option: enableDescription ?? false,\n [className ?? '']: !!className,\n })}\n .description=${description}\n .isDescriptionEnabled=${enableDescription}\n >\n ${unsafeHTML(prefix)}\n ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n ${unsafeHTML(suffix)}\n </nile-option>\n `;\n }\n\n static renderVirtualizedGrid(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string \| string[],\n multiple: boolean,\n gridColumns: number,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n gridColumnWidth?: number,\n ): TemplateResult {\n const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n const colTemplate = gridColumnWidth\n ? `repeat(${gridColumns}, ${gridColumnWidth}px)`\n : `repeat(${gridColumns}, 1fr)`;\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;\">\n <div style=\"position:absolute;top:0;left:0;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;transform:translateY(${offsetTop}px);\">\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const rowStart = vItem.index gridColumns;\n const rowItems = data.slice(rowStart, rowStart + gridColumns);\n return html`\n <div class=\"combobox__grid-row\" style=\"display:grid;grid-template-columns:${colTemplate};gap:4px;\">\n ${rowItems.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix,\n ),\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderHorizontalGrid(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string \| string[],\n multiple: boolean,\n gridRows: number,\n gridColumnWidth: number,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n ): TemplateResult {\n const offsetLeft = virtualItems.length > 0 ? virtualItems[0].start : 0;\n const rowHeight = 38;\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options combobox__options--horizontal ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;width:${totalSize}px;height:${rowHeight * gridRows}px;\">\n <div style=\"position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(${offsetLeft}px);\">\n ${repeat(\n virtualItems,\n (vCol) => vCol.key,\n (vCol) => {\n const colStart = vCol.index * gridRows;\n const colItems = data.slice(colStart, colStart + gridRows);\n return html`\n <div class=\"combobox__grid-col\" style=\"width:${gridColumnWidth}px;flex-shrink:0;display:flex;flex-direction:column;\">\n ${colItems.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix,\n ),\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderAddCustomOption(\n searchValue: string,\n multiple: boolean,\n ): TemplateResult {\n return html`\n <nile-option\n value=${searchValue}\n class=\"combobox__add-option\"\n .showCheckbox=${multiple}\n >\n + Add \"${searchValue}\"\n </nile-option>\n `;\n }\n\n static shouldUseVirtualizer(data: any[], gridColumns = 1): boolean {\n if (gridColumns > 1) return true;\n return data.length >= 5;\n }\n}\n"]}
1	+ {"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../../src/nile-combobox/renderer.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Copyright Aquera Inc 2025\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { html, type TemplateResult } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { VirtualItem } from '@tanstack/virtual-core';\nimport type { ComboboxRow, ComboboxHeaderRow } from './types';\n\nexport class ComboboxRenderer {\n\n static renderGroupHeader(row: ComboboxHeaderRow): TemplateResult {\n return html`\n <div\n part=\"group-header\"\n class=\"combobox__group-header\"\n role=\"presentation\"\n data-group-id=${row.id}\n style=${`--group-depth:${row.depth}`}\n >\n ${row.prefix\n ? html`<nile-icon\n class=\"combobox__group-prefix\"\n name=${row.prefix}\n size=\"14\"\n method=\"fill\"\n ></nile-icon>`\n : ''}\n <span class=\"combobox__group-label\">${row.label}</span>\n </div>\n `;\n }\n\n static renderRowsPlain(\n rows: ComboboxRow[],\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n showNoResults: boolean,\n noResultsMessage: string,\n isLoading: boolean,\n onScroll: (e: Event) => void,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n noResultsSubtitle?: string,\n ): TemplateResult {\n if (showNoResults && !isLoading && rows.length === 0) {\n return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n }\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n ${rows.map((row) =>\n row.kind === 'header'\n ? ComboboxRenderer.renderGroupHeader(row)\n : ComboboxRenderer.renderItem(\n row.item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n ),\n )}\n </div>\n </div>\n `;\n }\n\n static renderRowsVirtualized(\n virtualItems: VirtualItem[],\n totalSize: number,\n rows: ComboboxRow[],\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n stickyOverlay?: TemplateResult,\n stickyIndex = -1,\n ): TemplateResult {\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n ${stickyOverlay ?? ''}\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const row = rows[vItem.index];\n if (!row) return html``;\n const posStyle =\n `position:absolute;top:0;left:0;right:0;` +\n `transform:translateY(${vItem.start}px);` +\n `height:${vItem.size}px;`;\n if (row.kind === 'header') {\n const headerStyle =\n vItem.index === stickyIndex ? `${posStyle}visibility:hidden;` : posStyle;\n return html`\n <div style=${headerStyle} class=\"combobox__group-header-slot\">\n ${ComboboxRenderer.renderGroupHeader(row)}\n </div>\n `;\n }\n return html`\n <div style=${posStyle}>\n ${ComboboxRenderer.renderItem(\n row.item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n `;\n }\n\n static renderVirtualizedOptions(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const item = data[vItem.index];\n const posStyle =\n `position:absolute;top:0;left:0;right:0;` +\n `transform:translateY(${vItem.start}px);` +\n `height:${vItem.size}px;`;\n return html`\n <div style=${posStyle}>\n ${ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n `;\n }\n\n static renderPlainOptions(\n data: any[],\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n showNoResults: boolean,\n noResultsMessage: string,\n isLoading: boolean,\n onScroll: (e: Event) => void,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n noResultsSubtitle?: string,\n ): TemplateResult {\n if (showNoResults && !isLoading && data.length === 0) {\n return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n }\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n ${data.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n ),\n )}\n </div>\n </div>\n `;\n }\n\n static renderNoResults(noResultsMessage: string, noResultsSubtitle?: string): TemplateResult {\n return html`\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-results\" class=\"combobox__no-results\">\n <div part=\"no-results-title\" class=\"combobox__no-results-title\">\n ${noResultsMessage \|\| 'No result found'}\n </div>\n ${noResultsSubtitle\n ? html`<div part=\"no-results-subtitle\" class=\"combobox__no-results-subtitle\">${noResultsSubtitle}</div>`\n : ''}\n </div>\n </div>\n `;\n }\n\n static renderNoData(noDataMessage: string): TemplateResult {\n return html`\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-data\" class=\"combobox__no-results\">\n <div part=\"no-data-title\" class=\"combobox__no-results-title\">\n ${noDataMessage \|\| 'No data available'}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderItem(\n item: any,\n value: string \| string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n if (!item) return html``;\n\n const optionValue = getItemValue(item);\n const displayText = getDisplayText(item);\n const isDisabled = item?.disabled \|\| false;\n const className = item?.className;\n const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n let isSelected = false;\n if (multiple) {\n isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n } else {\n isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n }\n\n return html`\n <nile-option\n value=${optionValue}\n .selected=${isSelected}\n .disabled=${isDisabled}\n .showCheckbox=${multiple}\n class=${classMap({\n option: enableDescription ?? false,\n [className ?? '']: !!className,\n })}\n .description=${description}\n .isDescriptionEnabled=${enableDescription}\n >\n ${unsafeHTML(prefix)}\n ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n ${unsafeHTML(suffix)}\n </nile-option>\n `;\n }\n\n static renderVirtualizedGrid(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string \| string[],\n multiple: boolean,\n gridColumns: number,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n gridColumnWidth?: number,\n ): TemplateResult {\n const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n const colTemplate = gridColumnWidth\n ? `repeat(${gridColumns}, ${gridColumnWidth}px)`\n : `repeat(${gridColumns}, 1fr)`;\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;\">\n <div style=\"position:absolute;top:0;left:0;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;transform:translateY(${offsetTop}px);\">\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const rowStart = vItem.index gridColumns;\n const rowItems = data.slice(rowStart, rowStart + gridColumns);\n return html`\n <div class=\"combobox__grid-row\" style=\"display:grid;grid-template-columns:${colTemplate};gap:4px;\">\n ${rowItems.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix,\n ),\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderHorizontalGrid(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string \| string[],\n multiple: boolean,\n gridRows: number,\n gridColumnWidth: number,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n ): TemplateResult {\n const offsetLeft = virtualItems.length > 0 ? virtualItems[0].start : 0;\n const rowHeight = 38;\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options combobox__options--horizontal ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;width:${totalSize}px;height:${rowHeight * gridRows}px;\">\n <div style=\"position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(${offsetLeft}px);\">\n ${repeat(\n virtualItems,\n (vCol) => vCol.key,\n (vCol) => {\n const colStart = vCol.index * gridRows;\n const colItems = data.slice(colStart, colStart + gridRows);\n return html`\n <div class=\"combobox__grid-col\" style=\"width:${gridColumnWidth}px;flex-shrink:0;display:flex;flex-direction:column;\">\n ${colItems.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix,\n ),\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderAddCustomOption(\n searchValue: string,\n multiple: boolean,\n ): TemplateResult {\n return html`\n <nile-option\n value=${searchValue}\n class=\"combobox__add-option\"\n .showCheckbox=${multiple}\n >\n + Add \"${searchValue}\"\n </nile-option>\n `;\n }\n\n static shouldUseVirtualizer(data: any[], gridColumns = 1): boolean {\n if (gridColumns > 1) return true;\n return data.length >= 5;\n }\n}\n"]}

package/dist/src/nile-floating-panel/nile-floating-panel.css.js CHANGED Viewed

@@ -79,26 +79,24 @@ export const styles = css `
     display: none;
   }
+  /* Offset arrow by 0.5px so its outline aligns with the panel border and its fill fully covers it. */
   .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow { bottom: 0; }
-  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow:after,
   .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow > svg {
-    top: 16px;
+    top: 15.5px;
     transform: rotate(180deg);
   }
   .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow { top: 0; }
-  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow > svg { bottom: 16px; }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow > svg { bottom: 15.5px; }
   .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow { right: 0; }
-  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow:after,
   .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow > svg {
     transform: rotate(90deg);
-    top: calc(50% - 3px);
+    top: calc(50% - 3.5px);
     left: 11px;
   }
   .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow { left: 0; }
-  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow:after,
   .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow > svg {
     transform: rotate(-90deg);
-    top: calc(50% - 3px);
+    top: calc(50% - 3.5px);
     right: 11px;
   }
@@ -111,6 +109,14 @@ export const styles = css `
   .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg {
     position: absolute;
+    overflow: visible;
+  }
+  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg > .nile-floating-panel__arrow-outline {
+    fill: none;
+    stroke: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
   }
   .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow {
@@ -121,6 +127,13 @@ export const styles = css `
     border-width: 8px 8px 0;
     border-top-color: initial;
   }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow:after {
+    bottom: -8px;
+    left: -1px;
+    border-width: 9px 9px 0;
+    border-top-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    clip-path: inset(2px 0 0 0);
+  }
   .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow {
     top: 0;
   }
@@ -129,6 +142,13 @@ export const styles = css `
     border-width: 0 8px 8px;
     border-bottom-color: initial;
   }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow:after {
+    top: -8px;
+    left: -1px;
+    border-width: 0 9px 9px;
+    border-bottom-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    clip-path: inset(0 0 2px 0);
+  }
   .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow {
     right: 0;
   }
@@ -137,6 +157,13 @@ export const styles = css `
     border-width: 8px 0 8px 8px;
     border-left-color: initial;
   }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow:after {
+    right: -8px;
+    top: -1px;
+    border-width: 9px 0 9px 9px;
+    border-left-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    clip-path: inset(0 0 0 2px);
+  }
   .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow {
     left: 0;
   }
@@ -145,18 +172,29 @@ export const styles = css `
     border-width: 8px 8px 8px 0;
     border-right-color: initial;
   }
+  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow:after {
+    left: -8px;
+    top: -1px;
+    border-width: 9px 9px 9px 0;
+    border-right-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
+    clip-path: inset(0 2px 0 0);
+  }
   .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {
     width: 16px;
     height: 16px;
     color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
-  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before {
+  /* :after is a 1px-larger triangle in the border colour, stacked behind :before, so the border continues around the arrow. */
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before,
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:after {
     content: '';
     position: absolute;
     border-color: transparent;
     border-style: solid;
   }
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before { z-index: 1; }
+  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:after { z-index: 0; }
 `;
 export function injectGlobalFloatingPanelStyles() {
     if (typeof document === 'undefined')

package/dist/src/nile-floating-panel/nile-floating-panel.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-floating-panel.css.js","sourceRoot":"","sources":["../../../src/nile-floating-panel/nile-floating-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJxB~~,CAAC;AAEF,MAAM,UAAU,+BAA+B;IAC7C,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IAE5C,MAAM,QAAQ,GAAG,4BAA4B,CAAC;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAE9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;IACnC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;AACpC,CAAC;AAED,+BAA+B,EAAE,CAAC;AAElC,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2025\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n nile-floating-panel {\n display: inline-block;\n }\n\n .tippy-box[data-theme~='floating-panel'] {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n padding: 0;\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n line-height: 1.4;\n white-space: normal;\n outline: 0;\n transition-property: transform, visibility, opacity;\n }\n\n .tippy-box[data-theme~='floating-panel'][data-animation='fade'][data-state='hidden'] {\n opacity: 0;\n }\n\n .tippy-box[data-theme~='floating-panel'][data-inertia][data-state='visible'] {\n transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-content {\n position: relative;\n z-index: 1;\n padding: 0;\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {\n fill: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .nile-floating-panel__body {\n display: flex;\n flex-direction: column;\n height: auto;\n min-width: var(--nile-width-352px, var(--ng-width-80));\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .nile-floating-panel__title {\n display: block;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: var(--nile-spacing-one-by-five-x, var(--ng-spacing-none));\n }\n\n .nile-floating-panel__title:empty {\n display: none;\n }\n\n .nile-floating-panel__action {\n align-self: end;\n display: inline;\n }\n\n .nile-floating-panel__action:empty {\n display: none;\n }\n\n .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow { bottom: 0; }\n .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow~~:after,\n .tippy-box[data-theme~='floating-panel'][data-placement^='top']~~ > ~~.tippy-~~svg~~-arrow~~ ~~> svg~~ {\n top: ~~16px~~;\n transform: rotate(180deg);\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow { top: 0; }\n .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow > svg { bottom: ~~16px~~; }\n .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow { right: 0; }\n .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow~~:after,\n .tippy-box[data-theme~='floating-panel'][data-placement^='left']~~ > ~~.tippy-~~svg~~-arrow~~ ~~> svg~~ {\n transform: rotate(90deg);\n top: calc(50% - ~~3px~~);\n left: 11px;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow { left: 0; }\n .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow~~:after,\n .tippy-box[data-theme~='floating-panel'][data-placement^='right']~~ > ~~.tippy-~~svg~~-arrow~~ ~~> svg~~ {\n transform: rotate(-90deg);\n top: calc(50% - ~~3px~~);\n right: 11px;\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {\n width: 16px;\n height: 16px;\n text-align: initial;\n position: absolute;\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg {\n position: absolute;\n }\n\n .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow {\n bottom: 0;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow:before {\n bottom: -7px;\n border-width: 8px 8px 0;\n border-top-color: initial;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow {\n top: 0;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow:before {\n top: -7px;\n border-width: 0 8px 8px;\n border-bottom-color: initial;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow {\n right: 0;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow:before {\n right: -7px;\n border-width: 8px 0 8px 8px;\n border-left-color: initial;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow {\n left: 0;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow:before {\n left: -7px;\n border-width: 8px 8px 8px 0;\n border-right-color: initial;\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {\n width: 16px;\n height: 16px;\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n`;\n\nexport function injectGlobalFloatingPanelStyles(): void {\n if (typeof document === 'undefined') return;\n\n const STYLE_ID = 'nile-floating-panel-styles';\n if (document.getElementById(STYLE_ID)) return;\n\n const style = document.createElement('style');\n style.id = STYLE_ID;\n style.textContent = styles.cssText;\n document.head?.appendChild(style);\n}\n\ninjectGlobalFloatingPanelStyles();\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-floating-panel.css.js","sourceRoot":"","sources":["../../../src/nile-floating-panel/nile-floating-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8LxB,CAAC;AAEF,MAAM,UAAU,+BAA+B;IAC7C,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IAE5C,MAAM,QAAQ,GAAG,4BAA4B,CAAC;IAC9C,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAE9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;IACnC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;AACpC,CAAC;AAED,+BAA+B,EAAE,CAAC;AAElC,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/*\n Copyright Aquera Inc 2025\n \n This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { css } from 'lit';\n\nexport const styles = css`\n nile-floating-panel {\n display: inline-block;\n }\n\n .tippy-box[data-theme~='floating-panel'] {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n padding: 0;\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n line-height: 1.4;\n white-space: normal;\n outline: 0;\n transition-property: transform, visibility, opacity;\n }\n\n .tippy-box[data-theme~='floating-panel'][data-animation='fade'][data-state='hidden'] {\n opacity: 0;\n }\n\n .tippy-box[data-theme~='floating-panel'][data-inertia][data-state='visible'] {\n transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-content {\n position: relative;\n z-index: 1;\n padding: 0;\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {\n fill: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .nile-floating-panel__body {\n display: flex;\n flex-direction: column;\n height: auto;\n min-width: var(--nile-width-352px, var(--ng-width-80));\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .nile-floating-panel__title {\n display: block;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: var(--nile-spacing-one-by-five-x, var(--ng-spacing-none));\n }\n\n .nile-floating-panel__title:empty {\n display: none;\n }\n\n .nile-floating-panel__action {\n align-self: end;\n display: inline;\n }\n\n .nile-floating-panel__action:empty {\n display: none;\n }\n\n / Offset arrow by 0.5px so its outline aligns with the panel border and its fill fully covers it. /\n .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow { bottom: 0; }\n .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow > svg {\n top: 15.5px;\n transform: rotate(180deg);\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow { top: 0; }\n .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow > svg { bottom: 15.5px; }\n .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow { right: 0; }\n .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow > svg {\n transform: rotate(90deg);\n top: calc(50% - 3.5px);\n left: 11px;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow { left: 0; }\n .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow > svg {\n transform: rotate(-90deg);\n top: calc(50% - 3.5px);\n right: 11px;\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {\n width: 16px;\n height: 16px;\n text-align: initial;\n position: absolute;\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg {\n position: absolute;\n overflow: visible;\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg > .nile-floating-panel__arrow-outline {\n fill: none;\n stroke: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));\n stroke-width: 1;\n vector-effect: non-scaling-stroke;\n }\n\n .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow {\n bottom: 0;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow:before {\n bottom: -7px;\n border-width: 8px 8px 0;\n border-top-color: initial;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow:after {\n bottom: -8px;\n left: -1px;\n border-width: 9px 9px 0;\n border-top-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));\n clip-path: inset(2px 0 0 0);\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow {\n top: 0;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow:before {\n top: -7px;\n border-width: 0 8px 8px;\n border-bottom-color: initial;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow:after {\n top: -8px;\n left: -1px;\n border-width: 0 9px 9px;\n border-bottom-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));\n clip-path: inset(0 0 2px 0);\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow {\n right: 0;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow:before {\n right: -7px;\n border-width: 8px 0 8px 8px;\n border-left-color: initial;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow:after {\n right: -8px;\n top: -1px;\n border-width: 9px 0 9px 9px;\n border-left-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));\n clip-path: inset(0 0 0 2px);\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow {\n left: 0;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow:before {\n left: -7px;\n border-width: 8px 8px 8px 0;\n border-right-color: initial;\n }\n .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow:after {\n left: -8px;\n top: -1px;\n border-width: 9px 9px 9px 0;\n border-right-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));\n clip-path: inset(0 2px 0 0);\n }\n\n .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {\n width: 16px;\n height: 16px;\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n / :after is a 1px-larger triangle in the border colour, stacked behind :before, so the border continues around the arrow. */\n .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before,\n .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before { z-index: 1; }\n .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:after { z-index: 0; }\n`;\n\nexport function injectGlobalFloatingPanelStyles(): void {\n if (typeof document === 'undefined') return;\n\n const STYLE_ID = 'nile-floating-panel-styles';\n if (document.getElementById(STYLE_ID)) return;\n\n const style = document.createElement('style');\n style.id = STYLE_ID;\n style.textContent = styles.cssText;\n document.head?.appendChild(style);\n}\n\ninjectGlobalFloatingPanelStyles();\n\nexport default [styles];\n"]}

package/dist/src/nile-floating-panel/nile-floating-panel.js CHANGED Viewed

@@ -12,6 +12,18 @@ import NileElement from '../internal/nile-element';
 import tippy, { roundArrow, followCursor as followCursorPlugin, } from 'tippy.js';
 import { parseFollowCursor, parseDuration, } from '../nile-lite-tooltip/utils';
 import { VisibilityManager } from '../utilities/visibility-manager.js';
+const TIPPY_ROUND_ARROW = /^<svg width="(\d+)" height="(\d+)"[^>]*><path d="(.+?)H0z"/.exec(roundArrow);
+const NILE_ROUND_ARROW = (() => {
+    if (!TIPPY_ROUND_ARROW)
+        return roundArrow;
+    const [, rawWidth, rawHeight, curve] = TIPPY_ROUND_ARROW;
+    const width = Number(rawWidth);
+    const height = Number(rawHeight) + 1; // + the skirt that covers the border
+    return (`<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">` +
+        `<path d="${curve}V${height}H0Z"></path>` +
+        `<path class="nile-floating-panel__arrow-outline" d="${curve}"></path>` +
+        `</svg>`);
+})();
 /**
  * Nile floating-panel component.
  *
@@ -363,7 +375,7 @@ let NileFloatingPanel = NileFloatingPanel_1 = class NileFloatingPanel extends Ni
     // ─── Tippy management ───
     _resolveArrow() {
         switch (this.arrow) {
-            case 'round': return roundArrow;
+            case 'round': return NILE_ROUND_ARROW;
             case 'none': return false;
             default: return true;
         }