improved resize experience

Signed-off-by: Maximilian Inckmann <[email protected]>

Author: maximiliani

packages/react-library/lib/components/stencil-generated/components.ts

@@ -7,174 +7,144 @@
 
 /* eslint-disable */
 
-import {
-  ColorHighlight as ColorHighlightElement,
-  defineCustomElement as defineColorHighlight,
-} from '@kit-data-manager/pid-component/dist/components/color-highlight.js';
-import {
-  CopyButton as CopyButtonElement,
-  defineCustomElement as defineCopyButton,
-} from '@kit-data-manager/pid-component/dist/components/copy-button.js';
-import {
-  defineCustomElement as defineJsonViewer,
-  JsonViewer as JsonViewerElement,
-} from '@kit-data-manager/pid-component/dist/components/json-viewer.js';
-import {
-  defineCustomElement as defineLocaleVisualization,
-  LocaleVisualization as LocaleVisualizationElement,
-} from '@kit-data-manager/pid-component/dist/components/locale-visualization.js';
-import {
-  defineCustomElement as definePidActions,
-  PidActions as PidActionsElement,
-} from '@kit-data-manager/pid-component/dist/components/pid-actions.js';
-import {
-  defineCustomElement as definePidCollapsible,
-  PidCollapsible as PidCollapsibleElement,
-} from '@kit-data-manager/pid-component/dist/components/pid-collapsible.js';
-import {
-  defineCustomElement as definePidComponent,
-  PidComponent as PidComponentElement,
-} from '@kit-data-manager/pid-component/dist/components/pid-component.js';
-import {
-  defineCustomElement as definePidDataTable,
-  PidDataTable as PidDataTableElement,
-} from '@kit-data-manager/pid-component/dist/components/pid-data-table.js';
-import {
-  defineCustomElement as definePidPagination,
-  PidPagination as PidPaginationElement,
-} from '@kit-data-manager/pid-component/dist/components/pid-pagination.js';
-import {
-  defineCustomElement as definePidTooltip,
-  PidTooltip as PidTooltipElement,
-} from '@kit-data-manager/pid-component/dist/components/pid-tooltip.js';
+import { ColorHighlight as ColorHighlightElement, defineCustomElement as defineColorHighlight } from "@kit-data-manager/pid-component/dist/components/color-highlight.js";
+import { CopyButton as CopyButtonElement, defineCustomElement as defineCopyButton } from "@kit-data-manager/pid-component/dist/components/copy-button.js";
+import { JsonViewer as JsonViewerElement, defineCustomElement as defineJsonViewer } from "@kit-data-manager/pid-component/dist/components/json-viewer.js";
+import { LocaleVisualization as LocaleVisualizationElement, defineCustomElement as defineLocaleVisualization } from "@kit-data-manager/pid-component/dist/components/locale-visualization.js";
+import { PidActions as PidActionsElement, defineCustomElement as definePidActions } from "@kit-data-manager/pid-component/dist/components/pid-actions.js";
+import { PidCollapsible as PidCollapsibleElement, defineCustomElement as definePidCollapsible } from "@kit-data-manager/pid-component/dist/components/pid-collapsible.js";
+import { PidComponent as PidComponentElement, defineCustomElement as definePidComponent } from "@kit-data-manager/pid-component/dist/components/pid-component.js";
+import { PidDataTable as PidDataTableElement, defineCustomElement as definePidDataTable } from "@kit-data-manager/pid-component/dist/components/pid-data-table.js";
+import { PidPagination as PidPaginationElement, defineCustomElement as definePidPagination } from "@kit-data-manager/pid-component/dist/components/pid-pagination.js";
+import { PidTooltip as PidTooltipElement, defineCustomElement as definePidTooltip } from "@kit-data-manager/pid-component/dist/components/pid-tooltip.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 
 export type ColorHighlightEvents = NonNullable<unknown>;
 
 export const ColorHighlight: StencilReactComponent<ColorHighlightElement, ColorHighlightEvents> = /*@__PURE__*/ createComponent<ColorHighlightElement, ColorHighlightEvents>({
-  tagName: 'color-highlight',
-  elementClass: ColorHighlightElement,
-  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-  react: React,
-  events: {} as ColorHighlightEvents,
-  defineCustomElement: defineColorHighlight
+    tagName: 'color-highlight',
+    elementClass: ColorHighlightElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as ColorHighlightEvents,
+    defineCustomElement: defineColorHighlight
 });
 
