nested panel replacing deprecated customizer?

[martinsolod]

Hi,
I'm currently working with customizeer to nest a panel within a component, instead of having it sized with a height of 100% / displayed absolute. I found this example within the layer component that has an example to trap the panel using Customizer.
In the code, i can see that Customizer is deprecated. Can you provide another example using the recommended themeProvider?. Does this trap the panel within the component. I have this example here but IDE say that customizer is deprecated.

Thanks in advance

[palonza]

Here I have made a solution (working) in which 'Customizer' is replaced by 'ThemeProvider', please check the following example and tell me if working to you:

https://codesandbox.io/s/fluentui-replace-customizer-v1-0-2-ok2qtv

The code is adapted to work in "@fluentui/react": version 8, where 'Customizer' is deprecated and is based on the original that you have provided at Microsoft.

You may notice that I have added a 'transparent shadow' to highlight the modal.

The code working is as follow:

import * as React from "react";
import { useId, useBoolean } from "@fluentui/react-hooks";
import { initializeIcons } from "@fluentui/react/lib/Icons";
import {
  ThemeProvider,
  Panel,
  Toggle,
  LayerHost,
  ILayerProps,
  IFocusTrapZoneProps,
  mergeStyles
} from "@fluentui/react";

initializeIcons();

export default function LayerCustomizedExample() {
  const [
    isPanelOpen,
    { setTrue: showPanel, setFalse: dismissPanel }
  ] = useBoolean(false);
  const [trapPanel, { toggle: toggleTrapPanel }] = useBoolean(false);

  const layerHostClass = mergeStyles({
    position: "relative",
    height: 400,
    overflow: "hidden",
    border: "1px solid #ccc"
  });

  const focusTrapZoneProps: IFocusTrapZoneProps = {
    isClickableOutsideFocusTrap: true,
    forceFocusInsideTrap: false
  };

  function useLayerSettings(
    trapPanel: boolean,
    layerHostId: string
  ): { Layer?: ILayerProps } {
    return React.useMemo(() => {
      if (trapPanel) {
        const layerProps: ILayerProps = { hostId: layerHostId };
        return { Layer: layerProps };
      }
      return {};
    }, [trapPanel, layerHostId]);
  }

  // Use useId() to ensure that the ID is unique on the page.
  // (It's also okay to use a plain string and manually ensure uniqueness.)
  const layerHostId = useId("layerHost");

  const scopedSettings = useLayerSettings(trapPanel, layerHostId);

  return (
    <div>
      <p>
        A <code>Panel</code> is rendered, trapped in a specified container. Use{" "}
        <b>Show panel</b> to show/hide the panel (or select the X to dismiss
        it). Use <b>Trap panel</b> to release the panel from its bounds.
      </p>
      <Toggle
        label="Show panel"
        inlineLabel
        checked={isPanelOpen}
        onChange={isPanelOpen ? dismissPanel : showPanel}
      />
      <Toggle
        label="Trap panel"
        inlineLabel
        checked={trapPanel}
        onChange={toggleTrapPanel}
      />
      <ThemeProvider theme={{ components: scopedSettings }}>
        {isPanelOpen && (
          <Panel
            isOpen
            hasCloseButton
            headerText="Sample panel"
            focusTrapZoneProps={focusTrapZoneProps}
            onDismiss={dismissPanel}
            styles={{
              root: { backgroundColor: "rgba(128, 128, 128, 0.5)" }
            }}
          >
            This panel {trapPanel ? "is" : "is not"} trapped.
          </Panel>
        )}
      </ThemeProvider>
      <LayerHost id={layerHostId} className={layerHostClass} />
    </div>
  );
}

[martinsolod]

Hi @palonza !! tank you very much for your answer and fast help. Your code it is working!!

[palonza]

Great!