Skip to content

Commit f361704

Browse files
maximilianimaximiliani
committed
fixed openByDefault logic
Signed-off-by: Maximilian Inckmann <[email protected]>
1 parent f9a570f commit f361704

File tree

7 files changed

+73
-78
lines changed

7 files changed

+73
-78
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,6 @@ export const PidCollapsible: StencilReactComponent<PidCollapsibleElement, PidCol
9696
open: 'open',
9797
emphasize: 'emphasize',
9898
darkMode: 'dark-mode',
99-
expanded: 'expanded',
10099
initialWidth: 'initial-width',
101100
initialHeight: 'initial-height',
102101
lineHeight: 'line-height',

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -116,11 +116,6 @@ export namespace Components {
116116
* @default false
117117
*/
118118
"emphasize": boolean;
119-
/**
120-
* Whether the component is in expanded mode (full size)
121-
* @default false
122-
*/
123-
"expanded": boolean;
124119
/**
125120
* Initial height when expanded
126121
*/
@@ -135,7 +130,8 @@ export namespace Components {
135130
*/
136131
"lineHeight": number;
137132
/**
138-
* Whether the collapsible is open by default
133+
* Whether the collapsible is open
134+
* @description Controls whether the component is expanded (opened) or collapsed
139135
* @default false
140136
*/
141137
"open": boolean;
@@ -575,11 +571,6 @@ declare namespace LocalJSX {
575571
* @default false
576572
*/
577573
"emphasize"?: boolean;
578-
/**
579-
* Whether the component is in expanded mode (full size)
580-
* @default false
581-
*/
582-
"expanded"?: boolean;
583574
/**
584575
* Initial height when expanded
585576
*/
@@ -602,7 +593,8 @@ declare namespace LocalJSX {
602593
*/
603594
"onContentHeightChange"?: (event: PidCollapsibleCustomEvent<{ maxHeight: number }>) => void;
604595
/**
605-
* Whether the collapsible is open by default
596+
* Whether the collapsible is open
597+
* @description Controls whether the component is expanded (opened) or collapsed
606598
* @default false
607599
*/
608600
"open"?: boolean;

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ pid-collapsible.resize-both::after {
135135
display: inline-block;
136136
vertical-align: top;
137137
margin-bottom: 1px; /* This tiny margin helps with layout stability */
138+
width: auto !important; /* Ensure width is set correctly for Safari */
138139
}
139140

140141
/* Optimization class for resize operations */
@@ -175,6 +176,15 @@ pid-collapsible.resize-both::after {
175176
background: linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 50%);
176177
z-index: 10;
177178
}
179+
180+
/* Special handling for open-by-default components in Safari */
181+
pid-collapsible[open=true], pid-collapsible[openbydefault=true] {
182+
height: fit-content !important;
183+
width: auto !important;
184+
min-width: 300px !important;
185+
resize: both !important;
186+
overflow: auto !important;
187+
}
178188
}
179189

180190
/*

‎packages/stencil-library/src/components/pid-collapsible/pid-collapsible.stories.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -522,7 +522,6 @@ export const CollapsibleStates: Story = {
522522
title: 'Expanded',
523523
open: true,
524524
emphasize: true,
525-
expanded: true,
526525
showFooter: true,
527526
darkMode: 'system',
528527
description: 'Open, emphasized, expanded state with footer.',

‎packages/stencil-library/src/components/pid-collapsible/pid-collapsible.tsx‎

Lines changed: 32 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,10 @@ export class PidCollapsible {
4949
@Element() el: HTMLElement;
5050

5151
/**
52-
* Whether the collapsible is open by default
52+
* Whether the collapsible is open
53+
* @description Controls whether the component is expanded (opened) or collapsed
5354
*/
54-
@Prop() open: boolean = false;
55+
@Prop({ mutable: true }) open: boolean = false;
5556

5657
/**
5758
* Whether to emphasize the component with border and shadow
@@ -65,11 +66,6 @@ export class PidCollapsible {
6566
*/
6667
@Prop() darkMode: 'light' | 'dark' | 'system' = 'system';
6768

68-
/**
69-
* Whether the component is in expanded mode (full size)
70-
*/
71-
@Prop({ mutable: true }) expanded: boolean = false;
72-
7369
/**
7470
* Initial width when expanded
7571
*/
@@ -136,19 +132,10 @@ export class PidCollapsible {
136132
*/
137133
@Watch('open')
138134
watchOpen() {
139-
this.expanded = this.open;
140135
this.updateAppearance();
141-
}
142136

143-
/**
144-
* Watch for changes in the expanded property
145-
*/
146-
@Watch('expanded')
147-
watchExpanded() {
148-
this.updateAppearance();
149-
150-
// When expanded, ensure content dimensions are properly calculated
151-
if (this.expanded) {
137+
// When open, ensure content dimensions are properly calculated
138+
if (this.open) {
152139
// Use setTimeout to ensure DOM is updated before recalculating
153140
setTimeout(() => {
154141
this.recalculateContentDimensions();
@@ -165,9 +152,6 @@ export class PidCollapsible {
165152
}
166153

167154
componentWillLoad() {
168-
// Initialize state from props
169-
this.expanded = this.open;
170-
171155
// Initialize dimensions but delay actual calculation until content is rendered
172156
if (this.initialWidth) {
173157
this.currentWidth = this.initialWidth;
@@ -195,11 +179,14 @@ export class PidCollapsible {
195179

196180
// When component is initially open, ensure dimensions are properly calculated after rendering
197181
if (this.open) {
182+
// // Make sure expanded state is set correctly for open components
183+
// this.open = true;
184+
198185
// Use a small delay to ensure the DOM is fully rendered
199186
setTimeout(() => {
200187
// Force recalculation of dimensions for open components
201188
this.recalculateContentDimensions();
202-
}, 50);
189+
}, 100);
203190
}
204191

205192
// Add clearfix for Safari - prevent text flow issues
@@ -314,7 +301,7 @@ export class PidCollapsible {
314301
*/
315302
@Method()
316303
public async recalculateContentDimensions() {
317-
if (this.expanded) {
304+
if (this.open) {
318305
// Add a class to optimize rendering during recalculation
319306
this.el.classList.add('resizing');
320307

@@ -404,7 +391,7 @@ export class PidCollapsible {
404391
// Create new observer with debouncing for better performance
405392
this.resizeObserver = new ResizeObserver(entries => {
406393
// Only track dimensions when expanded
407-
if (!this.expanded) return;
394+
if (!this.open) return;
408395

409396
// Get the entry from the first parameter
410397
const entry = entries[0];
@@ -436,7 +423,7 @@ export class PidCollapsible {
436423
});
437424

438425
// Start observing if expanded
439-
if (this.expanded) {
426+
if (this.open) {
440427
this.resizeObserver.observe(this.el);
441428
}
442429
}
@@ -541,7 +528,7 @@ export class PidCollapsible {
541528
// Reset all classes and styles before applying new ones
542529
this.resetStyles();
543530

544-
if (this.expanded) {
531+
if (this.open) {
545532
this.applyExpandedStyles();
546533
} else {
547534
this.applyCollapsedStyles();
@@ -802,19 +789,26 @@ export class PidCollapsible {
802789
}
803790

804791
// Toggle expanded state
805-
this.expanded = !this.expanded;
806-
details.open = this.expanded;
792+
this.open = !this.open;
793+
details.open = this.open;
807794

808795
// Emit event
809-
this.collapsibleToggle.emit(this.expanded);
796+
this.collapsibleToggle.emit(this.open);
810797

811798
// Update appearance
812799
this.updateAppearance();
813800

801+
// For Safari compatibility - ensure content recalculation when expanding
802+
if (this.open && this.isSafari()) {
803+
setTimeout(() => {
804+
this.recalculateContentDimensions();
805+
}, 50);
806+
}
807+
814808
// Ensure consistent state and reset flag
815809
setTimeout(() => {
816-
if (details.open !== this.expanded) {
817-
details.open = this.expanded;
810+
if (details.open !== this.open) {
811+
details.open = this.open;
818812
}
819813
setTimeout(() => {
820814
this.isToggling = false;
@@ -844,7 +838,7 @@ export class PidCollapsible {
844838
}
845839

846840
// Add state-specific classes
847-
if (this.expanded) {
841+
if (this.open) {
848842
baseClasses.push('mb-2', 'max-w-full', 'text-xs', 'block');
849843
} else {
850844
baseClasses.push('my-0', 'text-sm', 'float-left');
@@ -864,7 +858,7 @@ export class PidCollapsible {
864858
private getDetailsClasses() {
865859
const baseClasses = ['group', 'w-full', 'font-sans', 'transition-all', 'duration-200', 'ease-in-out', 'flex', 'flex-col'];
866860

867-
if (this.expanded) {
861+
if (this.open) {
868862
baseClasses.push('h-full', 'overflow-visible');
869863
} else {
870864
baseClasses.push('text-clip', 'overflow-hidden');
@@ -900,7 +894,7 @@ export class PidCollapsible {
900894
'box-border',
901895
];
902896

903-
if (this.expanded) {
897+
if (this.open) {
904898
if (this.isDarkMode) {
905899
baseClasses.push('sticky', 'top-0', 'bg-gray-800', `z-${Z_INDICES.STICKY_ELEMENTS}`, 'border-b', 'border-gray-700', 'px-2', 'py-0', 'overflow-visible', 'backdrop-blur-sm');
906900
} else {
@@ -922,7 +916,7 @@ export class PidCollapsible {
922916
private getContentClasses() {
923917
const baseClasses = ['flex-grow', 'flex', 'flex-col', 'min-h-0'];
924918

925-
if (this.expanded) {
919+
if (this.open) {
926920
baseClasses.push('overflow-auto', 'p-2');
927921
} else {
928922
baseClasses.push('overflow-hidden', 'p-0');
@@ -995,7 +989,7 @@ export class PidCollapsible {
995989
e.stopImmediatePropagation();
996990
}}
997991
>
998-
<span class={`inline-flex h-full items-center gap-1 pr-2 ${this.expanded ? 'flex-nowrap whitespace-nowrap' : 'min-w-0 flex-nowrap overflow-hidden'}`}>
992+
<span class={`inline-flex h-full items-center gap-1 pr-2 ${this.open ? 'flex-nowrap whitespace-nowrap' : 'min-w-0 flex-nowrap overflow-hidden'}`}>
999993
{this.emphasize && (
1000994
<span class="flex h-full flex-shrink-0 items-center">
1001995
<svg
@@ -1014,7 +1008,7 @@ export class PidCollapsible {
10141008
</svg>
10151009
</span>
10161010
)}
1017-
<span class={`${this.expanded ? 'overflow-visible' : 'min-w-0 truncate'} flex h-full items-center`}>
1011+
<span class={`${this.open ? 'overflow-visible' : 'min-w-0 truncate'} flex h-full items-center`}>
10181012
<slot name="summary"></slot>
10191013
</span>
10201014
</span>
@@ -1027,7 +1021,7 @@ export class PidCollapsible {
10271021
<slot></slot>
10281022
</div>
10291023

1030-
{this.showFooter && this.expanded && (
1024+
{this.showFooter && this.open && (
10311025
<div class={footerClasses}>
10321026
{/* Main footer slot for pagination */}
10331027
<div class={`z-50 overflow-visible border-b ${this.isDarkMode ? 'border-gray-700 bg-gray-800' : 'border-gray-100 bg-white'}`}>

‎packages/stencil-library/src/components/pid-collapsible/readme.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,10 @@ with resize capability and cross-browser compatibility
6363
| --------------- | ---------------- | -------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
6464
| `darkMode` | `dark-mode` | The dark mode setting for the component Options: "light", "dark", "system" Default: "system" | `"dark" \| "light" \| "system"` | `'system'` |
6565
| `emphasize` | `emphasize` | Whether to emphasize the component with border and shadow | `boolean` | `false` |
66-
| `expanded` | `expanded` | Whether the component is in expanded mode (full size) | `boolean` | `false` |
6766
| `initialHeight` | `initial-height` | Initial height when expanded | `string` | `undefined` |
6867
| `initialWidth` | `initial-width` | Initial width when expanded | `string` | `undefined` |
6968
| `lineHeight` | `line-height` | Line height for collapsed state | `number` | `24` |
70-
| `open` | `open` | Whether the collapsible is open by default | `boolean` | `false` |
69+
| `open` | `open` | Whether the collapsible is open | `boolean` | `false` |
7170
| `showFooter` | `show-footer` | Whether to show the footer section | `boolean` | `false` |
7271

7372

‎packages/stencil-library/src/components/pid-component/pid-component.tsx‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,6 @@ export class PidComponent {
186186

187187
constructor() {
188188
this.temporarilyEmphasized = this.emphasizeComponent;
189-
this.isExpanded = this.openByDefault || false;
190189
}
191190

192191
componentDidLoad() {
@@ -198,26 +197,11 @@ export class PidComponent {
198197
setTimeout(() => {
199198
const collapsible = this.el.querySelector('pid-collapsible');
200199
if (collapsible) {
201-
// Set open state explicitly based on openByDefault property
202-
if (this.openByDefault) {
203-
(collapsible as any).open = true;
204-
(collapsible as any).expanded = true;
205-
206-
// When openByDefault is true, make sure the display correctly fills the space
207-
// by giving the DOM time to render before recalculating dimensions
208-
setTimeout(() => {
209-
if (typeof (collapsible as any).recalculateContentDimensions === 'function') {
210-
(collapsible as any).recalculateContentDimensions();
211-
}
212-
}, 100);
213-
} else {
214-
// For collapsed state, still recalculate dimensions
215-
if (typeof (collapsible as any).recalculateContentDimensions === 'function') {
216-
(collapsible as any).recalculateContentDimensions();
217-
}
200+
if (typeof (collapsible as any).recalculateContentDimensions === 'function') {
201+
(collapsible as any).recalculateContentDimensions();
218202
}
219203
}
220-
}, 50); // Increase initial timeout to ensure proper rendering
204+
}, 50);
221205
}
222206

223207
/**
@@ -275,17 +259,17 @@ export class PidComponent {
275259

276260
/**
277261
* Toggles the loadSubcomponents property if the current level of subcomponents is not the total level of subcomponents.
278-
* The expanded state is now handled by the pid-collapsible component.
262+
* The open state is handled by the pid-collapsible component.
279263
*/
280264
private toggleSubcomponents = (event?: CustomEvent<boolean>) => {
281-
// Update expanded state based on collapsible event
265+
// Update open state based on collapsible event
282266
if (event) {
283267
// Stop propagation to prevent parent pid-components from collapsing
284268
event.stopPropagation();
285269

286270
this.isExpanded = event.detail;
287271

288-
// Only toggle loadSubcomponents when expanding, not when collapsing
272+
// Only toggle loadSubcomponents when opening, not when collapsing
289273
if (event.detail && !this.hideSubcomponents && this.levelOfSubcomponents - this.currentLevelOfSubcomponents > 0) {
290274
this.loadSubcomponents = true;
291275

@@ -562,6 +546,25 @@ export class PidComponent {
562546
* Renders the component.
563547
*/
564548
render() {
549+
// Set initial expanded state based on openByDefault
550+
if (this.openByDefault) {
551+
if (!this.hideSubcomponents && this.levelOfSubcomponents - this.currentLevelOfSubcomponents > 0) {
552+
this.isExpanded = this.openByDefault;
553+
this.loadSubcomponents = true;
554+
555+
// After loading subcomponents, ensure dimensions are recalculated
556+
setTimeout(() => {
557+
const collapsible = this.el.querySelector('pid-collapsible');
558+
if (collapsible && typeof (collapsible as any).recalculateContentDimensions === 'function') {
559+
(collapsible as any).recalculateContentDimensions();
560+
}
561+
console.log(
562+
`Loaded subcomponents and recalculated dimensions. expanded: ${this.isExpanded}, loadSubcomponents: ${this.loadSubcomponents}, currentLevel: ${this.currentLevelOfSubcomponents}, totalLevels: ${this.levelOfSubcomponents}`,
563+
);
564+
}, 50); // Give it a bit more time for the DOM to update with new content
565+
}
566+
}
567+
565568
return (
566569
<Host class={`relative font-sans`}>
567570
{/* Hidden description for accessibility */}
@@ -631,9 +634,8 @@ export class PidComponent {
631634
)
632635
) : (
633636
<pid-collapsible
634-
open={this.openByDefault}
637+
open={this.isExpanded}
635638
emphasize={this.emphasizeComponent || this.temporarilyEmphasized}
636-
expanded={this.isExpanded}
637639
initialWidth={this.width}
638640
initialHeight={this.height}
639641
lineHeight={this._lineHeight}

0 commit comments

Comments
 (0)