-export type CopyButtonEvents = NonNulla,ble<unknown>;
+export type CopyButtonEvents = NonNullable<unknown>;
 
 export const CopyButton: StencilReactComponent<CopyButtonElement, CopyButtonEvents> = /*@__PURE__*/ createComponent<CopyButtonElement, CopyButtonEvents>({
-  tagName: 'copy-button',
-  elementClass: CopyButtonElement,
-  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-  react: React,
-  events: {} as CopyButtonEvents,
-  defineCustomElement: defineCopyButton,
+    tagName: 'copy-button',
+    elementClass: CopyButtonElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as CopyButtonEvents,
+    defineCustomElement: defineCopyButton
 });
 
 export type JsonViewerEvents = NonNullable<unknown>;
 
 export const JsonViewer: StencilReactComponent<JsonViewerElement, JsonViewerEvents> = /*@__PURE__*/ createComponent<JsonViewerElement, JsonViewerEvents>({
-  tagName: 'json-viewer',
-  elementClass: JsonViewerElement,
-  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-  react: React,
-  events: {} as JsonViewerEvents,
-  defineCustomElement: defineJsonViewer,
+    tagName: 'json-viewer',
+    elementClass: JsonViewerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as JsonViewerEvents,
+    defineCustomElement: defineJsonViewer
 });
 
 export type LocaleVisualizationEvents = NonNullable<unknown>;
 
 export const LocaleVisualization: StencilReactComponent<LocaleVisualizationElement, LocaleVisualizationEvents> = /*@__PURE__*/ createComponent<LocaleVisualizationElement, LocaleVisualizationEvents>({
-  tagName: 'locale-visualization',
-  elementClass: LocaleVisualizationElement,
-  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-  react: React,
-  events: {} as LocaleVisualizationEvents,
-  defineCustomElement: defineLocaleVisualization,
+    tagName: 'locale-visualization',
+    elementClass: LocaleVisualizationElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as LocaleVisualizationEvents,
+    defineCustomElement: defineLocaleVisualization
 });
 
 export type PidActionsEvents = NonNullable<unknown>;
 
 export const PidActions: StencilReactComponent<PidActionsElement, PidActionsEvents> = /*@__PURE__*/ createComponent<PidActionsElement, PidActionsEvents>({
-  tagName: 'pid-actions',
-  elementClass: PidActionsElement,
-  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-  react: React,
-  events: {} as PidActionsEvents,
-  defineCustomElement: definePidActions,
+    tagName: 'pid-actions',
+    elementClass: PidActionsElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as PidActionsEvents,
+    defineCustomElement: definePidActions
 });
 
 export type PidCollapsibleEvents = {
-  onCollapsibleToggle: EventName<CustomEvent<boolean>>,
-  onContentHeightChange: EventName<CustomEvent<{ maxHeight: number }>>
+    onCollapsibleToggle: EventName<CustomEvent<boolean>>,
+    onContentHeightChange: EventName<CustomEvent<{ maxHeight: number }>>
 };
 
 export const PidCollapsible: StencilReactComponent<PidCollapsibleElement, PidCollapsibleEvents> = /*@__PURE__*/ createComponent<PidCollapsibleElement, PidCollapsibleEvents>({
-  tagName: 'pid-collapsible',
-  elementClass: PidCollapsibleElement,
-  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-  react: React,
-  events: {
-    onCollapsibleToggle: 'collapsibleToggle',
-    onContentHeightChange: 'contentHeightChange',
-  } as PidCollapsibleEvents,
-  defineCustomElement: definePidCollapsible,
+    tagName: 'pid-collapsible',
+    elementClass: PidCollapsibleElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onCollapsibleToggle: 'collapsibleToggle',
+        onContentHeightChange: 'contentHeightChange'
+    } as PidCollapsibleEvents,
+    defineCustomElement: definePidCollapsible
 });
 
 export type PidComponentEvents = NonNullable<unknown>;
 
 export const PidComponent: StencilReactComponent<PidComponentElement, PidComponentEvents> = /*@__PURE__*/ createComponent<PidComponentElement, PidComponentEvents>({
-  tagName: 'pid-component',
-  elementClass: PidComponentElement,
-  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-  react: React,
-  events: {} as PidComponentEvents,
-  defineCustomElement: definePidComponent,
+    tagName: 'pid-component',
+    elementClass: PidComponentElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as PidComponentEvents,
+    defineCustomElement: definePidComponent
 });
 
 export type PidDataTableEvents = {
-  onPageChange: EventName<CustomEvent<number>>,
-  onItemsPerPageChange: EventName<CustomEvent<number>>
+    onPageChange: EventName<CustomEvent<number>>,
+    onItemsPerPageChange: EventName<CustomEvent<number>>
 };
 
 export const PidDataTable: StencilReactComponent<PidDataTableElement, PidDataTableEvents> = /*@__PURE__*/ createComponent<PidDataTableElement, PidDataTableEvents>({
-  tagName: 'pid-data-table',
-  elementClass: PidDataTableElement,
-  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-  react: React,
-  events: {
-    onPageChange: 'pageChange',
-    onItemsPerPageChange: 'itemsPerPageChange',
-  } as PidDataTableEvents,
-  defineCustomElement: definePidDataTable,
+    tagName: 'pid-data-table',
+    elementClass: PidDataTableElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onPageChange: 'pageChange',
+        onItemsPerPageChange: 'itemsPerPageChange'
+    } as PidDataTableEvents,
+    defineCustomElement: definePidDataTable
 });
 
 export type PidPaginationEvents = {
-  onPageChange: EventName<CustomEvent<number>>,
-  onItemsPerPageChange: EventName<CustomEvent<number>>
+    onPageChange: EventName<CustomEvent<number>>,
+    onItemsPerPageChange: EventName<CustomEvent<number>>
 };
 
 export const PidPagination: StencilReactComponent<PidPaginationElement, PidPaginationEvents> = /*@__PURE__*/ createComponent<PidPaginationElement, PidPaginationEvents>({
-  tagName: 'pid-pagination',
-  elementClass: PidPaginationElement,
-  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-  react: React,
-  events: {
-    onPageChange: 'pageChange',
-    onItemsPerPageChange: 'itemsPerPageChange',
-  } as PidPaginationEvents,
-  defineCustomElement: definePidPagination,
+    tagName: 'pid-pagination',
+    elementClass: PidPaginationElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onPageChange: 'pageChange',
+        onItemsPerPageChange: 'itemsPerPageChange'
+    } as PidPaginationEvents,
+    defineCustomElement: definePidPagination
 });
 
 export type PidTooltipEvents = { onTooltipExpansionChange: EventName<CustomEvent<{ expand: boolean; requiredHeight: number }>> };
 
 export const PidTooltip: StencilReactComponent<PidTooltipElement, PidTooltipEvents> = /*@__PURE__*/ createComponent<PidTooltipElement, PidTooltipEvents>({
-  tagName: 'pid-tooltip',
-  elementClass: PidTooltipElement,
-  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-  react: React,
-  events: { onTooltipExpansionChange: 'tooltipExpansionChange' } as PidTooltipEvents,
-  defineCustomElement: definePidTooltip,
+    tagName: 'pid-tooltip',
+    elementClass: PidTooltipElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onTooltipExpansionChange: 'tooltipExpansionChange' } as PidTooltipEvents,
+    defineCustomElement: definePidTooltip
 });

