@sebgroup/green-core 1.2.3 → 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 = "-b059fe";
+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>`;
@@ -585,6 +585,7 @@ GdsOption = __decorateClass([
 // libs/core/src/primitives/popover/popover.ts
 import { LitElement as LitElement3, html as html3, unsafeCSS } from "lit";
 import { property as property3, state } from "lit/decorators.js";
+import { classMap as classMap2 } from "lit/directives/class-map.js";
 import { msg } from "@lit/localize";
 import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
 import {
@@ -754,16 +755,26 @@ 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;
 
 // libs/core/src/primitives/popover/popover.ts
-var _dialogElementRef, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _autoPositionCleanup, _registerAutoPositioning, registerAutoPositioning_fn, _triggerKeyDownListener, _focusFirstSlottedChild, _clickOutsideListener;
+var _dialogElementRef, _autoPositionCleanupFn, _isMobileViewport, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _registerAutoPositioning, registerAutoPositioning_fn, _triggerKeyDownListener, _focusFirstSlottedChild, _clickOutsideListener;
 var GdsPopover = class extends LitElement3 {
   constructor() {
     super(...arguments);
@@ -774,15 +785,20 @@ 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
     __privateAdd(this, _dialogElementRef, createRef2());
+    // A function that removes the Floating UI auto positioning. This gets called when we switch to mobile view layout.
+    __privateAdd(this, _autoPositionCleanupFn, void 0);
+    __privateAdd(this, _isMobileViewport, false);
     __privateAdd(this, _handleCloseButton, (e) => {
       e.stopPropagation();
       e.preventDefault();
       this.open = false;
       setTimeout(() => this._trigger?.focus(), 250);
     });
-    __privateAdd(this, _autoPositionCleanup, void 0);
     /**
      * ArrowDown on the trigger element will trigger the popover by default, and escape will close it.
      */
@@ -836,13 +852,27 @@ var GdsPopover = class extends LitElement3 {
         e.stopImmediatePropagation();
       }
     });
+    this.addEventListener("focusin", (e) => {
+      const t = e.target;
+      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+        this._isVirtKbVisible = true;
+      } else {
+        this._isVirtKbVisible = false;
+      }
+    });
+    this.addEventListener("blurin", (_) => {
+      this._isVirtKbVisible = false;
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateMethod(this, _unregisterTriggerEvents, unregisterTriggerEvents_fn).call(this);
   }
   render() {
-    return html3`<dialog ${ref2(__privateGet(this, _dialogElementRef))}>
+    return html3`<dialog
+      class="${classMap2({ "v-kb-visible": this._isVirtKbVisible })}"
+      ${ref2(__privateGet(this, _dialogElementRef))}
+    >
       <header>
         <h2>${this.label}</h2>
         <button
@@ -888,10 +918,12 @@ var GdsPopover = class extends LitElement3 {
   }
   _handleMobileLayout(matches) {
     var _a;
+    __privateSet(this, _isMobileViewport, matches);
     if (matches) {
-      (_a = __privateGet(this, _autoPositionCleanup)) == null ? void 0 : _a.call(this);
+      (_a = __privateGet(this, _autoPositionCleanupFn)) == null ? void 0 : _a.call(this);
       __privateGet(this, _dialogElementRef).value?.style.removeProperty("left");
       __privateGet(this, _dialogElementRef).value?.style.removeProperty("top");
+      __privateGet(this, _dialogElementRef).value?.style.removeProperty("minWidth");
       this.updateComplete.then(() => {
         if (this.open)
           __privateGet(this, _dialogElementRef).value?.showModal();
@@ -904,6 +936,8 @@ var GdsPopover = class extends LitElement3 {
   }
 };
 _dialogElementRef = new WeakMap();
+_autoPositionCleanupFn = new WeakMap();
+_isMobileViewport = new WeakMap();
 _handleCloseButton = new WeakMap();
 _registerTriggerEvents = new WeakSet();
 registerTriggerEvents_fn = function() {
@@ -913,16 +947,18 @@ _unregisterTriggerEvents = new WeakSet();
 unregisterTriggerEvents_fn = function() {
   var _a;
   this._trigger?.removeEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
-  (_a = __privateGet(this, _autoPositionCleanup)) == null ? void 0 : _a.call(this);
+  (_a = __privateGet(this, _autoPositionCleanupFn)) == null ? void 0 : _a.call(this);
 };
-_autoPositionCleanup = new WeakMap();
 _registerAutoPositioning = new WeakSet();
 registerAutoPositioning_fn = function() {
   const referenceEl = this._trigger;
   const floatingEl = __privateGet(this, _dialogElementRef).value;
-  if (!referenceEl || !floatingEl)
+  if (!referenceEl || !floatingEl || __privateGet(this, _isMobileViewport))
     return;
-  __privateSet(this, _autoPositionCleanup, autoUpdate(referenceEl, floatingEl, () => {
+  if (__privateGet(this, _autoPositionCleanupFn)) {
+    __privateGet(this, _autoPositionCleanupFn).call(this);
+  }
+  __privateSet(this, _autoPositionCleanupFn, autoUpdate(referenceEl, floatingEl, () => {
     computePosition(referenceEl, floatingEl, {
       placement: this.placement,
       middleware: [offset(8), flip(), topLayerOverTransforms()],
@@ -931,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)}`
       })
     );
   }));
