@sebgroup/green-core 1.2.4 → 1.3.0

package/components/dropdown/dropdown.d.ts

@@ -67,6 +67,15 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * ```
      */
     searchFilter: (q: string, o: GdsOption) => boolean;
+    /**
+     * Whether the popover should sync its width to the trigger button. When this is
+     * set to `true`, the popover will always have the same width as the trigger button.
+     *
+     * By default, line-breaks will be applied to the option content if it is wider than
+     * the popover width. If you use this option, make sure to verify that your options
+     * are still readable and apply appropriate custom layout or truncation if neccecary.
+     */
+    syncPopoverWidth: boolean;
     private elTriggerBtn;
     private elTriggerBtnAsync;
     private elListbox;

package/index.js

@@ -139,7 +139,7 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-001f73";
+var VER_SUFFIX = "-f38327";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -530,7 +530,7 @@ var GdsOption = class extends Focusable(LitElement2) {
     }
   }
   render() {
-    const isMultiple = this.parentElement.multiple;
+    const isMultiple = this.parentElement?.multiple;
     const checkbox = html2`<span
       class="checkbox ${classMap({ checked: this.selected })}"
     ></span>`;
@@ -755,10 +755,20 @@ function isHTMLElement(value) {
 // libs/core/src/primitives/popover/popover.styles.ts
 import { css as css3 } from "lit";
 var style3 = css3`
-  :host {
-    position: absolute;
-    background-color: white;
-    box-shadow: 0 1rem 1rem 1rem rgba(0, 0, 0, 0.1);
+  :host([open]) dialog {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+  }
+
+  dialog {
+    inset: auto;
+    position: fixed;
+    overflow: hidden;
+    padding: 0px;
+    box-sizing: border-box;
+    border-width: 0;
+    right: 0;
   }
 `;
 var popover_styles_default = style3;
@@ -775,6 +785,7 @@ var GdsPopover = class extends LitElement3 {
     this.triggerRef = Promise.resolve(void 0);
     this.label = void 0;
     this.placement = "bottom-start";
+    this.calcMaxWidth = (_referenceEl) => `auto`;
     this._trigger = void 0;
     this._isVirtKbVisible = false;
     // A reference to the dialog element used to make the popover modal
@@ -956,7 +967,8 @@ registerAutoPositioning_fn = function() {
       ({ x, y }) => Object.assign(floatingEl.style, {
         left: `${x}px`,
         top: `${y}px`,
-        minWidth: `${referenceEl.offsetWidth}px`
+        minWidth: `${referenceEl.offsetWidth}px`,
+        maxWidth: `${this.calcMaxWidth(referenceEl)}`
       })
     );
   }));
@@ -977,6 +989,9 @@ __decorateClass([
 __decorateClass([
   property3()
 ], GdsPopover.prototype, "placement", 2);
+__decorateClass([
+  property3()
+], GdsPopover.prototype, "calcMaxWidth", 2);
 __decorateClass([
   state()
 ], GdsPopover.prototype, "_trigger", 2);
@@ -1106,6 +1121,7 @@ var style4 = css4`
     color: white;
     padding: 0.7rem 2rem;
     margin: 0.5rem 0;
+    box-sizing: border-box;
   }
 `;
 var dropdown_styles_default = style4;
@@ -1129,6 +1145,7 @@ var GdsDropdown = class extends GdsFormControlElement {
     this.multiple = false;
     this.compareWith = (a, b) => a === b;
     this.searchFilter = (q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase());
+    this.syncPopoverWidth = false;
     // Private members
     __privateAdd(this, _optionElements, void 0);
     /**
@@ -1265,6 +1282,7 @@ var GdsDropdown = class extends GdsFormControlElement {
         .label=${this.label}
         .open=${this.open}
         .triggerRef=${this.elTriggerBtnAsync}
+        .calcMaxWidth=${(trigger) => this.syncPopoverWidth ? `${trigger.offsetWidth}px` : `auto`}
         @gds-ui-state=${(e) => this.open = e.detail.open}
       >
         ${when2(
@@ -1396,6 +1414,9 @@ __decorateClass([
 __decorateClass([
   property5()
 ], GdsDropdown.prototype, "searchFilter", 2);
+__decorateClass([
+  property5({ type: Boolean })
+], GdsDropdown.prototype, "syncPopoverWidth", 2);
 __decorateClass([
   query("#trigger")
 ], GdsDropdown.prototype, "elTriggerBtn", 2);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/popover/popover.d.ts

@@ -33,6 +33,11 @@ export declare class GdsPopover extends LitElement {
      * Accepts any of the placements supported by Floating UI.
      */
     placement: Placement;
+    /**
+     * A callback that returns the maximum width of the popover.
+     * By default, the popover maxWidth will be set to `auto` and will grow as needed.
+     */
+    calcMaxWidth: (_referenceEl: HTMLElement) => string;
     private _trigger;
     private _isVirtKbVisible;
     private _handleTriggerRefChanged;

package/transitional-styles.js

@@ -3800,6 +3800,7 @@ a.button.tertiary.danger:focus-visible {
 }
 
 :host([open]) dialog {
+  box-sizing: border-box;
   opacity: 1;
   transform: translate3d(0, 0, 0);
   visibility: visible;
@@ -6356,7 +6357,7 @@ function register4() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-001f73";
+var VER_SUFFIX = "-f38327";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {