@patternfly/elements 2.4.0 → 3.0.1

package/pf-dropdown/pf-dropdown-item.css

@@ -0,0 +1,143 @@
+:host {
+  display: block;
+  width: 100%;
+  text-align: left;
+  white-space: nowrap;
+  border: none;
+  cursor: pointer;
+  font-size: var(
+    --pf-c-dropdown__menu-item--FontSize,
+    var(--pf-global--FontSize--md, 1rem)
+  );
+  font-weight: var(
+    --pf-c-dropdown__menu-item--FontWeight,
+    var(--pf-global--FontWeight--normal, 400)
+  );
+  line-height: var(
+    --pf-c-dropdown__menu-item--LineHeight,
+    var(--pf-global--LineHeight--md, 1.5)
+  );
+  color: var(
+    --pf-c-dropdown__menu-item--Color,
+    var(--pf-global--Color--dark-100, #151515)
+  );
+  background-color: var(
+    --pf-c-dropdown__menu-item--BackgroundColor,
+    transparent
+  );
+  border: 3px solid var(
+    --pf-c-dropdown__menu-item--BackgroundColor,
+    transparent
+  );
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+:host([disabled]),
+.disabled {
+  &, & a {
+    cursor: not-allowed;
+  }
+  --pf-c-dropdown__menu-item--Color: var(
+    --pf-c-dropdown__menu-item--disabled--Color,
+    var(--pf-global--Color--dark-200, #6a6e73)
+  );
+  --pf-c-dropdown__menu-item--BackgroundColor: var(
+    --pf-c-dropdown__menu-item--disabled--BackgroundColor,
+    transparent
+  );
+}
+
+:host(:hover) {
+  --pf-c-dropdown__menu-item--Color: var(
+    --pf-c-dropdown__menu-item--hover--Color,
+    var(--pf-global--Color--dark-100, #151515)
+  );
+  --pf-c-dropdown__menu-item--BackgroundColor: var(
+    --pf-c-dropdown__menu-item--hover--BackgroundColor,
+    var(--pf-global--BackgroundColor--light-300, #f0f0f0)
+  );
+  text-decoration: none;
+}
+
+:host(:focus-within) {
+  border: 3px solid var(--pf-global--link--Color, #0066cc);
+}
+
+#menuitem {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: var(
+      --pf-c-dropdown__menu-item--PaddingTop,
+      var(--pf-global--spacer--sm, 0.5rem)
+    )
+    var(
+      --pf-c-dropdown__menu-item--PaddingRight,
+      var(--pf-global--spacer--md, 1rem)
+    )
+    var(
+      --pf-c-dropdown__menu-item--PaddingBottom,
+      var(--pf-global--spacer--sm, 0.5rem)
+    )
+    var(
+      --pf-c-dropdown__menu-item--PaddingLeft,
+      var(--pf-global--spacer--md, 1rem)
+    );
+}
+
+#item {
+  display: flex;
+  align-items: center;
+}
+
+#item:focus {
+  outline: none;
+}
+
+#item::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+#description {
+  display: block;
+  flex: 1 0 100%;
+  font-size: var(
+    --pf-c-dropdown__menu-item-description--FontSize, var(
+      --pf-global--FontSize--sm, 0.75rem
+    )
+  );
+  color: var(
+    --pf-c-dropdown__menu-item-description--Color, var(
+      --pf-global--Color--dark-200, #6a6e73
+    )
+  );
+  word-break: break-all;
+}
+
+a {
+  color: var(
+    --pf-c-dropdown__menu-item--Color,
+    var(--pf-global--Color--dark-100, #151515)
+  ) !important;
+  text-decoration: none !important;
+}
+
+slot:not([name]){
+  flex: 1 0 44px;
+  min-height: 44px;
+}
+
+slot[name="icon"]::slotted(*) {
+  margin-inline-end: 0.5em;
+}

package/pf-dropdown/pf-dropdown-item.d.ts

@@ -0,0 +1,80 @@
+import { LitElement, type PropertyValues } from 'lit';
+export declare class DropdownItemChange extends Event {
+    constructor();
+}
+/**
+ * Represents an item for a dropdown component.
+ * @slot icon
+ *      Optional slot for an icon
+ * @slot description
+ *      Optional slot for item description
+ * @slot -
+ *      Content for the dropdown item
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--FontSize
+ *          Dropdown item font size
+ *          {@default `1rem`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--FontWeight
+ *          Dropdown item font weight
+ *          {@default `400`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--LineHeight
+ *          Dropdown item line height
+ *          {@default `1.5`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--Color
+ *          Dropdown item color
+ *          {@default `#151515`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--BackgroundColor
+ *          Dropdown item background color
+ *          {@default `transparent`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingTop
+ *          Dropdown item padding top
+ *          {@default `0.5rem`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingRight
+ *          Dropdown item padding right
+ *          {@default `1rem`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingBottom
+ *          Dropdown item padding bottom
+ *          {@default `0.5rem`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingLeft
+ *          Dropdown item padding left
+ *          {@default `1rem`}
+ */
+export declare class PfDropdownItem extends LitElement {
+    static readonly styles: CSSStyleSheet[];
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
+    };
+    /**
+     * The value associated with the dropdown item.
+     * This value can be used to identify the selected item
+     */
+    value?: string;
+    /**
+     * href for link dropdown items
+     */
+    href?: string;
+    /**
+     * Flag indicating whether the item is active
+     */
+    active: boolean;
+    /**
+     * Indicates whether the dropdown item is disabled.
+     * A disabled item cannot be selected.
+     */
+    disabled: boolean;
+    /** Item description; overridden by `description` slot */
+    description?: string;
+    private ctx?;
+    /** @internal */
+    menuItem: HTMLElement;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-dropdown-item': PfDropdownItem;
+    }
+}