@@ -952,9 +989,15 @@ __decorateClass([
 __decorateClass([
   property3()
 ], GdsPopover.prototype, "placement", 2);
+__decorateClass([
+  property3()
+], GdsPopover.prototype, "calcMaxWidth", 2);
 __decorateClass([
   state()
 ], GdsPopover.prototype, "_trigger", 2);
+__decorateClass([
+  state()
+], GdsPopover.prototype, "_isVirtKbVisible", 2);
 __decorateClass([
   watch("triggerRef")
 ], GdsPopover.prototype, "_handleTriggerRefChanged", 1);
@@ -1078,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;
@@ -1101,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);
     /**
@@ -1237,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(
@@ -1368,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);
@@ -1396,7 +1445,7 @@ GdsDropdown = __decorateClass([
 // libs/core/src/components/context-menu/context-menu.ts
 import { LitElement as LitElement6 } from "lit";
 import { msg as msg3 } from "@lit/localize";
-import { classMap as classMap2 } from "lit-html/directives/class-map.js";
+import { classMap as classMap3 } from "lit-html/directives/class-map.js";
 import { property as property6, queryAsync as queryAsync2 } from "lit/decorators.js";
 
 // libs/core/src/primitives/menu/menu.ts
@@ -1462,7 +1511,7 @@ var GdsContextMenu = class extends LitElement6 {
   render() {
     return html`<button
         id="trigger"
-        class="ghost border-0 small ${classMap2({ highlighted: this.open })}"
+        class="ghost border-0 small ${classMap3({ highlighted: this.open })}"
         aria-label="${this.buttonLabel}"
         aria-haspopup="menu"
         aria-controls="menu"

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.3",
+  "version": "1.3.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/popover/popover.d.ts

@@ -33,7 +33,13 @@ 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;
     private _handleTriggerChanged;
     connectedCallback(): void;

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;
@@ -3808,13 +3809,16 @@ a.button.tertiary.danger:focus-visible {
 header {
   border-bottom: 1px solid var(--border-color);
   display: flex;
-  padding: 0.5rem 0.75rem;
+  padding: 0.25rem 0.75rem;
 }
 @media (min-width: 36em) {
   header {
     display: none;
   }
 }
+header button.close {
+  margin: -0.25rem;
+}
 
 header h2 {
   flex-grow: 1;
@@ -3885,7 +3889,13 @@ dialog .close {
 }
 @media (max-width: 35.98em) {
   dialog {
-    border-radius: 1rem;
+    border-radius: 0.5rem;
+    max-height: 80svh;
+  }
+  dialog.v-kb-visible {
+    inset-block-end: auto;
+    max-height: 50svh;
+    top: 1rem;
   }
 }
 @media (min-width: 36em) {
@@ -6347,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 = "-b059fe";
+var VER_SUFFIX = "-f38327";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {