@patternfly/[email protected]

Patch Changes

• 1924229: Generate TypeScript typings for React wrapper components

@patternfly/[email protected]

Minor Changes

• f4a7ae7: React: adds @patternfly/pfe-tools/react/generate-wrappers.js

  Use this to generate React component wrappers for Lit custom elements,
  based on their custom-elements.json manifest.

  import { generateReactWrappers } from "@patternfly/pfe-tools/react/generate-wrappers.js";
  
  const inURL = new URL("../elements/custom-elements.json", import.meta.url);
  const outURL = new URL("../elements/react/", import.meta.url);
  
  await generateReactWrappers(inURL, outURL);

Patch Changes

• 699a812: 11ty: prevent duplicate IDs on code pages when multiple elements are documented

@patternfly/[email protected]

Patch Changes

• 5b16b3b: SlotController: ensure first render is correct when used in certain javascript frameworks

@patternfly/[email protected]

Minor Changes

• a81bcb1: Controllers: Added timestamp controller

Patch Changes

• 7055add: FloatingDOMController: fixed an incorrect typescript import

@patternfly/[email protected]

Patch Changes

• 91850fb: fixed TypeScript typings for react wrappers

@patternfly/[email protected]

Patch Changes

• 1924229: Generate TypeScript typings for React wrapper components

@patternfly/[email protected]

Minor Changes

• c4170a5: PatternFly elements are now available wrapped in React components. While it was
  always possible to use PatternFly elements (or any other custom elements) in
  React apps, this release makes it easier to integrate them into React without
  the need for cumbersome workarounds to React's poor HTML and DOM support.

  Before:

  import { useEffect, useState, useRef } from "react";
  import "@patternfly/elements/pf-switch/pf-switch.js";
  
  function App() {
    const [checked, setChecked] = useState(false);
    const switchRef = useRef(null);
    useEffect(() => {
      switchRef.current.checked = checked;
    }, [switchRef.current, checked]);
    useEffect(() => {
      switchRef.current.addEventListener("change", () =>
        setChecked(switchRef.current.checked)
      );
    }, [switchRef.current]);
    return (
      <>
        <pf-switch ref={switchRef}></pf-switch>
      </>
    );
  }

  After:

  import { useState } from "react";
  import { Switch } from "@patternfly/elements/react/pf-switch/pf-switch.js";
  
  function App() {
    const [checked, setChecked] = useState(false);
    return (
      <>
        <Switch
          checked={checked}
          onChange={({ target }) => setChecked(target.checked)}
        />
      </>
    );
  }

Patch Changes

• f4a7ae7: <pf-accordion>: update the expandedIndex DOM property on change
• Updated dependencies [7055add]
• Updated dependencies [a81bcb1]
  • @patternfly/[email protected]

@patternfly/[email protected]

Patch Changes

• 5f2e653: <pf-tabs>: prevent error when using tabs-panel with certain frameworks or imperative javascript code

@patternfly/[email protected]

Patch Changes

• 5f2e653: Tests: check for imperative element instantiation

@patternfly/[email protected]

Patch Changes

• cdd1d42: DocsPage: renders headings as markdown (PR)
• d7dd035: dev-server: Corrects aliased elements redirects