package/pf-dropdown/pf-dropdown-item.js

@@ -0,0 +1,120 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { query } from 'lit/decorators/query.js';
+import { consume } from '@lit/context';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { context } from './context.js';
+import { css } from "lit";
+const styles = css `:host {\n  display: block;\n  width: 100%;\n  text-align: left;\n  white-space: nowrap;\n  border: none;\n  cursor: pointer;\n  font-size: var(\n    --pf-c-dropdown__menu-item--FontSize,\n    var(--pf-global--FontSize--md, 1rem)\n  );\n  font-weight: var(\n    --pf-c-dropdown__menu-item--FontWeight,\n    var(--pf-global--FontWeight--normal, 400)\n  );\n  line-height: var(\n    --pf-c-dropdown__menu-item--LineHeight,\n    var(--pf-global--LineHeight--md, 1.5)\n  );\n  color: var(\n    --pf-c-dropdown__menu-item--Color,\n    var(--pf-global--Color--dark-100, #151515)\n  );\n  background-color: var(\n    --pf-c-dropdown__menu-item--BackgroundColor,\n    transparent\n  );\n  border: 3px solid var(\n    --pf-c-dropdown__menu-item--BackgroundColor,\n    transparent\n  );\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n:host([disabled]),\n.disabled {\n  &, & a {\n    cursor: not-allowed;\n  }\n  --pf-c-dropdown__menu-item--Color: var(\n    --pf-c-dropdown__menu-item--disabled--Color,\n    var(--pf-global--Color--dark-200, #6a6e73)\n  );\n  --pf-c-dropdown__menu-item--BackgroundColor: var(\n    --pf-c-dropdown__menu-item--disabled--BackgroundColor,\n    transparent\n  );\n}\n\n:host(:hover) {\n  --pf-c-dropdown__menu-item--Color: var(\n    --pf-c-dropdown__menu-item--hover--Color,\n    var(--pf-global--Color--dark-100, #151515)\n  );\n  --pf-c-dropdown__menu-item--BackgroundColor: var(\n    --pf-c-dropdown__menu-item--hover--BackgroundColor,\n    var(--pf-global--BackgroundColor--light-300, #f0f0f0)\n  );\n  text-decoration: none;\n}\n\n:host(:focus-within) {\n  border: 3px solid var(--pf-global--link--Color, #0066cc);\n}\n\n#menuitem {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  padding: var(\n      --pf-c-dropdown__menu-item--PaddingTop,\n      var(--pf-global--spacer--sm, 0.5rem)\n    )\n    var(\n      --pf-c-dropdown__menu-item--PaddingRight,\n      var(--pf-global--spacer--md, 1rem)\n    )\n    var(\n      --pf-c-dropdown__menu-item--PaddingBottom,\n      var(--pf-global--spacer--sm, 0.5rem)\n    )\n    var(\n      --pf-c-dropdown__menu-item--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem)\n    );\n}\n\n#item {\n  display: flex;\n  align-items: center;\n}\n\n#item:focus {\n  outline: none;\n}\n\n#item::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n#description {\n  display: block;\n  flex: 1 0 100%;\n  font-size: var(\n    --pf-c-dropdown__menu-item-description--FontSize, var(\n      --pf-global--FontSize--sm, 0.75rem\n    )\n  );\n  color: var(\n    --pf-c-dropdown__menu-item-description--Color, var(\n      --pf-global--Color--dark-200, #6a6e73\n    )\n  );\n  word-break: break-all;\n}\n\na {\n  color: var(\n    --pf-c-dropdown__menu-item--Color,\n    var(--pf-global--Color--dark-100, #151515)\n  ) !important;\n  text-decoration: none !important;\n}\n\nslot:not([name]){\n  flex: 1 0 44px;\n  min-height: 44px;\n}\n\nslot[name="icon"]::slotted(*) {\n  margin-inline-end: 0.5em;\n}\n`;
+export class DropdownItemChange extends Event {
+    constructor() {
+        super('change', { bubbles: true, cancelable: true });
+    }
+}
+/**
+ * Represents an item for a dropdown component.
+ * @slot icon
+ *      Optional slot for an icon
+ * @slot description
+ *      Optional slot for item description
+ * @slot -
+ *      Content for the dropdown item
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--FontSize
+ *          Dropdown item font size
+ *          {@default `1rem`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--FontWeight
+ *          Dropdown item font weight
+ *          {@default `400`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--LineHeight
+ *          Dropdown item line height
+ *          {@default `1.5`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--Color
+ *          Dropdown item color
+ *          {@default `#151515`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--BackgroundColor
+ *          Dropdown item background color
+ *          {@default `transparent`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingTop
+ *          Dropdown item padding top
+ *          {@default `0.5rem`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingRight
+ *          Dropdown item padding right
+ *          {@default `1rem`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingBottom
+ *          Dropdown item padding bottom
+ *          {@default `0.5rem`}
+ * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingLeft
+ *          Dropdown item padding left
+ *          {@default `1rem`}
+ */
+let PfDropdownItem = class PfDropdownItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Flag indicating whether the item is active
+         */
+        this.active = false;
+        /**
+         * Indicates whether the dropdown item is disabled.
+         * A disabled item cannot be selected.
+         */
+        this.disabled = false;
+    }
+    updated(changed) {
+        if (changed.has('href')) {
+            this.dispatchEvent(new DropdownItemChange());
+        }
+    }
+    render() {
+        const { disabled } = this.ctx ?? { disabled: false };
+        const isDisabled = !!this.disabled || !!this.ctx?.disabled;
+        return html `
+      <div id="menuitem" role="none" class="${classMap({ disabled })}">${this.href ? html `
+        <a id="item" role="menuitem" href="${this.href}" aria-disabled="${isDisabled}">
+          <slot name="icon"></slot>
+          <slot></slot>
+        </a>
+        ` : html `
+        <div id="item" role="menuitem" aria-disabled="${isDisabled}">
+          <slot name="icon"></slot>
+          <slot></slot>
+        </div>`}
+        <slot id="description" name="description">${this.description ?? ''}</slot>
+      </div>`;
+    }
+};
+PfDropdownItem.styles = [styles];
+PfDropdownItem.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    property({ reflect: true })
+], PfDropdownItem.prototype, "value", void 0);
+__decorate([
+    property({ attribute: 'href' })
+], PfDropdownItem.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfDropdownItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfDropdownItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], PfDropdownItem.prototype, "description", void 0);
+__decorate([
+    consume({ context, subscribe: true }),
+    property({ attribute: false })
+], PfDropdownItem.prototype, "ctx", void 0);
+__decorate([
+    query('#item')
+], PfDropdownItem.prototype, "menuItem", void 0);
+PfDropdownItem = __decorate([
+    customElement('pf-dropdown-item')
+], PfDropdownItem);
+export { PfDropdownItem };
+//# sourceMappingURL=pf-dropdown-item.js.map

