@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-drawer/pds-drawer.js

@@ -0,0 +1,405 @@
+import { Host, h } from "@stencil/core";
+import { closest, containsComposed } from "../../utils/closest";
+import { unwrapReconnectedContent } from "../../utils/reconnected-content";
+// Known selectors for content Pine components portal out of place rather than
+// rendering where they are — pds-tooltip and pds-combobox's dropdown in
+// document.body, pds-popover in the body or the open dialog it's in.
+// A pointerdown landing on one of these is not "outside" the drawer in the
+// sense light dismiss cares about: it belongs to an overlay something inside
+// the drawer opened, even though it is not a DOM descendant of the drawer.
+const PORTALED_OVERLAY_SELECTOR = '.pds-popover, .pds-tooltip, .pds-combobox-dropdown-portal';
+/**
+ * A side panel composed from `pds-modal`, non-modal by default.
+ *
+ * By default, unlike `pds-modal`, the page stays interactive while a drawer
+ * is open: no dimming, no blur, no click blocking.
+ * `pds-drawer` renders a `pds-modal` internally with `disableTopLayer` on and
+ * its backdrop suppressed, and adds the edge, width and dismiss behavior a
+ * side panel needs on top. With `modal`, it opens that `pds-modal` in the top
+ * layer instead and keeps its backdrop. It does not reimplement focus, Escape or dialog semantics —
+ * those come from `pds-modal` unchanged.
+ * @lightDom renders-markup
+ */
+export class PdsDrawer {
+    constructor() {
+        /**
+         * Whether the drawer is open
+         * @default false
+         */
+        this.open = false;
+        /**
+         * Which edge of the viewport the drawer is docked to. Logical: `end` is the
+         * inline-end edge, so an `end` drawer docks on the left in right-to-left layouts.
+         * @default 'end'
+         */
+        this.side = 'end';
+        /**
+         * The drawer's width.
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Whether the drawer content should be scrollable
+         * @default true
+         */
+        this.scrollable = true;
+        /**
+         * Whether the drawer is modal. A modal drawer dims the page behind it with a
+         * backdrop, makes the page inert, and keeps focus inside the drawer, like
+         * `pds-modal`. Use it for a task the page should wait on. Leave it off for a
+         * panel people work alongside the page. Read when the drawer opens; changing
+         * it while the drawer is open is not supported.
+         * @default false
+         */
+        this.modal = false;
+        /**
+         * Whether the drawer can be dismissed with a pointerdown outside it (in a
+         * `modal` drawer, a click on its backdrop).
+         * Setting it to `false` also turns off Escape, so the close button is the
+         * only way out.
+         *
+         * A trigger outside the drawer should only ever set `open` to `true` and
+         * leave closing to the drawer itself. A toggle-style trigger (`open =
+         * !open`) fights light dismiss: clicking it while open closes the drawer
+         * on `pointerdown`, then the trigger's own click handler re-opens it.
+         * @default true
+         */
+        this.lightDismiss = true;
+        /**
+         * Whether to move focus into the drawer when it opens. `auto` is right for
+         * a drawer opened by a direct user action (a click, a deep link the user
+         * just navigated to). Set to `none` for a drawer that can open from a
+         * background event while the user is mid-task elsewhere on the page —
+         * moving focus there would interrupt them, and the page stays live under
+         * a non-modal drawer, so it is a genuine data-entry risk, not just an
+         * annoyance. A `modal` drawer ignores `none`: the page behind it is inert,
+         * so focus starts in the drawer.
+         * @default 'auto'
+         */
+        this.initialFocus = 'auto';
+    }
+    // Unwraps a nested pds-modal left by a page-cache (Turbo, bfcache) reconnect
+    // — the same bug class fixed for pds-modal-header/-content/-footer. Every
+    // render wraps the slotted content in a fresh, marked pds-modal; a reconnect
+    // that restores a prior render's pds-modal in our light DOM ends up with
+    // that stale one nested inside the new one's content.
+    //
+    // The container has to be the inner `.pds-modal` content div, not the
+    // `<pds-modal>` tag itself — that tag's first child is always its own
+    // rendered `dialog.pds-modal__backdrop`, never another `<pds-modal>`, so a
+    // bare-tag check there never matches. The `.pds-drawer__modal` marker on
+    // the staleness selector (rather than the bare `pds-modal` tag) keeps this
+    // from also unwrapping a consumer's own nested pds-modal, like a confirm
+    // dialog placed first in the drawer's content — only a stale copy of our
+    // own wrapper carries that class.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('pds-modal.pds-drawer__modal .pds-modal'), 'pds-modal.pds-drawer__modal', '.pds-modal');
+    }
+    // pds-modal closes itself (Escape, light dismiss, a consumer's close
+    // button toggling its own `open`) and only updates its own `open` prop —
+    // mirror that back onto ours so a consumer's binding stays correct, and
+    // re-emit as our own event rather than leaking pds-modal's event name.
+    // Both events bubble, so a nested pds-modal (a confirm dialog inside the
+    // drawer's own content) would otherwise trigger these too — only react to
+    // our own direct inner modal.
+    handleModalClose(e) {
+        if (e.target !== this.modalEl)
+            return;
+        this.open = false;
+        this.pdsDrawerClose.emit();
+    }
+    handleModalOpen(e) {
+        if (e.target !== this.modalEl)
+            return;
+        this.pdsDrawerOpen.emit();
+    }
+    // Light dismiss: a pointerdown anywhere outside the drawer closes it. This
+    // has to be a listener of our own, not pds-modal's backdrop-click handler —
+    // the backdrop is pointer-events:none out here (see pds-drawer.scss) so the
+    // page underneath stays genuinely clickable, which means a click there
+    // never reaches pds-modal's backdrop element at all.
+    handleOutsidePointerDown(e) {
+        // A modal drawer's backdrop takes the click instead, through pds-modal.
+        if (this.modal || !this.lightDismiss || !this.open)
+            return;
+        const target = e.target;
+        if (!target)
+            return;
+        if (this.el.contains(target))
+            return;
+        if (target.closest(PORTALED_OVERLAY_SELECTOR))
+            return;
+        // A datepicker's portaled calendar counts as inside only when its datepicker is in the drawer,
+        // or in an overlay portaled from it (a pds-popover in the drawer puts its content beside it).
+        const calendar = target.closest('.pds-datepicker-calendar-portal');
+        const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
+        if (owner && (containsComposed(this.el, owner) || closest(PORTALED_OVERLAY_SELECTOR, owner)))
+            return;
+        // A sibling pds-modal — e.g. a confirm dialog opened from inside the
+        // drawer but mounted at the document root rather than nested in our own
+        // content — is neither a descendant of the drawer nor on the portaled
+        // list above, so without this it reads as "outside" and a click inside
+        // it (or on its own backdrop) would close the drawer underneath it. That
+        // modal already owns its own dismiss semantics; defer to them instead.
+        if (target.closest('pds-modal'))
+            return;
+        this.open = false;
+    }
+    render() {
+        return (h(Host, { key: 'dda3f1dc3013f28a3fc8d1894609dd4b14d227ee', class: {
+                'pds-drawer': true,
+                [`pds-drawer--${this.side}`]: true,
+                [`pds-drawer--${this.size}`]: true,
+            } }, h("pds-modal", { key: '3188b99ffb9b3ecb3eeb42fd3ba808d71c652b4f', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, h("slot", { key: 'ca4cd34297b4580d554edb45bfbec5b44d7d1fb0' }))));
+    }
+    static get is() { return "pds-drawer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the drawer is open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'end'"
+                        }],
+                    "text": "Which edge of the viewport the drawer is docked to. Logical: `end` is the\ninline-end edge, so an `end` drawer docks on the left in right-to-left layouts."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "side",
+                "defaultValue": "'end'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md'",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'md'"
+                        }],
+                    "text": "The drawer's width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether the drawer content should be scrollable"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scrollable",
+                "defaultValue": "true"
+            },
+            "modal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the drawer is modal. A modal drawer dims the page behind it with a\nbackdrop, makes the page inert, and keeps focus inside the drawer, like\n`pds-modal`. Use it for a task the page should wait on. Leave it off for a\npanel people work alongside the page. Read when the drawer opens; changing\nit while the drawer is open is not supported."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal",
+                "defaultValue": "false"
+            },
+            "lightDismiss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether the drawer can be dismissed with a pointerdown outside it (in a\n`modal` drawer, a click on its backdrop).\nSetting it to `false` also turns off Escape, so the close button is the\nonly way out.\n\nA trigger outside the drawer should only ever set `open` to `true` and\nleave closing to the drawer itself. A toggle-style trigger (`open =\n!open`) fights light dismiss: clicking it while open closes the drawer\non `pointerdown`, then the trigger's own click handler re-opens it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "light-dismiss",
+                "defaultValue": "true"
+            },
+            "initialFocus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'none'",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'auto'"
+                        }],
+                    "text": "Whether to move focus into the drawer when it opens. `auto` is right for\na drawer opened by a direct user action (a click, a deep link the user\njust navigated to). Set to `none` for a drawer that can open from a\nbackground event while the user is mid-task elsewhere on the page \u2014\nmoving focus there would interrupt them, and the page stays live under\na non-modal drawer, so it is a genuine data-entry risk, not just an\nannoyance. A `modal` drawer ignores `none`: the page behind it is inert,\nso focus starts in the drawer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-focus",
+                "defaultValue": "'auto'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsDrawerOpen",
+                "name": "pdsDrawerOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the drawer is opened"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "pdsDrawerClose",
+                "name": "pdsDrawerClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the drawer is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "pdsModalClose",
+                "method": "handleModalClose",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pdsModalOpen",
+                "method": "handleModalOpen",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handleOutsidePointerDown",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/pds-drawer/stories/pds-drawer.stories.js

