@patternfly/[email protected]

Patch Changes

• 921e5d5: TypeScript CSS Import Transforms: allow importing from bare specifiers

@patternfly/[email protected]

Patch Changes

• 43b97bf: InternalsController: prevent Safari-detector from breaking SSR

@patternfly/[email protected]

Patch Changes

• bce98d2: <pf-icon>: fixed lazy icon lazy loading
• Updated dependencies [43b97bf]
  • @patternfly/[email protected]

@patternfly/[email protected]

Major Changes

• 1ca3515: Custom Elements Manifest: Removed support for non-standard inline {@default value} JSDoc tags. Use standard syntax instead

  Before:

  /**
   * @cssprop --foo {@default bar} Foo
   */

  After:

  /**
   * @cssprop [--foo=bar] Foo
   */

• c9bd577: Custom Elements Manifest: added custom-elements-manifest.js, which exports the function getAllManifests

  import { getAllManifests } from "@patternfly/pfe-tools/custom-elements-manifest/custom-elements-manifest/.js";
  
  for (const manifest of getAllManifests()) {
    const packageName = manifest.packageJson?.name ?? "package";
    console.log(
      `Available Elements in ${packageName}`,
      ...manifest.getTagNames()
    );
  }

Minor Changes

• c9bd577: a11ySnapshot: Added chai assertions for various accessibility-tree scenarios

  Examples:

  describe("<pf-accordion>", function () {
    beforeEach(() =>
      fixture(html`
        <pf-accordion>
          <pf-accordion-header id="header1">header-1</pf-accordion-header>
          <pf-accordion-panel>panel-1</pf-accordion-panel>
        </pf-accordion>
      `)
    );
    describe("clicking the first heading", function () {
      beforeEach(clickFirstHeading);
      it("expands the first panel", async function () {
        expect(await a11ySnapshot()).to.axContainName("panel-1");
      });
      it("focuses the first panel", async function () {
        expect(await a11ySnapshot()).to.have.axTreeFocusOn(
          document.getElementById("header1")
        );
      });
      it("shows the collapse all button", async function () {
        expect(await a11ySnapshot()).to.axContainRole("button");
      });
    });
  });

• c9bd577: Added querySnapshot accessibility testing helper

  describe("then clicking the toggle", function () {
    beforeEach(async function () {
      await clickElementAtCenter(toggle);
    });
    it("expands the disclosure panel", async function () {
      const snapshot = await a11ySnapshot();
      const expanded = querySnapshot(snapshot, { expanded: true });
      expect(expanded).to.be.ok;
    });
  });

• c9bd577: TypeScript: Add static version transformer. This adds a runtime-only
  static version field to custom element classes.

  import "@patternfly/elements/pf-button/pf-button.js";
  const PFE_VERSION = await customElements
    .whenDefined("pf-button")
    .then((PfButton) => PfButton.version);

Patch Changes

• c9bd577: updated dependencies
• 9d68f3d: Dev Server: load lightdom shim files
• 9d68f3d: Dev Server: reload on typescript file changes
• f3f68c9: Windows compatibility for various tools packages
• c9bd577: Dev Server: use last modified time for the dev server cache
• c9bd577: Test Runner Config: import the production version of Lit for tests, reducing
  console chatter during test runs

@patternfly/[email protected]

Major Changes

• c9bd577: RovingTabindexController, ListboxController: constructor options were changed.
  In particular, the initItems(items: Item[]) and setActiveItem(item: Item) methods
  were removed and replaced with the getItems: () => Item[] constructor option, and
  the atFocusedItemIndex accessor.

  Before:

  #tabindex = new RovingTabindexController(this);
  
  firstUpdated() {
    this.#tabindex.initItems(this.items);
  }
  
  updated(changed: PropertyValues<this>) {
    if (changed.has('activeItem')) {
      this.#tabindex.setActiveItem(this.activeItem);
    }
  }

  After:

  #tabindex = RovingTabindexController.of(this, {
    getItems: () => this.items,
  });
  
  updated(changed: PropertyValues<this>) {
    if (changed.has('activeItem')) {
      this.#tabindex.atFocusedItemIndex = this.items.indexOf(this.activeItem);
    }
  }

  For further migration guidance, please see the sources in @patternfly/pfe-core,
  especially:

  • ATFocusController.ts,
  • RovingTabindexController.ts, and
  • ListboxController.ts.

• c9bd577: Removed global pfeLog feature

• c9bd577: Removed window.PfeConfig global config object

• c9bd577: Removed global auto-reveal feature

• c9bd577: Decorators: Added @observes. Use it to add property change callback by
  decorating them with the name of the property to observe

  @customElement("custom-button")
  class CustomButton extends LitElement {
    #internals = this.attachInternals();
  
    @property({ type: Boolean }) disabled = false;
  
    @observes("disabled")
    protected disabledChanged() {
      this.#internals.ariaDisabled = this.disabled
        ? "true"
        : this.ariaDisabled ?? "false";
    }
  }

  Breaking change: This commit makes some changes to the internal APIs of the
  pre-existing @observed observer, most notably it changes the constructor
  signature of the PropertyObserverController and associated functions. Most
  users should not have to make any changes, but if you directly import and use
  those functions, check the commit log to see how to update your call sites.