package/pf-dropdown/pf-dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-dropdown-item.js","sourceRoot":"","sources":["pf-dropdown-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,EAAE,OAAO,EAA0B,MAAM,cAAc,CAAC;;;AAI/D,MAAM,OAAO,kBAAmB,SAAQ,KAAK;IAC3C;QACE,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAmBL;;WAEG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE3D;;;WAGG;QACyC,aAAQ,GAAG,KAAK,CAAC;IAmC/D,CAAC;IAvBoB,OAAO,CAAC,OAA6B;QACtD,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;QACrD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC;QAC3D,OAAO,IAAI,CAAA;8CAC+B,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;6CAC5C,IAAI,CAAC,IAAI,oBAAoB,UAAU;;;;SAI3E,CAAC,CAAC,CAAC,IAAI,CAAA;wDACwC,UAAU;;;eAGnD;oDACqC,IAAI,CAAC,WAAW,IAAI,EAAE;aAC7D,CAAC;IACZ,CAAC;;AA7De,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAET,gCAAiB,GAAG;IAC3C,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHyC,CAGxC;AAM2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAgB;AAKX;IAAhC,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;4CAAe;AAKH;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB;AAMf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAGjD;IAAX,QAAQ,EAAE;mDAAsB;AAIzB;IAFP,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CACC;AAGhB;IAAf,KAAK,CAAC,OAAO,CAAC;gDAAwB;AAtC5B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA+D1B","sourcesContent":["import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators/query.js';\nimport { consume } from '@lit/context';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { context, type PfDropdownContext } from './context.js';\n\nimport styles from './pf-dropdown-item.css';\n\nexport class DropdownItemChange extends Event {\n  constructor() {\n    super('change', { bubbles: true, cancelable: true });\n  }\n}\n\n/**\n * Represents an item for a dropdown component.\n * @slot icon\n *      Optional slot for an icon\n * @slot description\n *      Optional slot for item description\n * @slot -\n *      Content for the dropdown item\n * @cssprop {<length>} --pf-c-dropdown__menu-item--FontSize\n *          Dropdown item font size\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--FontWeight\n *          Dropdown item font weight\n *          {@default `400`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--LineHeight\n *          Dropdown item line height\n *          {@default `1.5`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--Color\n *          Dropdown item color\n *          {@default `#151515`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--BackgroundColor\n *          Dropdown item background color\n *          {@default `transparent`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingTop\n *          Dropdown item padding top\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingRight\n *          Dropdown item padding right\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingBottom\n *          Dropdown item padding bottom\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-dropdown__menu-item--PaddingLeft\n *          Dropdown item padding left\n *          {@default `1rem`}\n */\n@customElement('pf-dropdown-item')\nexport class PfDropdownItem extends LitElement {\n  static readonly styles = [styles];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * The value associated with the dropdown item.\n   * This value can be used to identify the selected item\n   */\n  @property({ reflect: true }) value?: string;\n\n  /**\n   * href for link dropdown items\n   */\n  @property({ attribute: 'href' }) href?: string;\n\n  /**\n   * Flag indicating whether the item is active\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * Indicates whether the dropdown item is disabled.\n   * A disabled item cannot be selected.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Item description; overridden by `description` slot */\n  @property() description?: string;\n\n  @consume({ context, subscribe: true })\n  @property({ attribute: false })\n  private ctx?: PfDropdownContext;\n\n  /** @internal */\n  @query('#item') menuItem!: HTMLElement;\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('href')) {\n      this.dispatchEvent(new DropdownItemChange());\n    }\n  }\n\n  render() {\n    const { disabled } = this.ctx ?? { disabled: false };\n    const isDisabled = !!this.disabled || !!this.ctx?.disabled;\n    return html`\n      <div id=\"menuitem\" role=\"none\" class=\"${classMap({ disabled })}\">${this.href ? html`\n        <a id=\"item\" role=\"menuitem\" href=\"${this.href}\" aria-disabled=\"${isDisabled}\">\n          <slot name=\"icon\"></slot>\n          <slot></slot>\n        </a>\n        ` : html`\n        <div id=\"item\" role=\"menuitem\" aria-disabled=\"${isDisabled}\">\n          <slot name=\"icon\"></slot>\n          <slot></slot>\n        </div>`}\n        <slot id=\"description\" name=\"description\">${this.description ?? ''}</slot>\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown-item': PfDropdownItem;\n  }\n}\n"]}