@@ -0,0 +1,77 @@
+import { html } from 'lit';
+
+export default {
+  component: 'pds-drawer',
+  title: 'components/Drawer',
+  args: {
+    componentId: 'drawer-demo',
+    side: 'end',
+    size: 'md',
+    scrollable: true,
+    lightDismiss: true,
+    modal: false,
+    initialFocus: 'auto',
+    open: false,
+  },
+  parameters: {},
+};
+
+const BaseTemplate = (args) => html`
+  <div>
+    <pds-button id="open-drawer" onClick="document.querySelector('#${args.componentId}').open = true">
+      Open Drawer
+    </pds-button>
+
+    <pds-drawer
+      id="${args.componentId}"
+      component-id="${args.componentId}"
+      side="${args.side}"
+      size="${args.size}"
+      scrollable="${args.scrollable}"
+      light-dismiss="${args.lightDismiss}"
+      ?modal=${args.modal}
+      initial-focus="${args.initialFocus}"
+      ?open=${args.open}
+    >
+      <pds-drawer-header>
+        <pds-box align-items="center" justify-content="space-between" fit>
+          <pds-text tag="h2" size="h4" id="${args.componentId}-heading">Drawer Title</pds-text>
+          <pds-button
+            class="pds-drawer__close"
+            variant="unstyled"
+            icon-only="true"
+            onclick="document.querySelector('#${args.componentId}').open = false"
+            aria-label="Close drawer"
+          >
+            <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+          </pds-button>
+        </pds-box>
+      </pds-drawer-header>
+
+      <pds-drawer-content>
+        <pds-text tag="p">Drawer body content goes here.</pds-text>
+      </pds-drawer-content>
+
+      <pds-drawer-footer>
+        <pds-button
+          variant="secondary"
+          onclick="document.querySelector('#${args.componentId}').open = false"
+        >
+          Cancel
+        </pds-button>
+        <pds-button variant="primary">Save</pds-button>
+      </pds-drawer-footer>
+    </pds-drawer>
+  </div>
+`;
+
+export const Default = BaseTemplate.bind({});
+
+export const StartSide = BaseTemplate.bind({});
+StartSide.args = { side: 'start' };
+
+export const Small = BaseTemplate.bind({});
+Small.args = { size: 'sm' };
+
+export const Modal = BaseTemplate.bind({});
+Modal.args = { modal: true, componentId: 'drawer-modal-demo' };

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.css