• c9bd577: Removed global trackPerformance feature

Minor Changes

• c9bd577: ✨ Added ActiveDescendantController

  This controller implements the WAI-ARIA activedescendant pattern
  for keyboard and screen-reader accessibility.

  #activedescendant = ActivedescendantController.of(this, {
    getItems: () => this.options,
    getItemsContainer: () => this.#listbox,
    getOrientation: () => "vertical",
    getActiveDescendantContainer: () => this.#input,
    getControlsElements: () => [this.#input, this.#button].filter((x) => !!x),
    setItemActive: (item, active) => void (item.active = active),
  });

• c9bd577: ✨ Added ComboboxController

  This controller implements the WAI-ARIA combobox pattern for both
  select-only and inline autocomplete comboboxes.

  #combobox = ComboboxController.of(this, {
    multi: this.multi,
    getItems: () => this.options,
    getFallbackLabel: () => this.accessibleLabel,
    getListboxElement: () => this._listbox ?? null,
    getToggleButton: () => this._toggleButton ?? null,
    getComboboxInput: () => this._toggleInput ?? null,
    isExpanded: () => this.expanded,
    requestShowListbox: () => void (this.expanded ||= true),
    requestHideListbox: () => void (this.expanded &&= false),
    setItemHidden: (item, hidden) => void (item.hidden = hidden),
    isItem: (item) => item instanceof PfOption,
    setItemActive: (item, active) => (item.active = active),
    setItemSelected: (item, selected) => (item.selected = selected),
  });

• 6d9045e: InternalsController: added static isSafari boolean flag

• c9bd577: Decorators: Added @listen. Use it to attach element event listeners to
  class methods.

  @customElement("custom-input")
  class CustomInput extends LitElement {
    @property({ type: Boolean }) dirty = false;
    @listen("keyup", { once: true })
    protected onKeyup() {
      this.dirty = true;
    }
  }

Patch Changes

• c9bd577: updated dependencies
• c9bd577: InternalsController: corrected the types for aria IDL list attributes
• c9bd577: Context: makeContextRoot no longer crashes SSR processes

@patternfly/[email protected]

Major Changes

• c9bd577: Require @typescript-eslint ^8.0.0

Patch Changes

• c9bd577: updated dependencies

@patternfly/[email protected]

Major Changes

• c9bd577: <pf-icon>: removed the getIconUrl static method, and replaced it with the
  resolve static method

  The steps for overriding icon loading behaviour have changed. Before, you had to
  return a string from the getIconUrl method, or the second argument to
  addIconSet. Now, both of those functions must return a Node, or any lit-html
  renderable value, or a Promise thereof.

  Before:

  PfIcon.addIconSet('local', (set, icon) =>
    new URL(`/assets/icons/${set}-${icon}.js`));
  
  // or
  PfIcon.getIconUrl = (set, icon) =>
    new URL(`/assets/icons/${set}-${icon}.js`))

  After:

  PfIcon.addIconSet('local', (set, icon) =>
    import(`/assets/icons/${set}-${icon}.js`))
      .then(mod => mod.default);
  
  // or
  PfIcon.resolve = (set, icon) =>
    import(`/assets/icons/${set}-${icon}.js`))
      .then(mod => mod.default);

• c9bd577: <pf-icon>: removed the defaultIconSet static field.

• c9bd577: <pf-accordion>: Removed BaseAccordion* classes, as well as static isPanel, isHeader, and isAccordion methods. Removed the optional parentAccordion parameter to PfAccordion#expand(index). Renamed accordion event classes by adding the Pf prefix:

  Before:

  import { AccordionHeaderChangeEvent } from "@patternfly/elements/pf-accordion/pf-accordion.js";
  
  addEventListener("change", function (event) {
    if (event instanceof AccordionHeaderChangeEvent) {
      // ...
    }
  });

  After:

  import { PfAccordionHeaderChangeEvent } from "@patternfly/elements/pf-accordion/pf-accordion.js";
  
  addEventListener("change", function (event) {
    if (event instanceof PfAccordionHeaderChangeEvent) {
      // ...
    }
  });

• c9bd577: <pf-icon>: removed svg files, use @patternfly/icons instead

• c9bd577: <pf-label>: when clicking close button, close event is fired.
  Now, if that event is not cancelled, the label will remove itself from the document.

  To restore previous behaviour:

  import { LabelCloseEvent } from "@patternfly/elements/pf-label/pf-label.js";
  label.addEventListener("close", function (event) {
    if (event instanceof LabelCloseEvent) {
      event.preventDefault();
      return false;
    }
  });