package/pf-dropdown/pf-dropdown-menu.css

@@ -0,0 +1,37 @@
+:host {
+  background: var(--pf-c-dropdown__menu--BackgroundColor, #fff);
+}
+
+.disabled {
+  --pf-c-dropdown__menu-item--Color: var(
+    --pf-c-dropdown__menu-item--disabled--Color,
+    var(--pf-global--Color--dark-200, #6a6e73)
+  ) !important;
+  --pf-c-dropdown__menu-item--BackgroundColor: var(
+    --pf-c-dropdown__menu-item--disabled--BackgroundColor,
+    transparent
+  ) !important;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+::slotted(hr) {
+  margin: 0;
+  border-color: var(--pf-c-divider--BackgroundColor, var(--pf-global--BorderColor--100, #d2d2d2));
+  border-style: solid;
+}
+
+::slotted([role="separator"]:not(hr)) {
+  width: 100%;
+  height: 1px;
+  background-color: var(--pf-c-divider--BackgroundColor, var(--pf-global--BorderColor--100, #d2d2d2));
+  padding: 0px;
+  margin: 0px;
+  border: 0;
+  display: block;
+  pointer-events: none;
+}
+

package/pf-dropdown/pf-dropdown-menu.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { PfDropdownItem } from './pf-dropdown-item.js';
+/**
+ * A **dropdown** presents a menu of actions or links in a constrained space that will trigger a
+ * process or navigate to a new location.
+ * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`
+ */
+export declare class PfDropdownMenu extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+        registry?: CustomElementRegistry | undefined;
+    };
+    private ctx?;
+    /**
+     * current active descendant in menu
+     */
+    get activeItem(): HTMLElement | undefined;
+    /**
+     * index of current active descendant in menu
+     */
+    get activeIndex(): number;
+    get items(): PfDropdownItem[];
+    connectedCallback(): void;
+    protected willUpdate(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-dropdown-menu': PfDropdownMenu;
+    }
+}

package/pf-dropdown/pf-dropdown-menu.js

@@ -0,0 +1,132 @@
+var _PfDropdownMenu_instances, _PfDropdownMenu_internals, _PfDropdownMenu_tabindex, _PfDropdownMenu_onItemChange, _PfDropdownMenu_onSlotChange, _PfDropdownMenu_onMenuitemFocusin, _PfDropdownMenu_onMenuitemClick, _PfDropdownMenu_getSlottedItems;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { consume } from '@lit/context';
+import { state } from 'lit/decorators/state.js';
+import { context } from './context.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { PfDropdownItem, DropdownItemChange } from './pf-dropdown-item.js';
+import { PfDropdownGroup } from './pf-dropdown-group.js';
+import { css } from "lit";
+const styles = css `:host {\n  background: var(--pf-c-dropdown__menu--BackgroundColor, #fff);\n}\n\n.disabled {\n  --pf-c-dropdown__menu-item--Color: var(\n    --pf-c-dropdown__menu-item--disabled--Color,\n    var(--pf-global--Color--dark-200, #6a6e73)\n  ) !important;\n  --pf-c-dropdown__menu-item--BackgroundColor: var(\n    --pf-c-dropdown__menu-item--disabled--BackgroundColor,\n    transparent\n  ) !important;\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n\n::slotted(hr) {\n  margin: 0;\n  border-color: var(--pf-c-divider--BackgroundColor, var(--pf-global--BorderColor--100, #d2d2d2));\n  border-style: solid;\n}\n\n::slotted([role="separator"]:not(hr)) {\n  width: 100%;\n  height: 1px;\n  background-color: var(--pf-c-divider--BackgroundColor, var(--pf-global--BorderColor--100, #d2d2d2));\n  padding: 0px;\n  margin: 0px;\n  border: 0;\n  display: block;\n  pointer-events: none;\n}\n\n`;
+import { classMap } from 'lit/directives/class-map.js';
+function isDisabledItemClick(event) {
+    const item = event.composedPath().find((x) => x instanceof PfDropdownItem);
+    return !!item?.disabled;
+}
+/**
+ * A **dropdown** presents a menu of actions or links in a constrained space that will trigger a
+ * process or navigate to a new location.
+ * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`
+ */
+let PfDropdownMenu = class PfDropdownMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfDropdownMenu_instances.add(this);
+        _PfDropdownMenu_internals.set(this, InternalsController.of(this, { role: 'menu' }));
+        _PfDropdownMenu_tabindex.set(this, new RovingTabindexController(this, {
+            getItems: () => this.items.map(x => x.menuItem),
+        }));
+    }
+    /**
+     * current active descendant in menu
+     */
+    get activeItem() {
+        return __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").activeItem ?? __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").firstItem;
+    }
+    /**
+     * index of current active descendant in menu
+     */
+    get activeIndex() {
+        if (!__classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").activeItem) {
+            return -1;
+        }
+        else {
+            return __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").items.indexOf(__classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").activeItem);
+        }
+    }
+    get items() {
+        return __classPrivateFieldGet(this, _PfDropdownMenu_instances, "m", _PfDropdownMenu_getSlottedItems).call(this, this.shadowRoot?.querySelector('slot'));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('focusin', __classPrivateFieldGet(this, _PfDropdownMenu_instances, "m", _PfDropdownMenu_onMenuitemFocusin));
+        this.addEventListener('click', __classPrivateFieldGet(this, _PfDropdownMenu_instances, "m", _PfDropdownMenu_onMenuitemClick));
+    }
+    willUpdate() {
+        __classPrivateFieldGet(this, _PfDropdownMenu_internals, "f").ariaDisabled = String(!!this.ctx?.disabled);
+    }
+    render() {
+        const { disabled = false } = this.ctx ?? {};
+        return html `
+      <slot class="${classMap({ disabled })}"
+            @slotchange="${__classPrivateFieldGet(this, _PfDropdownMenu_instances, "m", _PfDropdownMenu_onSlotChange)}"
+            @change="${__classPrivateFieldGet(this, _PfDropdownMenu_instances, "m", _PfDropdownMenu_onItemChange)}"></slot>
+    `;
+    }
+};
+_PfDropdownMenu_internals = new WeakMap();
+_PfDropdownMenu_tabindex = new WeakMap();
+_PfDropdownMenu_instances = new WeakSet();
+_PfDropdownMenu_onItemChange = function _PfDropdownMenu_onItemChange(event) {
+    if (event instanceof DropdownItemChange) {
+        __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").updateItems();
+    }
+};
+_PfDropdownMenu_onSlotChange = function _PfDropdownMenu_onSlotChange() {
+    __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").updateItems();
+};
+_PfDropdownMenu_onMenuitemFocusin = function _PfDropdownMenu_onMenuitemFocusin(event) {
+    if (this.ctx?.disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    else if (event.target instanceof PfDropdownItem
+        && event.target.menuItem !== __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").activeItem) {
+        __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").setActiveItem(event.target.menuItem);
+    }
+};
+_PfDropdownMenu_onMenuitemClick = function _PfDropdownMenu_onMenuitemClick(event) {
+    if (this.ctx?.disabled || isDisabledItemClick(event)) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    else if (event.target instanceof PfDropdownItem
+        && event.target.menuItem !== __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").activeItem) {
+        __classPrivateFieldGet(this, _PfDropdownMenu_tabindex, "f").setActiveItem(event.target.menuItem);
+    }
+};
+_PfDropdownMenu_getSlottedItems = function _PfDropdownMenu_getSlottedItems(slot) {
+    return slot
+        ?.assignedElements()
+        .flatMap(element => {
+        if (element instanceof HTMLSlotElement) {
+            return __classPrivateFieldGet(this, _PfDropdownMenu_instances, "m", _PfDropdownMenu_getSlottedItems).call(this, element);
+        }
+        else if (element instanceof PfDropdownItem) {
+            return [element];
+        }
+        else if (element instanceof PfDropdownGroup) {
+            return Array.from(element.querySelectorAll('pf-dropdown-item'));
+        }
+        else {
+            return [];
+        }
+    }) ?? [];
+};
+PfDropdownMenu.styles = [styles];
+PfDropdownMenu.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    consume({ context, subscribe: true }),
+    state()
+], PfDropdownMenu.prototype, "ctx", void 0);
+PfDropdownMenu = __decorate([
+    customElement('pf-dropdown-menu')
+], PfDropdownMenu);
+export { PfDropdownMenu };
+//# sourceMappingURL=pf-dropdown-menu.js.map