@@ -0,0 +1,93 @@
+:host {
+  cursor: pointer;
+  display: flex;
+  width: 100%; /* Ensure the host takes full width */
+}
+
+/* Make the disabled styles more specific and add !important to ensure they apply */
+:host(.is-disabled) {
+  cursor: not-allowed !important;
+  opacity: 0.5 !important;
+}
+:host(.is-disabled) .pds-dropdown-menu-item__content {
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}
+
+.pds-dropdown-menu-item__content {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--pine-dimension-xs);
+  color: var(--pine-color-text);
+  display: flex;
+  flex-grow: 1; /* Make it grow to fill available space */
+  font: var(--pine-typography-body-medium);
+  gap: var(--pine-dimension-xs);
+  margin: calc(var(--pine-border-width) + 2px);
+  padding: var(--pine-dimension-xs);
+  text-align: start; /* Ensure text aligns properly */
+  width: 100%; /* Ensure full width */
+}
+.pds-dropdown-menu-item__content:hover {
+  background-color: var(--pine-color-background-muted);
+  color: var(--pine-color-text-hover);
+}
+.pds-dropdown-menu-item__content:focus-visible {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+
+.pds-dropdown-menu-item__start {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.pds-dropdown-menu-item__start--empty {
+  display: none;
+}
+
+:host(.is-informational) {
+  cursor: default;
+}
+:host(.is-informational) .pds-dropdown-menu-item__content:hover {
+  background-color: transparent;
+  color: var(--pine-color-text);
+}
+
+:host(.destructive) .pds-dropdown-menu-item__content {
+  --pds-context-link-color: var(--pine-color-danger);
+  --pds-context-link-color-hover: var(--pine-color-danger-hover);
+  align-items: center;
+  color: var(--pine-color-danger);
+}
+:host(.destructive) .pds-dropdown-menu-item__content:hover {
+  background-color: var(--pine-color-danger-disabled);
+  color: var(--pine-color-danger-hover);
+}
+:host(.destructive) .pds-dropdown-menu-item__content:focus-visible {
+  background-color: var(--pine-color-danger-disabled);
+  outline: var(--pine-outline-focus-danger);
+  outline-offset: var(--pine-border-width);
+}
+:host(.destructive) pds-link::part(link):focus-visible {
+  background-color: var(--pine-color-danger-disabled);
+  outline: var(--pine-outline-focus-danger);
+}
+
+pds-link::part(link):focus-visible {
+  border-radius: var(--pine-dimension-xs);
+  box-shadow: none;
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+
+pds-link::part(link) {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+  margin: calc(var(--pine-dimension-xs) * -1);
+  padding: var(--pine-dimension-xs);
+  text-decoration: none;
+  width: calc(100% + var(--pine-dimension-xs) * 2);
+}