• c9bd577: <pf-clipboard-copy>: Removed BaseClipboardCopy class.
  Reimplement (recommended) or extend PfClipboardCopy.
  Renames AvatarLoadEvent to PfAvatarLoadEvent and moves it to pf-avatar.js.

  Before:

  import { ClipboardCopyCopiedEvent } from "@patternfly/elements/pf-clipboard-copy/BaseClipboardCopy.js";
  
  addEventListener("copy", function (event) {
    if (event instanceof ClipboardCopyCopiedEvent) {
      // ...
    }
  });

  After:

  import { PfClipboardCopyCopiedEvent } from "@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js";
  
  addEventListener("copy", function (event) {
    if (event instanceof PfClipboardCopyCopiedEvent) {
      // ...
    }
  });

• c9bd577: <pf-icon>: Removed BaseIcon class. Reimplement (recommended) or extend PfIcon.

• c9bd577: <pf-label>: Removed BaseLabel class. Reimplement (recommended) or extend PfLabel.

• c9bd577: <pf-switch>: Removed BaseSwitch class. Reimplement (recommended) or extend PfSwitch.

• c9bd577: <pf-avatar>: Removed BaseAvatar class. Reimplement (recommended) or extend PfAvatar.
  Renames AvatarLoadEvent to PfAvatarLoadEvent and moves it to pf-avatar.js.

  Before:

  import { AvatarLoadEvent } from "@patternfly/elements/pf-avatar/BaseAvatar.js";
  
  addEventListener("load", function (event) {
    if (event instanceof AvatarLoadEvent) {
      // ...
    }
  });

  After:

  import { PfAvatarLoadEvent } from "@patternfly/elements/pf-avatar/pf-avatar.js";
  
  addEventListener("load", function (event) {
    if (event instanceof PfAvatarLoadEvent) {
      // ...
    }
  });

• c9bd577: <pf-badge>: Removed BaseBadge class. Reimplement (recommended) or extend PfBadge.

• c9bd577: <pf-button>: Removed BaseButton class. Reimplement (recommended) or extend PfButton.

• c9bd577: <pf-code-block>: Removed BaseCodeBlock class. Reimplement (recommended) or extend PfCodeBlock.

• c9bd577: <pf-spinner>: Removed BaseSpinner class. Reimplement (recommended) or extend PfSpinner.

• c9bd577: <pf-tabs>: Remove BaseTabs. Use TabsAriaController, etc. to reimplement
  your elements which extend it, or extend from PfTabs instead.

• c9bd577: <pf-tile>: Removed BaseTile class. Reimplement (recommended) or extend PfTile.

• c9bd577: <pf-tooltip>: Removed BaseTooltip class. Reimplement (recommended) or extend PfTooltip.

• c9bd577: <pf-card>: Removes BaseCard base class. If your project extends BaseCard, we recommend extending LitElement instead and re-implementing card's properties. Alternately, extend from PfCard.

Minor Changes

• c9bd577: <pf-card>: added title slot, for when the title is not inline with any slotted header actions

• c9bd577: ✨ Added <pf-select variant="typeahead">

  A typeahead select is an inline-autocomplete combobox.

  <label for="state">State</label>
  <pf-select id="state" variant="typeahead" placeholder="Select a state">
    <pf-option value="Alabama" description="The heart of Dixie"></pf-option>
    <pf-option
      value="Florida"
      description="The sunshine state"
      disabled
    ></pf-option>
    <pf-option value="New Jersey"></pf-option>
    <pf-option value="New York"></pf-option>
    <pf-option value="New Mexico"></pf-option>
    <pf-option value="North Carolina"></pf-option>
  </pf-select>

• 587d957: <pf-button>: Added href attribute to <pf-button variant="link">

Patch Changes

• c9bd577: updated dependencies
• 3e9d785: <pf-select>: prevent bug when select is in a deeply nested in shadow root
• 4995067: <pf-back-to-top>: fix hover color
• Updated dependencies [c9bd577]
• Updated dependencies [c9bd577]
• Updated dependencies [c9bd577]
• Updated dependencies [c9bd577]
• Updated dependencies [6d9045e]
• Updated dependencies [c9bd577]
• Updated dependencies [c9bd577]
• Updated dependencies [c9bd577]
• Updated dependencies [c9bd577]
• Updated dependencies [c9bd577]
• Updated dependencies [c9bd577]
• Updated dependencies [c9bd577]
• Updated dependencies [c9bd577]
  • @patternfly/[email protected]

@patternfly/[email protected]

Patch Changes

• c9bd577: updated dependencies
• 5604adb: Element generator now generates demo files with inlined script and styles

@patternfly/[email protected]

Patch Changes

• aca8409: React: ensure that only classes which are exported get wrapped

@patternfly/[email protected]

Patch Changes

• c57c5dd: Dev Server: redirect demo links to css lightdom subresources
• 9995136: React: corrected syntax error in some generated modules