packages/stencil-library/src/components.d.ts

@@ -140,9 +140,9 @@ export namespace Components {
          */
         "open": boolean;
         /**
-          * Public method to recalculate content dimensions Can be called externally, for example when pagination changes
+          * Public method to recalculate content dimensions Can be called externally, for example when pagination changes Optimized for better performance
          */
-        "recalculateContentDimensions": () => Promise<{ contentWidth: number; contentHeight: number; maxWidth: number; maxHeight: number; }>;
+        "recalculateContentDimensions": () => Promise<any>;
         /**
           * Whether to show the footer section
           * @default false

packages/stencil-library/src/components/pid-collapsible/collapsible.css

@@ -30,6 +30,8 @@ pid-collapsible.resize-both {
   resize: both !important;
   overflow: auto !important;
   max-width: 100% !important; /* Prevent exceeding parent container */
+  will-change: width, height; /* Hint to the browser to optimize for resizing */
+  transition: none !important; /* Disable transitions during resize for better performance */
 }
 
 /*
@@ -129,6 +131,12 @@ pid-collapsible.resize-both::after {
     margin-bottom: 1px; /* This tiny margin helps with layout stability */
   }
 
+  /* Optimization class for resize operations */
+  pid-collapsible.resizing {
+    pointer-events: none; /* Prevent interaction during resize for better performance */
+    contain: layout size; /* CSS containment for better performance */
+  }
+
   /* Ensure collapsed state in Safari doesn't affect text flow */
   pid-collapsible:not(.resize-both)::after {
     content: '';