package/pf-dropdown/pf-dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-dropdown-menu.js","sourceRoot":"","sources":["pf-dropdown-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { consume } from '@lit/context';\nimport { state } from 'lit/decorators/state.js';\nimport { context, type PfDropdownContext } from './context.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { PfDropdownItem, DropdownItemChange } from './pf-dropdown-item.js';\nimport { PfDropdownGroup } from './pf-dropdown-group.js';\n\nimport styles from './pf-dropdown-menu.css';\nimport { classMap } from 'lit/directives/class-map.js';\n\nfunction isDisabledItemClick(event: MouseEvent) {\n  const item: PfDropdownItem | undefined =\n    event.composedPath().find((x): x is PfDropdownItem => x instanceof PfDropdownItem);\n  return !!item?.disabled;\n}\n\n/**\n * A **dropdown** presents a menu of actions or links in a constrained space that will trigger a\n * process or navigate to a new location.\n * @slot - Must contain one or more `<pf-dropdown-item>` or `<pf-dropdown-group>`\n */\n@customElement('pf-dropdown-menu')\nexport class PfDropdownMenu extends LitElement {\n  static readonly styles = [styles];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @consume({ context, subscribe: true })\n  @state()\n  private ctx?: PfDropdownContext;\n\n  #internals = InternalsController.of(this, { role: 'menu' });\n\n  #tabindex = new RovingTabindexController(this, {\n    getItems: () => this.items.map(x => x.menuItem),\n  });\n\n  /**\n   * current active descendant in menu\n   */\n  get activeItem() {\n    return this.#tabindex.activeItem ?? this.#tabindex.firstItem;\n  }\n\n  /**\n   * index of current active descendant in menu\n   */\n  get activeIndex() {\n    if (!this.#tabindex.activeItem) {\n      return -1;\n    } else {\n      return this.#tabindex.items.indexOf(this.#tabindex.activeItem);\n    }\n  }\n\n  get items(): PfDropdownItem[] {\n    return this.#getSlottedItems(this.shadowRoot?.querySelector('slot'));\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('focusin', this.#onMenuitemFocusin);\n    this.addEventListener('click', this.#onMenuitemClick);\n  }\n\n  protected override willUpdate(): void {\n    this.#internals.ariaDisabled = String(!!this.ctx?.disabled);\n  }\n\n  render() {\n    const { disabled = false } = this.ctx ?? {};\n    return html`\n      <slot class=\"${classMap({ disabled })}\"\n            @slotchange=\"${this.#onSlotChange}\"\n            @change=\"${this.#onItemChange}\"></slot>\n    `;\n  }\n\n  /**\n   * handles a change event from a dropdown item\n   * @param event {Event}\n   */\n  #onItemChange(event: Event) {\n    if (event instanceof DropdownItemChange) {\n      this.#tabindex.updateItems();\n    }\n  }\n\n  /**\n   * handles slot change event\n   */\n  #onSlotChange() {\n    this.#tabindex.updateItems();\n  }\n\n  /**\n   * handles focusing on an option:\n   * updates roving tabindex and active descendant\n   */\n  #onMenuitemFocusin(event: FocusEvent) {\n    if (this.ctx?.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (event.target instanceof PfDropdownItem\n        && event.target.menuItem !== this.#tabindex.activeItem) {\n      this.#tabindex.setActiveItem(event.target.menuItem);\n    }\n  }\n\n  /**\n   * handles clicking on a menuitem:\n   * which selects an item by default\n   * or toggles selection if multiselectable\n   */\n  #onMenuitemClick(event: MouseEvent) {\n    if (this.ctx?.disabled || isDisabledItemClick(event)) {\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (event.target instanceof PfDropdownItem\n        && event.target.menuItem !== this.#tabindex.activeItem) {\n      this.#tabindex.setActiveItem(event.target.menuItem);\n    }\n  }\n\n  #getSlottedItems(slot?: HTMLSlotElement | null): PfDropdownItem[] {\n    return slot\n        ?.assignedElements()\n        .flatMap(element => {\n          if (element instanceof HTMLSlotElement) {\n            return this.#getSlottedItems(element);\n          } else if (element instanceof PfDropdownItem) {\n            return [element];\n          } else if (element instanceof PfDropdownGroup) {\n            return Array.from(element.querySelectorAll('pf-dropdown-item'));\n          } else {\n            return [];\n          }\n        }) ?? [];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-dropdown-menu': PfDropdownMenu;\n  }\n}\n"]}